:root {
  /* Brand */
  --purple:       #534AB7;
  --purple-dark:  #3C3489;
  --purple-light: #EEEDFE;
  --gold:         #EF9F27;
  --green:        #2e9e5b;

  /* Light mode surfaces */
  --bg:           #f4f2ed;
  --surface:      #ffffff;
  --surface2:     #f8f7f4;
  --border:       rgba(0,0,0,0.1);
  --text:         #1a1a1a;
  --text-muted:   #666666;
  --text-faint:   #aaaaaa;

  /* Nav */
  --nav-bg:       #534AB7;
  --nav-text:     #ffffff;
  --nav-border:   rgba(255,255,255,0.15);

  /* Tile */
  --tile-bg:      #EEEDFE;
  --tile-border:  #AFA9EC;
  --tile-text:    #3C3489;

  /* Input */
  --input-bg:     #ffffff;
  --input-border: #dddddd;

  /* Card shadow */
  --shadow:       0 1px 6px rgba(0,0,0,0.07);
}

/* ── Dark mode overrides ── */
html.dark-mode { background: #1a1726; }
html.dark-mode body { background: #16141f !important; }
html.dark-mode, body.dark-mode {
  --bg:           #16141f;
  --surface:      #1f1d2e;
  --surface2:     #2a2740;
  --border:       rgba(255,255,255,0.1);
  --text:         #f5f3ff;
  --text-muted:   #c4bde8;
  --text-faint:   #8880aa;

  --nav-bg:       #1e1b2e;
  --nav-text:     #f0eeff;
  --nav-border:   rgba(255,255,255,0.08);

  --tile-bg:      #302b4e;
  --tile-border:  #534AB7;
  --tile-text:    #c8c0f8;

  --input-bg:     #2e2a42;
  --input-border: #4a4468;

  --shadow:       0 1px 8px rgba(0,0,0,0.4);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── Screens ── */
.screen { display: none; }
.screen.active { display: block; }

/* ── When auth/username screen is active: hide ALL fixed game chrome ──────── */
body.auth-active .topnav,
body.auth-active .mobile-dock,
body.auth-active .mobile-scores-bar,
body.auth-active .mobile-extra-panel,
body.auth-active .mobile-extra-backdrop,
body.auth-active #chat-panel,
body.auth-active #mini-games-card,
body.auth-active #event-banner,
body.auth-active .chaos-abilities-bar,
body.auth-active #chaos-abilities-bar,
body.auth-active #chaos-abilities-bar-mobile,
body.auth-active #not-your-turn-banner { display: none !important; }

/* Restore pull-to-refresh and normal scrolling on auth screens */
body.auth-active {
  overflow: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: auto !important;
}
body.auth-active #screen-game {
  overflow: visible !important;
  height: auto !important;
  touch-action: auto !important;
}
body.auth-active .board,
body.auth-active .board-wrap {
  touch-action: auto !important;
}

/* ── Auth ── */
#screen-auth {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22570%22%20height%3D%22570%22%3E%3Crect%20width%3D%22570%22%20height%3D%22570%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23d4a040%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22570%22%20y2%3D%220%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%2238%22%20y1%3D%220%22%20x2%3D%2238%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2238%22%20x2%3D%22570%22%20y2%3D%2238%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%2276%22%20y1%3D%220%22%20x2%3D%2276%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2276%22%20x2%3D%22570%22%20y2%3D%2276%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22114%22%20y1%3D%220%22%20x2%3D%22114%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22114%22%20x2%3D%22570%22%20y2%3D%22114%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22152%22%20y1%3D%220%22%20x2%3D%22152%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22152%22%20x2%3D%22570%22%20y2%3D%22152%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22190%22%20y1%3D%220%22%20x2%3D%22190%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22190%22%20x2%3D%22570%22%20y2%3D%22190%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22228%22%20y1%3D%220%22%20x2%3D%22228%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22228%22%20x2%3D%22570%22%20y2%3D%22228%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22266%22%20y1%3D%220%22%20x2%3D%22266%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22266%22%20x2%3D%22570%22%20y2%3D%22266%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22304%22%20y1%3D%220%22%20x2%3D%22304%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22304%22%20x2%3D%22570%22%20y2%3D%22304%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22342%22%20y1%3D%220%22%20x2%3D%22342%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22342%22%20x2%3D%22570%22%20y2%3D%22342%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22380%22%20y1%3D%220%22%20x2%3D%22380%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22380%22%20x2%3D%22570%22%20y2%3D%22380%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22418%22%20y1%3D%220%22%20x2%3D%22418%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22418%22%20x2%3D%22570%22%20y2%3D%22418%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22456%22%20y1%3D%220%22%20x2%3D%22456%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22456%22%20x2%3D%22570%22%20y2%3D%22456%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22494%22%20y1%3D%220%22%20x2%3D%22494%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22494%22%20x2%3D%22570%22%20y2%3D%22494%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22532%22%20y1%3D%220%22%20x2%3D%22532%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22532%22%20x2%3D%22570%22%20y2%3D%22532%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22570%22%20y1%3D%220%22%20x2%3D%22570%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22570%22%20x2%3D%22570%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
  background-size: 570px 570px;   /* board tile grid */
  background-position: center center;
  background-repeat: repeat;
  background-color: #f0ece0;
  /* Subtle vignette/overlay so content is easy to read */
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}
#screen-auth::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(252,249,243,0.82);
  pointer-events: none;
  z-index: 0;
}
#screen-auth > * { position: relative; z-index: 1; }

.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px 60px;
  max-width: 520px;
  margin: 0 auto;
}



/* Info section on auth screen */
.auth-info {
  width: 100%;
  max-width: 420px;
  margin-top: 32px;
}
.auth-info-header {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  padding: 20px 20px 16px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.auth-info h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.auth-info .auth-info-desc {
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.6;
}
.auth-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.auth-feature {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.auth-feature .af-icon { font-size: 26px; margin-bottom: 6px; }
.auth-feature .af-title { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }
.auth-feature .af-desc  { font-size: 12px; color: #777; line-height: 1.4; }
.auth-modes {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.auth-mode-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.logo-block { text-align: center; margin-bottom: 16px; }
.logo { font-size: 36px; font-weight: 700; color: #534AB7; letter-spacing: -1px; }
.logo span { color: var(--gold); } /* Words in gold on auth screen */
.logo span { color: #534AB7; }
.logo-sm span { color: var(--gold); }  /* gold accent on purple topnav */
.topnav .logo-sm { color: var(--nav-text) !important; }  /* "Play Back" white on purple */
.topnav a.logo-sm { color: #ffffff !important; }         /* override link default */
.logo-sm { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.tagline { font-size: 18px; font-weight: 700; color: #534AB7; margin-top: 8px; letter-spacing: -0.3px; }
.invite-note { font-size: 12px; color: #999; margin-top: 16px; text-align: center; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
  transition: background 0.3s ease;
}
.card h2 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.card .hint { font-size: 13px; color: #666; margin-bottom: 16px; line-height: 1.5; }
.card label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 5px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.card input, .card select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fafafa;
  color: #1a1a1a;
  outline: none;
  transition: border-color .15s;
}
.card input:focus, .card select:focus { border-color: #534AB7; background: #fff; }
.divider { text-align: center; margin: 16px 0; position: relative; color: #aaa; font-size: 12px; }
.divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #eee; }
.divider span { background: #fff; padding: 0 10px; position: relative; }

/* ── Buttons ── */
.btn-primary {
  display: block; width: 100%; margin-top: 16px;
  padding: 11px; border-radius: 8px;
  background: #534AB7; color: #fff; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: #3C3489; }
.btn-primary:disabled { background: #aaa; cursor: default; }
.btn-secondary {
  display: block; width: 100%; margin-top: 10px;
  padding: 10px; border-radius: 8px;
  background: transparent; color: #534AB7;
  border: 1px solid #534AB7;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .15s;
}
.btn-secondary:hover { background: #f0effe; }
.btn-danger {
  padding: 0 14px; height: 36px; border-radius: 8px;
  background: #E24B4A; color: #fff; border: none;
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-danger:hover { background: #A32D2D; }
.btn-sm {
  padding: 0 14px; height: 36px; border-radius: 7px;
  background: transparent; color: var(--text);
  border: 0.5px solid rgba(0,0,0,0.2);
  font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-sm:hover { background: rgba(0,0,0,0.05); }
/* Buttons inside topnav: white/transparent on purple bg */
.topnav .btn-sm {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff !important;
}
.topnav .btn-sm:hover { background: rgba(255,255,255,0.28); }
.topnav .username-badge { background: rgba(255,255,255,0.18); color: #fff; }
.topnav .chat-nav-btn { color: #fff !important; }
/* Mini game buttons in topnav keep their colors, just get white border */
.topnav .nav-games .btn-sm[style*="background:#534AB7"],
.topnav .nav-games .btn-sm[style*="background:#2e9e5b"],
.topnav .nav-games .btn-sm[style*="background:#EF9F27"] {
  border-color: rgba(255,255,255,0.5) !important;
}
.btn-shuffle { background: #AFA9EC; border-color: #534AB7; color: #fff; border-radius: 7px; border: 1px solid #534AB7; padding: 0 14px; height: 36px; font-size: 13px; cursor: pointer; font-weight: 600; }
.btn-shuffle:hover { background: #7F77DD; }

/* ── Nav ── */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--nav-bg);
  border-bottom: 0.5px solid var(--nav-border);
  position: sticky; top: 0; z-index: 200;
  transition: background 0.3s ease;
  overflow: visible; /* allow dropdowns to overflow below */
}
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-left  { display: flex; align-items: center; gap: 8px; }
.nav-games { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.username-badge {
  font-size: 13px; font-weight: 600; color: #534AB7;
  background: #f0effe; padding: 4px 10px; border-radius: 20px;
}

/* ── Lobby ── */
.lobby-wrap {
  max-width: 860px; margin: 24px auto; padding: 0 16px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 769px) {
  .lobby-wrap {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.lobby-col { flex: 1; min-width: 280px; }
.option-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-top: 0.5px solid #eee; margin-top: 2px; }
.toggle-label { display: block; font-size: 14px; font-weight: 500; }
.mode-row-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-row-title { font-weight: 600; font-size: 14px; }
.mode-row-sub { font-size: 11px; color: #888; margin-top: 0; }
.info-icon-link { color: #534AB7; font-size: 13px; text-decoration: none; margin-left: 3px; vertical-align: middle; opacity: 0.7; }
.info-icon-link:hover { opacity: 1; }
.toggle {
  width: 42px; height: 24px; border-radius: 12px;
  background: #ccc; border: none; cursor: pointer;
  position: relative; transition: background .2s; padding: 0;
}
.toggle.on { background: #534AB7; }
.toggle::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  top: 3px; left: 3px; transition: left .2s;
}
.toggle.on::after { left: 21px; }

.games-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 0.5px solid #f0f0f0;
  gap: 10px;
}
.games-list-item:last-child { border-bottom: none; }
.gli-left .vs { font-size: 17px; font-weight: 700; }
.gli-left .meta { font-size: 13px; color: #666; margin-top: 3px; }
.badge {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
}
/* LOCKED TURN BADGE DESIGN: your-turn = bold text only, no bg. See lobby.js renderGameItem. */
.badge.your-turn { background: none; color: #1a1a1a; font-weight: 700; padding: 3px 0; }
.badge.waiting { background: none; color: #666; font-weight: 500; padding: 3px 0; }  /* visible in light mode */
.badge.finished { background: #eee; color: #555; }
/* Your-turn rows get a left accent so they jump out at a glance */
.games-list-item.my-turn-item {
  border-left: 3px solid #534AB7;
  padding-left: 10px;
  margin-left: -13px;
  background: #FAFAFE;
  border-radius: 0 6px 6px 0;
}
/* Dark mode */
body.dark-mode .badge.your-turn { color: #e8e4ff !important; }
body.dark-mode .badge.waiting   { color: #c8c0f8 !important; }
body.dark-mode .badge.finished  { background: #2e2a42 !important; color: #8a8090 !important; }
body.dark-mode .games-list-item.my-turn-item {
  background: rgba(83,74,183,0.15) !important;
  border-left-color: #8b84e0 !important;
}
.loading { font-size: 13px; color: #aaa; padding: 12px 0; }

/* ── Game Top Bar ── */
.topbar {
  display: flex; gap: 6px; padding: 5px 10px;
  background: #fff; border-bottom: 0.5px solid rgba(0,0,0,0.08);
  flex-wrap: wrap;
}
.sc-card {
  border-radius: 8px; padding: 4px 10px; min-width: 90px;
  border: 2px solid transparent; background: #f4f2ed;
}
.sc-card.active { border-color: #EF9F27; }
.sc-card .pn { font-size: 11px; color: #888; }
.sc-card .pts { font-size: 18px; font-weight: 700; }
.sc-card .tb { font-size: 10px; color: #BA7517; font-weight: 600; min-height: 14px; }
.ibox { background: #f4f2ed; border-radius: 8px; padding: 4px 10px; flex: 1; min-width: 90px; }
.ibox .ilbl { font-size: 11px; color: #888; margin-bottom: 2px; }
.ibox .ival { font-size: 13px; font-weight: 600; }
#gt-val { font-size: 12px; line-height: 1.4; font-weight: 500; }

/* ── Legend ── */
.legend {
  display: none !important; /* removed — not needed on desktop */
}
.leg { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #666; }
.ld { width: 12px; height: 12px; border-radius: 3px; }

/* ── Board ── */
.main { display: flex; gap: 12px; padding: 12px; flex-wrap: wrap; align-items: flex-start; }
.board-wrap { overflow-x: auto; }
.board {
  display: grid;
  grid-template-columns: repeat(15, 36px);
  gap: 2px;
}
.cell {
  width: 36px; height: 36px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 11px; font-weight: 600;
  position: relative; border: 1px solid transparent;
  transition: transform .1s; user-select: none;
  touch-action: none; /* allow touch drag drop */
}
.cell:hover { transform: scale(1.07); }
/* ── Default board theme ── */
.cell.norm { background: #C0DD97; color: #3B6D11; }
.cell.dl   { background: #B5D4F4; color: #185FA5; }
.cell.tl   { background: #378ADD; color: #fff; }
.cell.dw   { background: #F4C0D1; color: #72243E; }
.cell.tw   { background: #A32D2D; color: #fff; }
.cell.star { background: #FAC775; color: #854F0B; }

/* ── Hearthfire / Ember theme (Season 1) ── */
#board[data-theme="ember"] .cell.norm { background: #F2E0C8; color: #7A3B1E; }
#board[data-theme="ember"] .cell.dl   { background: #F7C59F; color: #7A3B1E; }
#board[data-theme="ember"] .cell.tl   { background: #E8832A; color: #fff; }
#board[data-theme="ember"] .cell.dw   { background: #F4A460; color: #5C1A0A; }
#board[data-theme="ember"] .cell.tw   { background: #C0392B; color: #fff; }
#board[data-theme="ember"] .cell.star { background: #FFD700; color: #7A3B1E; }

/* ── Ocean / Tidal Wave theme (Season 2) ── */
#board[data-theme="ocean"] .cell.norm { background: #D6EAF8; color: #1A5276; }
#board[data-theme="ocean"] .cell.dl   { background: #AED6F1; color: #1A5276; }
#board[data-theme="ocean"] .cell.tl   { background: #2E86C1; color: #fff; }
#board[data-theme="ocean"] .cell.dw   { background: #85C1E9; color: #1A3A5C; }
#board[data-theme="ocean"] .cell.tw   { background: #1A5276; color: #fff; }
#board[data-theme="ocean"] .cell.star { background: #48C9B0; color: #0E4D40; }

/* ── Forest / Old Growth theme (Season 3) ── */
#board[data-theme="forest"] .cell.norm { background: #D5F5E3; color: #1E5631; }
#board[data-theme="forest"] .cell.dl   { background: #A9DFBF; color: #1E5631; }
#board[data-theme="forest"] .cell.tl   { background: #27AE60; color: #fff; }
#board[data-theme="forest"] .cell.dw   { background: #82E0AA; color: #1A4A2E; }
#board[data-theme="forest"] .cell.tw   { background: #1E5631; color: #fff; }
#board[data-theme="forest"] .cell.star { background: #F9E79F; color: #7D6608; }

/* ── Cosmic / Event Horizon theme (Season 4) ── */
#board[data-theme="cosmic"] .cell.norm { background: #1C1C3A; color: #A89FE7; }
#board[data-theme="cosmic"] .cell.dl   { background: #2D2B55; color: #C3B8FF; }
#board[data-theme="cosmic"] .cell.tl   { background: #534AB7; color: #fff; }
#board[data-theme="cosmic"] .cell.dw   { background: #3D1A6E; color: #D7B8FF; }
#board[data-theme="cosmic"] .cell.tw   { background: #7B1FA2; color: #fff; }
#board[data-theme="cosmic"] .cell.star { background: #FFD700; color: #3A2800; }
#board[data-theme="cosmic"] .cell.norm,
#board[data-theme="cosmic"] .cell.locked,
#board[data-theme="cosmic"] { background: #0D0D1F; }
#board[data-theme="cosmic"] .cell.locked { color: #E8E0FF; }
.cell.golden { background: #EF9F27 !important; color: #fff !important; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,159,39,.5)} 50%{box-shadow:0 0 0 5px rgba(239,159,39,0)} }
.cell.placed { background: #534AB7 !important; color: #FFE566 !important; font-size: 15px; font-weight: 700; border: 2px dashed #c8c2ff !important; }
.cell.placed.practice { background: #534AB7 !important; color: #FFE566 !important; font-size: 15px; font-weight: 700; border: 2px dashed #c8c2ff !important; opacity: 0.7; }
.cell.locked { background: #534AB7 !important; color: #fff !important; font-size: 15px; font-weight: 700; }
.cell.locked.last-played { background: #8F8BD8 !important; box-shadow: inset 0 0 0 1.5px #6560C8; }
.cell.locked.gt-used {
  background: #534AB7 !important;
  box-shadow: 0 0 0 2px #EF9F27, 0 0 8px 2px rgba(239,159,39,0.5) !important;
}
.cell.gt-vacated {
  outline: 2px dashed #EF9F27 !important;
  outline-offset: -3px;
  background: #FFFBE6 !important;
}
.cell.placed.on-golden {
  box-shadow: 0 0 0 2px #EF9F27, 0 0 8px 2px rgba(239,159,39,0.5) !important;
}
.cell.blank-tile { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4) !important; }
.blank-letter { text-decoration: underline; text-underline-offset: 2px; }
.cell .lp { font-size: 8px; font-weight: 600; position: absolute; bottom: 1px; right: 2px; opacity: .85; }

/* ── Side Panel ── */
.side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.scard { background: #f4f2ed; border-radius: 8px; padding: 10px 12px; }
.rack-lbl { font-size: 11px; color: #888; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.rack { display: flex; gap: 4px; flex-wrap: wrap; background: #f0eeee; border-radius: 10px; padding: 6px; }
.rack-slot { width: 36px; height: 44px; border-radius: 6px; border: 1.5px dashed #ddd; background: #fff; flex-shrink: 0; }
.tile {
  width: 38px; height: 38px; border-radius: 6px;
  background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--tile-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; font-weight: 600;
  position: relative; transition: transform .1s, background 0.3s ease; user-select: none;
}
.tile:hover { transform: translateY(-3px); }
.tile.sel { background: #EF9F27; color: #fff; border-color: #BA7517; transform: translateY(-3px); }
.tile.reorder-sel { background: #534AB7; color: #fff; border-color: #3C3489; transform: translateY(-3px); }
.tile .tp { font-size: 7px; position: absolute; bottom: 2px; right: 3px; }
.tile.blank { background: #F1EFE8; color: #5F5E5A; border-color: #B4B2A9; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.msg {
  font-size: 13px; background: #f4f2ed; border-radius: 8px;
  padding: 8px 12px; min-height: 36px; color: #1a1a1a;
}
.emoji-bar { display: flex; gap: 5px; flex-wrap: wrap; }
.ebtn {
  font-size: 18px; padding: 4px 7px; border-radius: 7px;
  border: 0.5px solid rgba(0,0,0,0.1); background: transparent;
  cursor: pointer; line-height: 1;
}
.ebtn:hover { background: rgba(0,0,0,0.06); }
.ebtn-more { font-size: 14px; color: #888; letter-spacing: 1px; }
.log-wrap { background: #f4f2ed; border-radius: 8px; padding: 10px 12px; flex: 1; }
.log-lbl { font-size: 11px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.log { flex: 1; min-height: 80px; overflow-y: auto; scroll-behavior: auto; }
.le { font-size: 12px; padding: 2px 0; border-bottom: 0.5px solid rgba(0,0,0,0.05); color: #1a1a1a; }
.le.good { color: #3B6D11; }
.le.bad  { color: #A32D2D; }
.le.gold { color: #854F0B; }
.le.sys  { color: #888; }
.le.sys-action {
  color: #534AB7;
  font-weight: 700;
  font-size: 14px;
  padding: 5px 10px;
  margin: 4px 0;
  background: #f0effe;
  border-radius: 6px;
  border-bottom: none;
  border-left: 3px solid #534AB7;
}
body.dark-mode .le.sys-action {
  background: rgba(83,74,183,0.2);
  color: #b0a8f0;
}
.le.lurker {
  color: #7a1f1f;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 10px;
  margin: 4px 0;
  background: #fff4f4;
  border-radius: 6px;
  border-bottom: none;
  border-left: 3px solid #A32D2D;
}
body.dark-mode .le.lurker {
  background: rgba(163,45,45,0.15);
  color: #e07070;
}

/* ── Turn banner ── */
.turn-banner {
  background: #f0effe; border-top: 1px solid #d0caf5;
  text-align: center; padding: 10px;
  font-size: 13px; font-weight: 500; color: #534AB7;
}

/* ── Stats ── */
.stats-wrap { max-width: 560px; margin: 24px auto; padding: 0 16px; }
.info-tab-content { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.stat-c { background: #f4f2ed; border-radius: 8px; padding: 10px 14px; }
.stats-tabs { display: flex; gap: 6px; margin: 12px 0 16px; flex-wrap: wrap; }
.stats-tab {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  border: 1px solid rgba(0,0,0,0.15); background: transparent; cursor: pointer;
  color: #555; transition: all .15s;
}
.stats-tab:hover { background: #f4f2ed; }
.stats-tab.active { background: #534AB7; color: #fff; border-color: #534AB7; }
.stat-c .sl { font-size: 12px; color: #888; margin-bottom: 3px; }
.stat-c .sv { font-size: 18px; font-weight: 700; }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 20px;
  overflow-y: auto;
}
.modal-box {
  background: #fff; border-radius: 14px; padding: 24px 28px;
  max-width: 360px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.modal-box h2 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.modal-box p { font-size: 13px; color: #666; margin-bottom: 14px; }
.alpha-grid { display: grid; grid-template-columns: repeat(7, 40px); gap: 5px; margin-bottom: 14px; }
.alph-btn {
  width: 40px; height: 40px; border-radius: 6px;
  background: #EEEDFE; border: 1px solid #AFA9EC; color: #3C3489;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.alph-btn:hover { background: #CECBF6; }
.swap-t {
  width: 44px; height: 52px; border-radius: 8px;
  background: #EEEDFE; border: 2px solid #AFA9EC; color: #3C3489;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.swap-t.ss { background: #E24B4A; color: #fff; border-color: #A32D2D; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #3C3489; color: #fff; padding: 8px 18px;
  border-radius: 24px; font-size: 13px; font-weight: 500;
  z-index: 9500; pointer-events: none;
  animation: toastIn .25s ease;
}
@media (max-width: 768px) {
  .toast {
    bottom: 72px; /* above mobile bottom bar (~56px) */
  }
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Error ── */
.error-msg { margin-top: 10px; font-size: 13px; color: #A32D2D; background: #fff0f0; padding: 8px 12px; border-radius: 7px; }

/* ── Legend collapsible ── */
.legend { position: relative; }
.legend-toggle {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 10px; color: #aaa; padding: 2px 4px; line-height: 1;
}
.legend.collapsed .leg { display: none; }
.legend.collapsed { padding: 4px 12px; }
.legend.collapsed .legend-toggle { transform: rotate(180deg); }

/* ── Letters-left collapsible ── */
.ll-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 100%; text-align: center;
}
.ll-body { display: block; } /* visible by default on desktop */
.letters-left-panel.ll-open .ll-body { display: block; }

/* ── Side extras (reactions + log) collapsible ── */
.side-extras { margin-top: 0; }
.side-extras-toggle {
  font-size: 11px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: 0.4px;
  list-style: none; cursor: pointer; padding: 8px 12px;
  background: #f4f2ed; border-radius: 8px; user-select: none;
  display: none; /* hidden on desktop — always open */
}
.side-extras-toggle::-webkit-details-marker { display: none; }
.side-extras[open] .side-extras-toggle { border-radius: 8px 8px 0 0; }

/* ── Responsive utility classes ── */
.mobile-only  { display: none !important; }  /* shown only inside @media mobile */
.desktop-only { display: block !important; } /* hidden inside @media mobile */

/* ── Info button ── */
.btn-info { font-size: 16px; padding: 0 10px; }

/* ── Info screen ── */
.info-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.info-tab-content .card { margin-top: 0; }
.info-body p { font-size: 14px; color: #333; line-height: 1.6; margin-bottom: 10px; }
.info-body h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; color: #1a1a1a; }
.info-body ul { padding-left: 18px; margin-bottom: 10px; }
.info-body ul li { font-size: 14px; color: #333; line-height: 1.6; margin-bottom: 4px; }
.info-note { font-size: 12px; color: #888; margin-top: 8px; }
.bonus-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.bonus-row { display: flex; gap: 12px; align-items: flex-start; }
.bonus-row > div:last-child p { font-size: 13px; color: #555; margin: 2px 0 0; line-height: 1.5; }
.bonus-row strong { font-size: 14px; font-weight: 600; }
.bonus-swatch {
  width: 40px; height: 40px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.dl-swatch { background: #B5D4F4; color: #185FA5; }
.tl-swatch { background: #378ADD; color: #fff; }
.dw-swatch { background: #F4C0D1; color: #72243E; }
.tw-swatch { background: #A32D2D; color: #fff; }
.star-swatch { background: #FAC775; color: #854F0B; }
.bingo-swatch { background: #534AB7; color: #fff; font-size: 16px; font-weight: 700; }
.palin-swatch { background: #EEEDFE; color: #3C3489; font-size: 20px; }
.gt-effects-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.gt-effect-row { display: flex; gap: 10px; align-items: flex-start; }
.gt-effect-badge {
  background: #EF9F27; color: #fff; border-radius: 6px;
  padding: 4px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.gt-effect-desc { font-size: 13px; color: #555; line-height: 1.5; padding-top: 2px; }


/* ── Game submit button ── */
.btns {
  flex-wrap: wrap;
  margin-top: 8px;
}
/* Wrapper makes submit button match the rack's natural width */
.rack-submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  min-width: 332px;
}
.rack-submit-wrap .rack {
  margin-bottom: 0;
  min-height: 52px; /* keep height even when rack is empty */
}
#btn-submit {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 20px;
  font-size: 15px;
  background: #2e9e5b;
  border-radius: 10px;
  white-space: nowrap;
}
#btn-submit:hover:not(:disabled),
#btn-submit-mobile:hover:not(:disabled) { background: #237a46; }
#btn-submit:disabled,
#btn-submit-mobile:disabled {
  background: #aaa !important;
  cursor: default;
}
#btn-submit.invalid-word,
#btn-submit-mobile.invalid-word {
  background: #c9a000 !important;
}
#btn-submit.invalid-word:hover,
#btn-submit-mobile.invalid-word:hover {
  background: #a88200 !important;
}
/* Not my turn: grey */
#btn-submit-mobile:not(.invalid-word):disabled {
  background: #aaa !important;
}

/* ── Letters left panel ── */
.letters-left-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  background: #f4f2ed;
  border-radius: 10px;
  min-width: 52px;
  max-width: 60px;
  gap: 4px;
  align-self: flex-start;
}
.ll-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #888;
  text-align: center;
}
.ll-bag-count {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  text-align: center;
}
.ll-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.ll-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 4px;
  border-radius: 4px;
  background: #e8e5de;
  font-size: 11px;
}
.ll-letter { font-weight: 700; color: #1a1a1a; }
.ll-count  { font-size: 10px; color: #333; font-weight: 600; }
.ll-total  { font-size: 9px; color: #aaa; font-weight: 400; }
.ll-tile-empty { opacity: 0.35; }

/* ── Opponent face-down rack ── */
.opp-rack {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin-top: 4px; min-height: 16px;
}
.tile-back {
  width: 18px; height: 22px; border-radius: 3px;
  background: #534AB7; border: 1px solid #3C3489;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tile-back-inner {
  width: 10px; height: 14px; border-radius: 2px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 2px,
    transparent 2px,
    transparent 6px
  );
}

/* ── Coin badge ── */
.coin-badge {
  font-size: 12px; font-weight: 700; color: #854F0B;
  background: #FAC775; padding: 3px 8px;
  border-radius: 20px; cursor: default;
  white-space: nowrap;
}

/* ── Tile colours: placed vs locked ── */
/* placed (tentative, dashed border) already in .cell.placed above */
/* On mobile shrink tile-backs */

/* ── Chaos Mode ── */
.cell.chaos-drifter {
  box-shadow: 0 0 0 3px #E24B4A, 0 0 8px 2px rgba(226,75,74,0.5) !important;
  animation: drifter-pulse 1s infinite;
  z-index: 2;
}
@keyframes drifter-pulse {
  0%,100% { box-shadow: 0 0 0 3px #E24B4A, 0 0 6px 2px rgba(226,75,74,0.4); }
  50%      { box-shadow: 0 0 0 3px #E24B4A, 0 0 12px 4px rgba(226,75,74,0.7); }
}
.cell.chaos-target {
  box-shadow: 0 0 0 2px #E24B4A !important;
  animation: target-pulse 1.2s infinite;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
@keyframes target-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(226,75,74,0.6); }
  50%      { box-shadow: 0 0 0 2px rgba(239,159,39,1); }
}
.cell.chaos-broken {
  background: rgba(180,50,50,0.12) !important;
}
/* Placed/active tile on a broken cell — must not show chaos-broken tint */
.cell.placed.chaos-broken,
.cell.placed.chaos-broken-played {
  background: #534AB7 !important;
  color: #FFE566 !important;
}
.cell.locked.chaos-broken,
.cell.locked.chaos-broken-played {
  background: #534AB7 !important;
  color: #fff !important;
}
/* Tile played on an eaten cell — must override bonus cell colors */
.cell.chaos-broken-played {
  background: #534AB7 !important;
  color: #fff !important;
}
.cell.chaos-broken-played::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px dashed rgba(226,75,74,0.5);
  border-radius: 3px;
  pointer-events: none;
}
.cell.chaos-broken::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px dashed rgba(180,50,50,0.4);
  border-radius: 3px;
  pointer-events: none;
}

/* ── Invite rows ── */
.invite-row {
  background: #f0effe;
  border: 1px solid #d0caf5;
  border-radius: 8px;
  margin-bottom: 6px;
}

/* ── Favorites heart button ── */
.btn-fav {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface2);
  font-size: 18px; cursor: pointer; line-height: 1;
  color: var(--text-muted); transition: all .15s; flex-shrink: 0;
}
.btn-fav:hover { color: #E24B4A; border-color: #E24B4A; }
.btn-fav.faved { color: #E24B4A; border-color: #E24B4A; background: #fff5f5; }

/* ── Mode badges in games list ── */
.mode-badges { display: inline-flex; gap: 4px; vertical-align: middle; }
.mode-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px; letter-spacing: 0.2px;
}
.mode-badge.normal  { background: #f0f0f0; color: #888; }
.mode-badge.golden  { background: #FEF3DC; color: #854F0B; }
.mode-badge.diag    { background: #EEF4FF; color: #2B5BD7; }
.mode-badge.chaos   { background: #FFF0F0; color: #A32D2D; }

/* ── Skull confetti ── */
.skull-confetti {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 300; overflow: hidden;
}
@keyframes skull-fall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(105vh) rotate(360deg); opacity: 0.2; }
}

/* ── Nuke selectable tiles ── */
.cell.locked.nuke-selectable {
  box-shadow: 0 0 0 2px #E24B4A !important;
  cursor: crosshair !important;
}
.cell.locked.nuke-selectable:hover {
  box-shadow: 0 0 0 3px #E24B4A, 0 0 8px rgba(226,75,74,0.5) !important;
}

/* ── Finished game outcome badges ── */
.badge.finished.won  { background: #d4edda; color: #155724; }
.badge.finished.lost { background: #f8d7da; color: #721c24; }
.badge.finished.tied { background: #e2e3e5; color: #383d41; }

/* ── Finished game items in lobby ── */
.games-list-item.finished-item {
  background: #f8f8f8;
  opacity: 0.8;
}
.games-list-item.finished-item:hover {
  background: #f4f2ed;
  opacity: 1;
}

/* ── Drag reorder ── */
.tile.drag-over {
  outline: 2px dashed #534AB7;
  outline-offset: 2px;
}
.cell.drag-over-board {
  outline: 2px dashed #534AB7 !important;
  outline-offset: -2px;
}
.tile[draggable="true"] { cursor: grab; }
.tile[draggable="true"]:active { cursor: grabbing; }


/* Mobile-only elements: hidden on desktop */
.mobile-dock,
.mobile-extra-panel,
.mobile-extra-backdrop { display: none !important; }
/* JS overrides display:none on mobile via applyMobileLayout() */

/* ══════════════════════════════════════════════════════════════
   MOBILE GAME LAYOUT (≤ 600px)
   ══════════════════════════════════════════════════════════════ */
/* ── Game screen: flex column filling full viewport ── */
#screen-game {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}


/* ── Game board area: global styles ── */
#screen-game .main {
  flex: 1;
  overflow: hidden;
  padding: 8px;
  gap: 10px;
  flex-direction: row;   /* desktop: board + sidebar side by side */
  position: relative;
  min-height: 0;
  align-items: flex-start;
}
#screen-game .board-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  touch-action: none;
  min-height: 200px;
  min-width: 0;
  max-width: 580px;  /* board is 15×36px+gaps ≈ 568px */
  align-self: stretch;
}

@media (max-width: 600px) {

  /* ── Top nav: compact single row ── */
  #screen-game .topnav {
    padding: 6px 10px;
    flex-shrink: 0;
  }
  #screen-game .topnav .logo-sm { font-size: 14px; }
  .btn-sm { font-size: 12px; padding: 0 9px; height: 30px; }

  /* ── Topbar: two score cards + status only, rest hidden ── */
  .topbar {
    padding: 4px 8px;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .sc-card { min-width: 64px; padding: 4px 6px; flex-shrink: 0; }
  .sc-card .pn { font-size: 10px; }
  .sc-card .pts { font-size: 15px; }
  .ibox { padding: 4px 6px; }
  .ibox .ilbl { font-size: 9px; }
  .ibox .ival { font-size: 11px; }
  /* Hide less critical iboxes on mobile */
  #gt-box, #chaos-box, #move-ct, #test-badge { display: none !important; }
  /* Collapse bag/opp and mode into tiny pills */
  #bag-ct { font-size: 10px; }

  /* ── Legend: hidden on mobile (accessible via info page) ── */
  .legend { display: none; }

  /* ── Board area: pannable/zoomable viewport (set globally below) ── */
  .board {
    /* Full-size board — pan/zoom applied via JS transform */
    grid-template-columns: repeat(15, 28px);
    gap: 1px;
    transform-origin: top left;
    position: absolute;
    top: 0; left: 0;
    cursor: grab;
  }
  .board:active { cursor: grabbing; }
  .cell { width: 28px; height: 28px; font-size: 9px; }
  .cell.placed, .cell.locked { font-size: 12px; }
  .cell .lp { display: none; }
  .cell.locked .lp,
  .cell.placed .lp { display: block !important; font-size: 7px !important; font-weight: 700 !important; opacity: 0.9 !important; }

  /* ── Letters-left: hidden on mobile by default ── */
  .letters-left-panel { display: none; }

  /* ── Side panel: not shown in main flow on mobile ── */
  .side { display: none; }

  /* ── Bottom dock: always-visible rack + controls ── */
  .mobile-dock {
    display: flex !important;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 8px 10px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mobile-dock-top {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mobile-dock .rack {
    flex: 1;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .mobile-dock .tile {
    width: 36px; height: 36px;
    font-size: 14px;
    flex-shrink: 0;
  }
  .mobile-dock-actions {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .mobile-dock #btn-submit {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
    margin: 0;
  }
  .mobile-dock .btn-sm {
    height: 36px;
    padding: 0 10px;
    flex-shrink: 0;
  }
  /* Word preview on mobile */
  .mobile-wp {
    font-size: 12px;
    color: #555;
    min-height: 18px;
    text-align: center;
  }

  /* ── Mobile menu overlay (log, reactions, unseen) ── */
  .mobile-extra-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    z-index: 50;
    padding: 16px;
    max-height: 65vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .mobile-extra-panel.open {
    transform: translateY(0);
  }
  .mobile-extra-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 49;
    display: none;
  }
  .mobile-extra-backdrop.open { display: block; }

  /* ── Turn banner on mobile ── */
  .turn-banner { font-size: 12px; padding: 6px; flex-shrink: 0; }

  /* ── Admin banner ── */
  #admin-banner { font-size: 11px; padding: 6px 8px; flex-shrink: 0; }

  /* ── Info/Stats screens on mobile: normal scroll ── */
  #screen-info, #screen-stats {
    height: 100dvh;
    overflow-y: auto;
  }
}

/* ── Level badge ── */
.level-badge {
  font-size: 11px; font-weight: 700; color: #534AB7;
  background: #EEEDFE; padding: 3px 8px;
  border-radius: 20px; cursor: default;
  white-space: nowrap;
}

/* ── Classic mode badge in lobby ── */
.mode-badge.classic { background: #E8F4E8; color: #2D6A2D; }

.mode-badge.ranked { background: #1a1a2e; color: #EF9F27; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   CLUB CHAT PANEL
   Fixed right sidebar on desktop. Hidden on mobile (see mobile.css).
   Only shown for is_club_member users — toggled via JS.
   Width: 280px. Game screen gets padding-right when open.
   ══════════════════════════════════════════════════════════════════ */
.chat-panel {
  position: fixed;
  top: 50px; right: 0;
  width: 280px;
  height: calc(100vh - 50px);
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.1);
  display: none;        /* hidden by default — _openChat() sets display:flex */
  flex-direction: column;
  z-index: 60;
  box-shadow: -2px 0 12px rgba(0,0,0,0.07);
}
/* Never show chat on auth/username screens */
#screen-auth.active ~ #chat-panel,
#screen-username.active ~ #chat-panel { display: none !important; }
/* When chat is open: shift only the content BELOW the topnav, not the nav itself */
body.chat-open #screen-lobby .lobby-wrap,
body.chat-open #screen-admin .stats-wrap,
body.chat-open #screen-stats .stats-wrap,
body.chat-open #screen-info  .stats-wrap {
  margin-right: 280px;
}
/* Game screen: don't shift — board already handles its own layout */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 0.5px solid #eee;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  flex-shrink: 0;
}
.chat-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.chat-close-btn:hover { color: #534AB7; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-msg {
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}
/* [icon] Name (Lv N): message — all on one line */
.chat-msg-icon { margin-right: 2px; }
.chat-msg-name { font-weight: 700; color: #534AB7; }
.chat-msg-name.is-me { color: #2e9e5b; }
.chat-msg-level { font-size: 11px; color: #aaa; font-weight: 400; }
.chat-msg-sep   { color: #bbb; }
.chat-msg-text  { color: #1a1a1a; }
.chat-bot-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: #888; color: #fff;
  padding: 1px 4px; border-radius: 4px;
  margin-left: 3px; vertical-align: middle; letter-spacing: 0.3px;
}
.chat-mod-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: #534AB7; color: #fff;
  padding: 1px 4px; border-radius: 4px;
  margin-left: 3px; vertical-align: middle; letter-spacing: 0.3px;
}
.chat-silence-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 0 3px; opacity: 0.4;
  vertical-align: middle; line-height: 1;
}
.chat-silence-btn:hover { opacity: 1; }
.chat-emoji-btn {
  background: none; border: none; cursor: pointer;
  font-size: 17px; padding: 0 4px; flex-shrink: 0;
  line-height: 1; align-self: center;
}
.chat-emoji-btn:hover { opacity: 0.7; }
.chat-emoji-picker {
  position: absolute;
  bottom: 56px; left: 0; right: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 8px;
  display: flex; flex-wrap: wrap; gap: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 10;
}
.chat-emoji-picker button {
  background: none; border: none; cursor: pointer;
  font-size: 20px; padding: 4px; border-radius: 6px;
  line-height: 1;
}
.chat-emoji-picker button:hover { background: #f0effe; }
.chat-input-area {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 0.5px solid #eee;
  flex-shrink: 0;
  align-items: center;
}
.chat-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
.chat-input:focus { border-color: #534AB7; }
.chat-send-btn {
  background: #534AB7;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-send-btn:hover { background: #3C3489; }
.chat-unread-badge {
  display: inline-block;
  background: #A32D2D;
  color: #fff;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 3px;
  vertical-align: middle;
  min-width: 16px;
  text-align: center;
}
.chat-empty {
  color: #aaa;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}

/* Chat toggle button — light purple bg, white bubble icon, same size as btn-sm */
.chat-nav-btn {
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid #3C3489;
  background: #534AB7;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
  flex-shrink: 0;
}
.chat-nav-btn:hover { background: #3C3489; }
/* Unread badge on the nav button */
.chat-nav-btn .chat-unread-badge {
  background: #EF9F27;
}


/* ── Chat channel tabs ─────────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 0;
  flex-shrink: 0;
  border-bottom: 0.5px solid #eee;
}
.chat-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}
.chat-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.chat-tab.active {
  color: #534AB7;
  border-bottom-color: #534AB7;
}
.chat-tab:hover:not(.active) { color: #534AB7; opacity: .7; }
.chat-tab-badge {
  display: inline-block;
  background: #A32D2D;
  color: #fff;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  margin-left: 3px;
  vertical-align: middle;
}

/* Auth screen: make all buttons purple (including Request an invite) */
#screen-auth .btn-secondary {
  background: #534AB7;
  color: #fff;
  border-color: #3C3489;
}
#screen-auth .btn-secondary:hover { background: #3C3489; }

/* Logo block on auth screen: white card */
#screen-auth .logo-block {
  background: #fff;
  border-radius: 16px;
  padding: 24px 32px 20px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  margin-bottom: 16px;
}

/* ── Loading spinner ───────────────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  border: 4px solid #e0ddf5;
  border-top-color: #534AB7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#loading-overlay { display: flex; }
#loading-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#loading-overlay.active {
  display: flex !important;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}


/* ── Lobby color improvements ── */
#screen-lobby .lobby-wrap {
  padding: 16px;
}
.card {
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* Your Games card accent */
#screen-lobby h2 { font-size: 16px; font-weight: 800; }
/* New game card — purple accent already on border-top */
#new-game-card .mode-row-title { font-size: 14px; font-weight: 600; }
#new-game-card .option-row { padding: 8px 0; }

/* ══════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ══════════════════════════════════════════════════════ */
body.dark-mode .modal-box {
  background: var(--surface);
  color: var(--text);
}
body.dark-mode .modal-box h2,
body.dark-mode .modal-box p { color: var(--text); }

body.dark-mode .log-wrap,
body.dark-mode .log { background: var(--surface2); color: var(--text-muted); }

body.dark-mode .card { background: var(--surface); color: var(--text); }
body.dark-mode .card .hint { color: var(--text-muted); }

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}

body.dark-mode .btn-sm {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}
body.dark-mode .btn-sm:hover { background: var(--surface); }

body.dark-mode .topnav .btn-sm {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
body.dark-mode .topnav .btn-sm:hover { background: rgba(255,255,255,0.22); }

body.dark-mode .games-list-item { border-bottom-color: var(--border); }
body.dark-mode .stats-tab { background: var(--surface2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .stats-tab.active { background: var(--purple); color: #fff; }

body.dark-mode .sc-card { background: var(--surface2); color: var(--text); }
body.dark-mode .rack { background: var(--surface2) !important; }

body.dark-mode .mobile-extra-panel,
body.dark-mode .mobile-dock { background: var(--surface) !important; }

body.dark-mode .chat-panel {
  background: var(--surface);
  border-color: var(--border);
}
body.dark-mode .chat-msg { color: var(--text); }
body.dark-mode .chat-input { background: var(--input-bg); color: var(--text); border-color: var(--input-border); }

body.dark-mode footer { border-top-color: var(--border); color: var(--text-faint); }
body.dark-mode footer a { color: var(--text-faint); }

/* Loading overlay on dark mode */
body.dark-mode #loading-overlay:not(.hidden) { background: var(--bg); }

/* Board bg reused on loading overlay */
.auth-board-bg {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22570%22%20height%3D%22570%22%3E%3Crect%20width%3D%22570%22%20height%3D%22570%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%220%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%2238%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%2276%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22114%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22152%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22190%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22228%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23d4a040%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22266%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22304%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22342%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22380%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22418%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22456%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%237baad4%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23e4a8b8%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22494%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22228%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22266%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Crect%20x%3D%22304%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22342%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22418%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23b8d4ee%22%2F%3E%3Crect%20x%3D%22456%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22494%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23f0ece0%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22532%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%23c47070%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22570%22%20y2%3D%220%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%2238%22%20y1%3D%220%22%20x2%3D%2238%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2238%22%20x2%3D%22570%22%20y2%3D%2238%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%2276%22%20y1%3D%220%22%20x2%3D%2276%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2276%22%20x2%3D%22570%22%20y2%3D%2276%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22114%22%20y1%3D%220%22%20x2%3D%22114%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22114%22%20x2%3D%22570%22%20y2%3D%22114%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22152%22%20y1%3D%220%22%20x2%3D%22152%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22152%22%20x2%3D%22570%22%20y2%3D%22152%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22190%22%20y1%3D%220%22%20x2%3D%22190%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22190%22%20x2%3D%22570%22%20y2%3D%22190%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22228%22%20y1%3D%220%22%20x2%3D%22228%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22228%22%20x2%3D%22570%22%20y2%3D%22228%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22266%22%20y1%3D%220%22%20x2%3D%22266%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22266%22%20x2%3D%22570%22%20y2%3D%22266%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22304%22%20y1%3D%220%22%20x2%3D%22304%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22304%22%20x2%3D%22570%22%20y2%3D%22304%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22342%22%20y1%3D%220%22%20x2%3D%22342%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22342%22%20x2%3D%22570%22%20y2%3D%22342%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22380%22%20y1%3D%220%22%20x2%3D%22380%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22380%22%20x2%3D%22570%22%20y2%3D%22380%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22418%22%20y1%3D%220%22%20x2%3D%22418%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22418%22%20x2%3D%22570%22%20y2%3D%22418%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22456%22%20y1%3D%220%22%20x2%3D%22456%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22456%22%20x2%3D%22570%22%20y2%3D%22456%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22494%22%20y1%3D%220%22%20x2%3D%22494%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22494%22%20x2%3D%22570%22%20y2%3D%22494%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22532%22%20y1%3D%220%22%20x2%3D%22532%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22532%22%20x2%3D%22570%22%20y2%3D%22532%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%22570%22%20y1%3D%220%22%20x2%3D%22570%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22570%22%20x2%3D%22570%22%20y2%3D%22570%22%20stroke%3D%22rgba%28100%2C80%2C40%2C0.2%29%22%20stroke-width%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
  background-size: 380px 380px;  /* smaller tile = scales to all screens */
  background-position: 0 0;
  background-repeat: repeat;
  background-color: #f0ece0;
}
body.dark-mode .auth-board-bg {
  background-color: #1a1726;
  filter: hue-rotate(200deg) saturate(0.4) brightness(0.4);
}
body.dark-mode #loading-overlay > div {
  background: rgba(26,23,38,0.92) !important;
  color: var(--text);
}
body.dark-mode #loading-overlay .spinner {
  border-color: rgba(255,255,255,0.1);
  border-top-color: var(--purple);
}

/* Settings dropdown */
#lobby-settings-dropdown,
#game-settings-dropdown {
  transition: none;
}
body.dark-mode #lobby-settings-dropdown,
body.dark-mode #game-settings-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode #lobby-settings-dropdown .btn-sm,
body.dark-mode #game-settings-dropdown .btn-sm {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}
body.dark-mode #lobby-settings-dropdown .btn-sm:hover,
body.dark-mode #game-settings-dropdown .btn-sm:hover {
  background: var(--surface2);
}
body.dark-mode #lobby-settings-dropdown div[style*="border-top"],
body.dark-mode #game-settings-dropdown div[style*="border-top"] {
  border-top-color: var(--border) !important;
}

/* Settings cog button — visible on purple topnav */
#lobby-settings-btn,
#game-settings-btn {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
  font-size: 16px !important;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.3)); /* visible on any bg */
}
#lobby-settings-btn:hover,
#game-settings-btn:hover {
  background: rgba(255,255,255,0.32) !important;
}

/* Dropdown: always light bg regardless of topnav color */
#lobby-settings-dropdown,
#game-settings-dropdown {
  color: #1a1a1a !important;
  z-index: 9999 !important;
}
#lobby-settings-dropdown .btn-sm,
#game-settings-dropdown .btn-sm {
  color: #1a1a1a !important;
  background: transparent !important;
  border-color: transparent !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
#lobby-settings-dropdown .btn-sm:hover,
#game-settings-dropdown .btn-sm:hover {
  background: #f4f2ed !important;
}

/* ══════════════════════════════════════════════════════
   DARK MODE — COMPREHENSIVE SWEEP v2
   ══════════════════════════════════════════════════════ */

/* ── Body / screens ── */
body.dark-mode { background: var(--bg); color: var(--text); }
body.dark-mode .screen { background: var(--bg); }

/* ── Main game area (white board bg) ── */
body.dark-mode .main { background: var(--bg); }
body.dark-mode #screen-game { background: var(--bg); }
body.dark-mode .board-wrap { background: var(--bg) !important; }

/* ── Topnav stays purple in dark mode ── */
body.dark-mode .topnav { background: var(--nav-bg); }
body.dark-mode .mobile-extra-panel { background: var(--surface) !important; color: var(--text) !important; }
body.dark-mode .mobile-extra-panel strong,
body.dark-mode .mobile-extra-panel .rack-lbl { color: var(--text) !important; }

/* ── Cards, surfaces ── */
body.dark-mode .card { background: var(--surface); border-color: var(--border); color: var(--text); }
body.dark-mode .card h2 { color: var(--text); }
body.dark-mode .card .hint { color: var(--text-muted); }
body.dark-mode .scard { background: var(--surface2) !important; }
body.dark-mode .ibox { background: var(--surface2) !important; color: var(--text) !important; }
body.dark-mode .stat-c { background: var(--surface2) !important; color: var(--text) !important; }
body.dark-mode .lobby-wrap { background: var(--bg); }

/* ── Collapsible card headers ── */
body.dark-mode .mobile-collapsible-card > div:first-child {
  filter: brightness(0.8) saturate(0.9);
}

/* ── Buttons ── */
body.dark-mode .btn-sm {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .btn-sm:hover {
  background: var(--surface) !important;
}
body.dark-mode .btn-secondary {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .btn-secondary:hover {
  background: var(--surface) !important;
}
/* Keep primary buttons purple */
body.dark-mode .btn-primary { background: var(--purple); color: #fff; }
body.dark-mode .btn-primary:hover { background: var(--purple-dark); }
body.dark-mode .btn-primary:disabled { background: #555; color: #999; }

/* Topnav buttons stay white-on-purple */
body.dark-mode .topnav .btn-sm {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
body.dark-mode .topnav .btn-sm:hover {
  background: rgba(255,255,255,0.25) !important;
}

/* ── Inputs, selects, textareas ── */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: var(--text-faint) !important; }

/* ── Modal ── */
body.dark-mode .modal-box {
  background: var(--surface) !important;
  color: var(--text) !important;
}
body.dark-mode .modal-box h2,
body.dark-mode .modal-box h3,
body.dark-mode .modal-box p,
body.dark-mode .modal-box label,
body.dark-mode .modal-box div { color: var(--text); }
/* Exceptions: colored text stays colored */
body.dark-mode .modal-box a { color: #8b84e0; }
body.dark-mode .modal-box .le.good { color: #6ec97a; }
body.dark-mode .modal-box .le.bad  { color: #e07070; }
body.dark-mode .modal-box .le.sys  { color: var(--text-faint); }
body.dark-mode .modal-box .le.sys-action { background: rgba(83,74,183,0.3); color: #b0a8f0; }

/* ── Info tabs ── */
body.dark-mode .stats-tab {
  background: var(--surface2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
body.dark-mode .stats-tab.active {
  background: var(--purple) !important;
  color: #fff !important;
}
body.dark-mode .info-tab-content,
body.dark-mode .info-tab-content p,
body.dark-mode .info-tab-content li,
body.dark-mode .info-tab-content h2,
body.dark-mode .info-tab-content h3 {
  color: var(--text) !important;
}
body.dark-mode .info-tab-content .card { background: var(--surface) !important; }
body.dark-mode .info-tab-content table { color: var(--text) !important; }
body.dark-mode .info-tab-content th,
body.dark-mode .info-tab-content td {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── Stats, game list, log ── */
body.dark-mode .games-list-item {
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .games-list-item:hover { background: var(--surface2) !important; }
body.dark-mode .log,
body.dark-mode .log-wrap { background: var(--surface2) !important; color: var(--text-muted) !important; }
body.dark-mode .le { color: var(--text) !important; border-bottom-color: var(--border) !important; }
body.dark-mode .le.sys { color: var(--text-faint) !important; }

/* ── Rack ── */
body.dark-mode .rack { background: var(--surface2) !important; }
body.dark-mode .rack-slot { background: var(--surface) !important; border-color: var(--border) !important; }
body.dark-mode .tile { background: var(--tile-bg) !important; border-color: var(--tile-border) !important; color: var(--tile-text) !important; }

/* ── Score cards ── */
body.dark-mode .sc-card { background: var(--surface2) !important; color: var(--text) !important; }
body.dark-mode .pn { color: var(--text-muted) !important; }

/* ── Toggle switches ── */
body.dark-mode .toggle { background: #4a4468 !important; }
body.dark-mode .toggle.on { background: var(--purple) !important; }

/* ── Chat ── */
body.dark-mode .chat-panel { background: var(--surface) !important; border-color: var(--border) !important; }
body.dark-mode .chat-msg-wrap { color: var(--text) !important; }
body.dark-mode .chat-input { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--input-border) !important; }
body.dark-mode .chat-tabs { background: var(--surface2) !important; border-color: var(--border) !important; }
body.dark-mode .chat-tab { color: var(--text-muted) !important; }
body.dark-mode .chat-tab.active { color: var(--text) !important; border-bottom-color: var(--purple) !important; }

/* ── Settings dropdowns ── */
body.dark-mode #lobby-settings-dropdown,
body.dark-mode #game-settings-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode #lobby-settings-dropdown .btn-sm,
body.dark-mode #game-settings-dropdown .btn-sm {
  background: transparent !important;
  color: var(--text) !important;
  border-color: transparent !important;
}
body.dark-mode #lobby-settings-dropdown .btn-sm:hover,
body.dark-mode #game-settings-dropdown .btn-sm:hover {
  background: var(--surface2) !important;
}

/* ── Misc ── */
body.dark-mode .le.gold { color: #c9a040 !important; }
body.dark-mode .username-badge { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
body.dark-mode .option-row { border-top-color: var(--border) !important; color: var(--text) !important; }
body.dark-mode .option-row label { color: var(--text-muted) !important; }
body.dark-mode .hint { color: var(--text-muted) !important; }
body.dark-mode footer { border-top-color: var(--border) !important; color: var(--text-muted) !important; }
body.dark-mode footer a { color: var(--text-muted) !important; }
body.dark-mode .games-list-item .game-opp { color: var(--text-muted) !important; }
body.dark-mode [style*="color:#888"] { color: var(--text-muted) !important; }
body.dark-mode [style*="color:#666"] { color: var(--text-muted) !important; }
body.dark-mode [style*="color:#1a1a1a"] { color: var(--text) !important; }
body.dark-mode [style*="color:#aaa"] { color: var(--text-faint) !important; }
body.dark-mode [style*="background:#fff"] { background: var(--surface) !important; }
body.dark-mode [style*="background:#f4f2ed"] { background: var(--surface2) !important; }
body.dark-mode [style*="background:#f8f7f4"] { background: var(--surface2) !important; }
body.dark-mode [style*="background:#f0effe"] { background: rgba(83,74,183,0.25) !important; }

/* ── Dark mode contrast tweaks ── */
body.dark-mode .btn-info { color: #a89eef !important; border-color: #6b65b8 !important; }
body.dark-mode a { color: #a89eef !important; }
body.dark-mode .info-icon-link { color: #a89eef !important; }

/* Community/Your Games collapsible headers - increase contrast on dark */
body.dark-mode .mobile-collapsible-card > div:first-child {
  filter: none !important;
  opacity: 1 !important;
}
/* ── All purple lobby section headers — consistent dark mode style ── */
body.dark-mode #new-game-card > div:first-child,
body.dark-mode #mini-games-card > div:first-child,
body.dark-mode #your-games-card > div:first-child {
  background: rgba(60,52,137,0.55) !important;
}
body.dark-mode #new-game-card > div:first-child span,
body.dark-mode #mini-games-card > div:first-child span,
body.dark-mode #your-games-card > div:first-child span { color: #fff !important; }
/* Orange/yellow headers */
body.dark-mode #community-card > div:first-child {
  background: rgba(180,100,0,0.4) !important;
}
body.dark-mode #community-card > div:first-child span { color: #ffd580 !important; }

/* Info modal bullet text */
body.dark-mode .info-body p,
body.dark-mode .info-body li,
body.dark-mode .info-body ul,
body.dark-mode .info-body ol,
body.dark-mode #screen-info p,
body.dark-mode #screen-info li { color: var(--text) !important; }

/* Dictionary definition text */
body.dark-mode #dict-result,
body.dark-mode .dict-def,
body.dark-mode [id*="dict"] { color: var(--text-muted) !important; }
body.dark-mode #dict-result strong { color: var(--text) !important; }

/* ── Game mobile hamburger menu - dark mode ── */
body.dark-mode #game-menu-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode #game-menu-dropdown .btn-sm {
  background: transparent !important;
  color: var(--text) !important;
  border-color: transparent !important;
}
body.dark-mode #game-menu-dropdown .btn-sm:hover {
  background: var(--surface2) !important;
}
body.dark-mode #game-menu-dropdown [style*="color:#888"] {
  color: var(--text-faint) !important;
}

/* ── Golden tile info tab - text contrast ── */
#info-golden .info-body p,
#info-golden .info-body li { color: #444; }

/* ── FAQ dark mode ── */
body.dark-mode .faq-q,
body.dark-mode .faq-a,
body.dark-mode details,
body.dark-mode summary { color: var(--text) !important; }
body.dark-mode details[open] > *:not(summary) { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════════════
   DARK MODE — GAME BOARD FIXES
   ══════════════════════════════════════════════════════ */

/* ── Topbar (player info blocks) ── */
body.dark-mode .topbar {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
body.dark-mode .sc-card {
  background: var(--surface2) !important;
  border-color: transparent !important;
}
body.dark-mode .sc-card.active { border-color: var(--gold) !important; }
body.dark-mode .sc-card .pn { color: var(--text-muted) !important; }
body.dark-mode .sc-card .pts { color: var(--text) !important; }

/* ── Game log — more contrast ── */
body.dark-mode .log-wrap { background: var(--surface2) !important; }
body.dark-mode .log { background: var(--surface2) !important; }
body.dark-mode .le { color: #d0cce8 !important; }
body.dark-mode .le.good { color: #7ed99a !important; }
body.dark-mode .le.bad  { color: #ff7878 !important; }
body.dark-mode .le.sys  { color: #8a8090 !important; }
body.dark-mode .le.gold { color: #f0b830 !important; }
body.dark-mode .le.sys-action { background: rgba(83,74,183,0.35) !important; color: #b8b0f5 !important; }
body.dark-mode .le.lurker { background: rgba(163,45,45,0.2) !important; color: #e07070 !important; }

/* ── Lurker messages — stand out in red ── */
body.dark-mode .le.bad {
  background: rgba(180,30,30,0.15) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  color: #ff8080 !important;
}

/* ── Tile letters in dark mode — brighter ── */
body.dark-mode .tile {
  background: #302b50 !important;
  border-color: #6b65b8 !important;
  color: #e8e4ff !important;
}
body.dark-mode .tile.sel {
  background: var(--gold) !important;
  color: #fff !important;
  border-color: #c97f00 !important;
}
body.dark-mode .tile.reorder-sel {
  background: #534AB7 !important;
  color: #fff !important;
}
body.dark-mode .tile.blank { background: #3a3550 !important; color: #a09bc0 !important; }

/* ── Shuffle button in dark mode ── */
body.dark-mode .btn-shuffle {
  background: #534AB7 !important;
  border-color: #7B74D4 !important;
  color: #fff !important;
}
body.dark-mode .btn-shuffle:hover { background: #6b63cf !important; }

/* ── SUBMIT button in dark mode when it's my turn ── */
body.dark-mode #btn-submit:not(:disabled):not(.invalid-word),
body.dark-mode #btn-submit-mobile:not(:disabled):not(.invalid-word) {
  background: #2aad63 !important;
  box-shadow: 0 0 0 2px rgba(42,173,99,0.3) !important;
}

/* ── Placed tiles on board (MARINADE color) — brighter ── */
body.dark-mode .cell.placed {
  background: #5a50c8 !important;
  color: var(--gold) !important;   /* gold - matches theme */
  border-color: #9990f0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ── ibox, scard in dark mode ── */
body.dark-mode .ibox { background: var(--surface2) !important; color: var(--text) !important; }
body.dark-mode .scard { background: var(--surface2) !important; }
body.dark-mode .msg { color: var(--text-muted) !important; background: var(--surface2) !important; border: 1px solid var(--border); }

/* light mode .cell.placed unchanged — see original rule line ~456 */

/* ── Submit button disabled text in dark mode ── */
body.dark-mode #btn-submit:disabled,
body.dark-mode #btn-submit-mobile:disabled {
  background: #444 !important;
  color: #888 !important;
}
body.dark-mode #btn-submit.invalid-word,
body.dark-mode #btn-submit-mobile.invalid-word {
  background: #8a6d00 !important;
  color: #ffe066 !important;
}

/* 3. Cell letter font size bigger on mobile */

/* Score preview total — visible in dark mode */
body.dark-mode #wp b[style*="color:#1a1a1a"],
body.dark-mode #wp-mobile b[style*="color:#1a1a1a"] {
  color: var(--text) !important;
}

/* ── Dark mode: red/invalid text more visible ── */
body.dark-mode #wp b[style*="color:#A32D2D"],
body.dark-mode #wp-mobile b[style*="color:#A32D2D"],
body.dark-mode .error-msg { color: #ff8080 !important; background: rgba(180,30,30,0.2) !important; }
body.dark-mode [style*="color:#A32D2D"] { color: #ff8080 !important; }
body.dark-mode .le.bad { color: #ff8080 !important; background: rgba(160,30,30,0.18) !important; border-radius: 4px; padding: 1px 5px; }
body.dark-mode #btn-submit.invalid-word,
body.dark-mode #btn-submit-mobile.invalid-word { background: #7a5c00 !important; color: #ffe066 !important; }

/* ══════════════════════════════════════════════════════════════════
   HIGH CONTRAST SWEEP — DARK MODE
   All muted/subdued text forced to readable levels on dark surfaces
   ══════════════════════════════════════════════════════════════════ */

/* ── Player names + scores (topbar sc-card) ── */
body.dark-mode .sc-card .pn  { color: #c8c0f8 !important; }
body.dark-mode .sc-card .pts { color: #ffffff  !important; }
body.dark-mode .sc-card .tb  { color: #f0b830  !important; }

/* ── Game nav scores (mobile topnav) ── */
body.dark-mode #game-nav-score-you { color: #c8c0f8 !important; }
body.dark-mode #game-nav-score-opp { color: #9090b8 !important; }

/* ── Rack label, log label, ibox label ── */
body.dark-mode .rack-lbl  { color: #a89ec4 !important; }
body.dark-mode .log-lbl   { color: #a89ec4 !important; }
body.dark-mode .ibox .ilbl { color: #a89ec4 !important; }

/* ── Game list meta text ── */
body.dark-mode .gli-left .meta   { color: #a89ec4 !important; }
body.dark-mode .mode-row-sub     { color: #a89ec4 !important; }

/* ── Letters-left / stat labels ── */
body.dark-mode .stat-c .sl { color: #a89ec4 !important; }
body.dark-mode .stat-c      { color: var(--text) !important; }
body.dark-mode .ibox        { color: var(--text) !important; }

/* ── Info/hint text ── */
body.dark-mode .info-note { color: #a89ec4 !important; }
body.dark-mode .hint      { color: #a89ec4 !important; }

/* ── Reaction buttons ── */
body.dark-mode .ebtn-more { color: #a89ec4 !important; }

/* ── Card subtext, hints ── */
body.dark-mode .card label { color: #a89ec4 !important; }
body.dark-mode .card p     { color: var(--text) !important; }

/* ── General: any inline #888/#666/#aaa text inside dark containers ── */
body.dark-mode [style*="color:#888"] { color: #a89ec4 !important; }
body.dark-mode [style*="color:#666"] { color: #c0b8e0 !important; }
body.dark-mode [style*="color:#aaa"] { color: #8880a8 !important; }
body.dark-mode [style*="color:#555"] { color: #b8b0d8 !important; }
body.dark-mode [style*="color:#999"] { color: #a89ec4 !important; }

/* ── Topnav buttons: always white text on purple ── */
body.dark-mode .topnav .btn-sm,
body.dark-mode .topnav button { color: #ffffff !important; }
body.dark-mode .topnav .username-badge { color: #ffffff !important; }
body.dark-mode .topnav .nav-xp-meta   { color: rgba(255,255,255,0.85) !important; }

/* ── Mode badges ── */
body.dark-mode .mode-badge.normal { background: #3a3560 !important; color: #c8c0f8 !important; }

/* ── Mobile wp/preview text ── */
body.dark-mode .mobile-wp,
body.dark-mode #wp-mobile { color: var(--text-muted) !important; }

/* ── Recent log line ── */
body.dark-mode #recent-log-line { color: #a89ec4 !important; background: #1e1b2e !important; }

/* ── Toggles / switches label text ── */
body.dark-mode .option-row     { color: var(--text) !important; }
body.dark-mode .option-row span { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════════════════════════
   ADMIN PANEL — DARK MODE HIGH CONTRAST
   ══════════════════════════════════════════════════════════════════ */

/* ── Screen background ── */
body.dark-mode #screen-admin { background: var(--bg) !important; color: var(--text) !important; }
body.dark-mode #screen-admin .stats-wrap { color: var(--text) !important; }
body.dark-mode #screen-admin h2 { color: var(--text) !important; }

/* ── Tabs ── */
body.dark-mode #screen-admin .stats-tab {
  background: var(--surface2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
body.dark-mode #screen-admin .stats-tab:hover {
  background: var(--surface) !important;
  color: var(--text) !important;
}
body.dark-mode #screen-admin .stats-tab.active {
  background: var(--purple) !important;
  color: #fff !important;
  border-color: var(--purple) !important;
}

/* ── Search inputs ── */
body.dark-mode #screen-admin input[type="text"],
body.dark-mode #screen-admin input[type="search"],
body.dark-mode #screen-admin textarea,
body.dark-mode #screen-admin select {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
body.dark-mode #screen-admin input::placeholder,
body.dark-mode #screen-admin textarea::placeholder { color: var(--text-faint) !important; }

/* ── Player/item rows ── */
body.dark-mode #screen-admin [style*="border-bottom"] {
  border-bottom-color: var(--border) !important;
}
body.dark-mode #screen-admin [style*="background:#fff"],
body.dark-mode #screen-admin [style*="background: #fff"] {
  background: var(--surface) !important;
  color: var(--text) !important;
}
body.dark-mode #screen-admin [style*="background:#f4f2ed"],
body.dark-mode #screen-admin [style*="background:#f8f7f4"] {
  background: var(--surface2) !important;
}

/* ── Text colors ── */
body.dark-mode #screen-admin [style*="color:#aaa"],
body.dark-mode #screen-admin [style*="color: #aaa"] { color: var(--text-faint) !important; }
body.dark-mode #screen-admin [style*="color:#888"],
body.dark-mode #screen-admin [style*="color: #888"] { color: var(--text-muted) !important; }
body.dark-mode #screen-admin [style*="color:#555"],
body.dark-mode #screen-admin [style*="color: #555"],
body.dark-mode #screen-admin [style*="color:#333"],
body.dark-mode #screen-admin [style*="color: #333"] { color: var(--text) !important; }
body.dark-mode #screen-admin [style*="color:#1a1a1a"] { color: var(--text) !important; }

/* ── Action buttons ── */
body.dark-mode #screen-admin button:not(.stats-tab):not(.btn-primary):not(.btn-danger) {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body.dark-mode #screen-admin button:not(.stats-tab):not(.btn-primary):not(.btn-danger):hover {
  background: var(--surface) !important;
}

/* ── Destructive buttons keep red but lighter ── */
body.dark-mode #screen-admin [style*="background:#fff0f0"],
body.dark-mode #screen-admin [style*="color:#A32D2D"] {
  background: rgba(180,40,40,0.2) !important;
  color: #ff8080 !important;
  border-color: rgba(180,40,40,0.4) !important;
}

/* ── Active/toggle buttons (e.g. club, mod, beta) ── */
body.dark-mode #screen-admin [style*="background:#534AB7"] { background: #6b63cf !important; }
body.dark-mode #screen-admin [style*="background:#2e9e5b"] { background: #38b86c !important; }
body.dark-mode #screen-admin [style*="background:#EF9F27"] { background: #e0a030 !important; }

/* ── Messages tab rows ── */
body.dark-mode .admin-msg-row {
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .admin-msg-row:hover { background: var(--surface2) !important; }
body.dark-mode .admin-msg-row.unread { background: rgba(83,74,183,0.12) !important; }

/* ── Nav xp-meta on admin screen ── */
body.dark-mode #admin-xp-coins { color: rgba(255,255,255,0.8) !important; }

/* ── Loading text ── */
body.dark-mode #screen-admin .loading { color: var(--text-faint) !important; }

/* ── Expanded player row ── */
body.dark-mode #screen-admin [id^="admin-player-row-"] {
  background: var(--surface2) !important;
}
body.dark-mode #screen-admin [id^="admin-player-row-"] button {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Profile modal stat cards — dark mode */
body.dark-mode [style*="background:#EEEDFE"] { background: rgba(83,74,183,0.25) !important; }
body.dark-mode [style*="background:#fff8ec"] { background: rgba(239,159,39,0.2) !important; }
body.dark-mode [style*="background:#f0effe"] { background: rgba(83,74,183,0.2) !important; }
body.dark-mode [style*="color:#7B74D4"]      { color: #a89eef !important; }
body.dark-mode [style*="color:#c97f00"]      { color: #f0b830 !important; }
body.dark-mode [style*="color:#EF9F27"]      { color: #f0c050 !important; }

/* ══════════════════════════════════════════════════════════════════
   ADMIN TABS — REQUESTS / EVENTS / SEASONS CONTRAST
   ══════════════════════════════════════════════════════════════════ */

/* Requests rows */
body.dark-mode #admin-requests-list [style*="border-bottom"],
body.dark-mode #admin-events-list   [style*="border-bottom"],
body.dark-mode #admin-seasons-list  [style*="border-bottom"] {
  border-bottom-color: var(--border) !important;
}

/* Event cards */
body.dark-mode #admin-events-list [style*="background:#fff"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode #admin-events-list [style*="border:1px solid #2e9e5b"] {
  border-color: #38b86c !important;
  background: rgba(46,158,91,0.08) !important;
}

/* Season cards */
body.dark-mode #admin-seasons-list [style*="background:#fff"],
body.dark-mode #admin-seasons-list [style*="background:#f4f2ed"],
body.dark-mode #admin-seasons-list [style*="background:#f8f7f4"] {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* All three — text */
body.dark-mode #admin-requests-list,
body.dark-mode #admin-events-list,
body.dark-mode #admin-seasons-list { color: var(--text) !important; }

body.dark-mode #admin-requests-list [style*="color:#aaa"],
body.dark-mode #admin-events-list   [style*="color:#aaa"],
body.dark-mode #admin-seasons-list  [style*="color:#aaa"],
body.dark-mode #admin-requests-list [style*="color:#888"],
body.dark-mode #admin-events-list   [style*="color:#888"],
body.dark-mode #admin-seasons-list  [style*="color:#888"] { color: var(--text-muted) !important; }

body.dark-mode #admin-requests-list [style*="color:#1a1a1a"],
body.dark-mode #admin-events-list   [style*="color:#1a1a1a"],
body.dark-mode #admin-seasons-list  [style*="color:#1a1a1a"] { color: var(--text) !important; }

/* Active/inactive badges in events */
body.dark-mode [style*="background:#f0f0f0"][style*="color:#888"] {
  background: var(--surface2) !important;
  color: var(--text-muted) !important;
}

/* Empty state */
body.dark-mode #admin-events-list [style*="color:#1a1a1a"][style*="font-weight:600"],
body.dark-mode #admin-seasons-list [style*="color:#1a1a1a"][style*="font-weight:600"] {
  color: var(--text) !important;
}

/* ── Menu backdrop — dims app behind dropdown ── */
#menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 195;
}
#menu-backdrop.active { display: block; }
body.dark-mode #menu-backdrop { background: rgba(0,0,0,0.55); }

/* Dropdowns sit above backdrop */
#lobby-menu-dropdown,
#game-menu-dropdown,
#lobby-settings-dropdown,
#game-settings-dropdown { z-index: 9999 !important; }

/* ── Mini Games title — dark mode visibility ── */
body.dark-mode #mini-games-card-mobile > div:first-child {
  background: rgba(83,74,183,0.35) !important;
}
body.dark-mode #mini-games-card-mobile > div:first-child span { color: #c8c0f8 !important; }

/* Mini Games mobile */
#mini-games-card-mobile > div:first-child { background: #EEEDFE; }

/* Dark mode card headers — overridden by unified rules above, keeping for achievements */
body.dark-mode #achievements-card > div:first-child { background: rgba(60,52,137,0.55) !important; }
body.dark-mode #achievements-card > div:first-child span:first-child { color: #fff !important; }

/* ══════════════════════════════════════════════════════════════════
   MINI GAMES BUTTONS — DARK MODE: white text, colorful emojis
   ══════════════════════════════════════════════════════════════════ */

/* Lobby desktop mini-games scores panel */
body.dark-mode #mini-games-card { background: var(--surface) !important; }
body.dark-mode #mini-games-card span { color: var(--text) !important; }

/* Mobile mini games grid buttons — keep emoji colorful, text white */
body.dark-mode #mini-games-card-mobile button,
body.dark-mode #mini-games-body button {
  color: #fff !important;
  filter: none !important;           /* never filter emojis to white */
}
/* Emoji spans inside buttons — block filter inheritance */
body.dark-mode #mini-games-card-mobile button span,
body.dark-mode #mini-games-body button span {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Lobby nav mini-game buttons (topnav bar) */
body.dark-mode .nav-games .btn-sm {
  filter: none !important;
}

/* WordBlitz, WordStorm, WordDrift, Dictionary lobby buttons */
body.dark-mode button[onclick="openWordBlitz()"],
body.dark-mode button[onclick="openBrainStorm()"],
body.dark-mode button[onclick="openWordDrift()"],
body.dark-mode button[onclick="openDictionaryLookup()"] {
  color: #fff !important;
  filter: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   MINI GAMES — DARK MODE (all locations)
   ══════════════════════════════════════════════════════════════════ */

/* Mini game buttons: ALWAYS keep their brand colors, even in dark mode */
button[onclick*="openWordBlitz"]:not(.nav-info-btn) { background: #3C3489 !important; color: #fff !important; border-color: #2a2368 !important; }
button[onclick*="openBrainStorm"]:not(.nav-info-btn) { background: #1d7a45 !important; color: #fff !important; border-color: #155e34 !important; }
button[onclick*="openWordDrift"]:not(.nav-info-btn)  { background: #c97f00 !important; color: #fff !important; border-color: #a06200 !important; }
/* Labels inside */
button[onclick*="openWordBlitz"] div, button[onclick*="openWordBlitz"] span { color: #fff !important; }
button[onclick*="openBrainStorm"] div, button[onclick*="openBrainStorm"] span { color: #fff !important; }
button[onclick*="openWordDrift"] div, button[onclick*="openWordDrift"] span { color: #fff !important; }
/* Topnav mini-game buttons - transparent bg on topnav */
.nav-games button[onclick*="openWordBlitz"] { background: #3C3489 !important; }
.nav-games button[onclick*="openBrainStorm"] { background: #1d7a45 !important; }
.nav-games button[onclick*="openWordDrift"]  { background: #c97f00 !important; }

/* Mobile grid buttons already have dark solid bg — just ensure white text + no emoji filter */
body.dark-mode #mini-games-body button {
  color: #fff !important;
  filter: none !important;
}
body.dark-mode #mini-games-body button span,
body.dark-mode #mini-games-body button div {
  color: #fff !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Topnav game shortcut buttons */
body.dark-mode .nav-games .btn-sm {
  filter: none !important;
  color: #fff !important;
}

/* Mini games card header (mobile) */
body.dark-mode #mini-games-card-mobile > div:first-child {
  background: rgba(83,74,183,0.3) !important;
}
body.dark-mode #mini-games-card-mobile > div:first-child span { color: #c8c0f8 !important; }

/* Achievements card — desktop collapsible header */
body.dark-mode #achievements-card > div:first-child {
  background: rgba(239,159,39,0.2) !important;
}
body.dark-mode #achievements-card > div:first-child span:first-child {
  color: #f5c060 !important;
}

/* ── Mobile more panel ── */
#mobile-more-panel { display: none; }
#mobile-more-panel.open {
  display: block;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1.5px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 32px;
  z-index: 1050;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
#mobile-more-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1049;
}

/* ── Mini game nav buttons — proper colors (not all purple) ── */
button[onclick*="openWordBlitz"]    { background: #3C3489 !important; color: #fff !important; border-color: #2a2368 !important; }
button[onclick*="openBrainStorm"]   { background: #1d7a45 !important; color: #fff !important; border-color: #155e34 !important; }
button[onclick*="openWordDrift"]    { background: #c97f00 !important; color: #fff !important; border-color: #a06200 !important; }
button[onclick*="openDictionaryLookup"] { background: #252060 !important; color: #fff !important; border-color: #1a1845 !important; }

/* Topnav small versions — keep compact size but correct colors */
.nav-games button[onclick*="openWordBlitz"]        { background: #3C3489 !important; border-color: #2a2368 !important; }
.nav-games button[onclick*="openBrainStorm"]       { background: #1d7a45 !important; border-color: #155e34 !important; }
.nav-games button[onclick*="openWordDrift"]        { background: #c97f00 !important; border-color: #a06200 !important; }
.nav-games button[onclick*="openDictionaryLookup"] { background: #252060 !important; border-color: #1a1845 !important; }

/* ── New mobile slide-up panels ── */
#mobile-chaos-panel,
#mobile-more-panel,
#mobile-save-panel,
#mobile-info-panel {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1.5px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 32px;
  z-index: 1050;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
  max-height: 80vh;
  overflow-y: auto;
}
#mobile-chaos-panel.open,
#mobile-more-panel.open,
#mobile-save-panel.open,
#mobile-info-panel.open { display: block; }

/* Chaos abilities in panel — vertical list */
#mobile-chaos-panel #chaos-abilities-dock {
  display: block !important;
}
#mobile-chaos-panel #chaos-abilities-dock > div {
  flex-direction: column !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
}
#mobile-chaos-panel #chaos-abilities-dock button {
  font-size: 17px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
}

/* Chaos pips button in bottom bar */
.mbb-chaos { position: relative; }
.mbb-chaos #mbb-chaos-pips {
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  display: block;
  height: 1em;
}

/* Bottom bar — game only, mobile only */



/* Chat close button inline with Send */
.chat-close-inline-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 6px;
}
.chat-close-inline-btn:hover { background: var(--surface2); }

/* ── Lobby logo — bigger on all screens ── */
.lobby-logo { font-size: 21px !important; font-weight: 800 !important; letter-spacing: -0.5px; }
@media (max-width: 768px) {
  .lobby-logo { font-size: 20px !important; }
}

/* ── Desktop mini games card — bigger header + icon sizes ── */
#mini-games-card .card-header-text { font-size: 15px !important; font-weight: 800 !important; }
#mini-games-card > div:first-child span:first-child { font-size: 15px !important; font-weight: 800 !important; }

/* Topnav 🔍 dictionary icon — match other nav btn style */
.topnav button[onclick*="openDictionaryLookup"] {
  background: transparent !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}

/* ── Desktop nav mini game buttons — keep colors in dark mode ── */
body.dark-mode .nav-games button[onclick*="openWordBlitz"]        { background: #3C3489 !important; border-color: #2a2368 !important; color: #fff !important; filter: none !important; }
body.dark-mode .nav-games button[onclick*="openBrainStorm"]       { background: #1d7a45 !important; border-color: #155e34 !important; color: #fff !important; filter: none !important; }
body.dark-mode .nav-games button[onclick*="openWordDrift"]        { background: #c97f00 !important; border-color: #a06200 !important; color: #fff !important; filter: none !important; }
body.dark-mode .nav-games button[onclick*="openDictionaryLookup"] { background: transparent !important; border-color: rgba(255,255,255,0.3) !important; color: #fff !important; }

/* BW text in nav bar — active state keeps white/gold */
#lnb-games .lnb-bw span { filter: none !important; }
#lnb-games.lnb-active .lnb-bw span:first-child { color: #fff !important; }
#lnb-games.lnb-active .lnb-bw span:last-child  { color: #EF9F27 !important; }
#lnb-games:not(.lnb-active) .lnb-bw span:first-child { color: var(--text-muted) !important; }
#lnb-games:not(.lnb-active) .lnb-bw span:last-child  { color: var(--text-muted) !important; }

/* ── Nav icon button — no box, just icon ── */
.nav-icon-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
  border-radius: 0 !important;
  line-height: 1;
  -webkit-tap-highlight-color: rgba(255,255,255,0.2);
}
.nav-icon-btn:hover { opacity: 1; }
.nav-icon-btn:active { opacity: 0.7; }

/* Achievements — purple theme (distinct from gold Community) */
#achievements-card { border-top-color: #534AB7 !important; }
#achievements-card > div:first-child { background: #f0effe !important; }
#achievements-card > div:first-child span:first-child { color: #534AB7 !important; }
#achievements-card > div:first-child span[id="achievements-chevron"] { color: #534AB7 !important; }
body.dark-mode #achievements-card > div:first-child { background: rgba(83,74,183,0.25) !important; }
body.dark-mode #achievements-card > div:first-child span:first-child { color: #c8c0f8 !important; }
body.dark-mode #achievements-card > div:first-child span[id="achievements-chevron"] { color: #c8c0f8 !important; }

/* ── Info button — plain circled ℹ, white, no box ── */
.nav-info-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0;
  -webkit-tap-highlight-color: rgba(255,255,255,0.2);
}
.nav-info-btn:hover { color: #fff !important; }
.nav-info-btn:active { opacity: 0.7; }

/* ── Lobby header & footer — slightly different from page background ── */
@keyframes tutPulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(-6px); opacity: 0.6; }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 4px #EF9F27); opacity: 1; }
  50%       { filter: drop-shadow(0 0 10px #EF9F27) drop-shadow(0 0 4px #fff); opacity: 0.85; }
}

#screen-lobby .topnav {
  background: #4640a8 !important;   /* slightly deeper than --purple #534AB7 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
#screen-lobby .lobby-wrap {
  margin-top: 72px; /* push content below fixed header */
}
body.dark-mode #screen-lobby .topnav {
  background: #2d2960 !important;   /* deeper than dark nav-bg */
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Lobby footer nav bar — contrasting shade */
@media (max-width: 768px) {
  .lobby-nav-bar {
    background: #3e3a96 !important;     /* deeper than topnav — creates layered look */
    border-top: 1.5px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.2) !important;
  }
  .lobby-nav-bar .lnb-btn,
  .lobby-nav-bar .lnb-btn span { color: rgba(255,255,255,0.65) !important; }
  .lobby-nav-bar .lnb-btn.lnb-active,
  .lobby-nav-bar .lnb-btn.lnb-active span { color: #fff !important; }
  .lobby-nav-bar .lnb-btn.lnb-active .lnb-bw span:last-child { color: #EF9F27 !important; }

  body.dark-mode .lobby-nav-bar {
    background: #1a1840 !important;
    border-top-color: rgba(255,255,255,0.08) !important;
  }
}

/* Lobby screen scrollable, header sticky ✓, footer nav fixed ✓ */
@media (max-width: 768px) {
  #screen-lobby {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Dictionary button in topnav: match theme ── */
.topnav button[onclick*="openDictionaryLookup"] {
  background: transparent !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}
.topnav button[onclick*="openDictionaryLookup"]:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* ── Lobby menu dropdown: ensure buttons are clickable above backdrop ── */
#lobby-menu-dropdown {
  z-index: 10000 !important;
  pointer-events: all !important;
}
#lobby-menu-dropdown button,
#lobby-menu-dropdown a {
  position: relative;
  z-index: 10001;
  pointer-events: all !important;
  opacity: 1 !important;
}

/* ── Footer bars: distinct color in light + dark mode ── */
/* Lobby nav bar */
@media (max-width: 768px) {
  .lobby-nav-bar {
    background: #3d3b82 !important;           /* deeper than topnav */
    border-top: 1.5px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 -3px 16px rgba(0,0,0,0.18) !important;
  }
  body.dark-mode .lobby-nav-bar {
    background: #1c1a3a !important;
    border-top-color: rgba(255,255,255,0.08) !important;
  }
}

/* Game dock bottom bar */
.mobile-bottom-bar {
  background: #3d3b82;
  border-top: 1.5px solid rgba(255,255,255,0.12);
}
body.dark-mode .mobile-bottom-bar {
  background: #1c1a3a !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
.mbb-btn, .mbb-btn span {
  color: rgba(255,255,255,0.75) !important;
}
.mbb-btn:active { background: rgba(255,255,255,0.1) !important; }

/* Board area backgrounds match in all modes */
/* board bg only on mobile (prevents white flash on zoom) - see mobile.css */
body.dark-mode #screen-game .main,
body.dark-mode #screen-game .board-wrap {
  background: var(--bg) !important;
}

/* ── Lobby hamburger dropdown: above everything including lobby nav ── */
#lobby-menu-dropdown {
  z-index: 10000 !important;
  pointer-events: all !important;
}
#lobby-menu-dropdown * {
  pointer-events: all !important;
}
#menu-backdrop {
  z-index: 9990 !important;  /* below dropdown but above nav */
}

/* ── Dictionary button: same as other nav-games buttons ── */
.nav-games button[onclick*="openDictionaryLookup"] {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.nav-games button[onclick*="openDictionaryLookup"]:hover {
  background: var(--surface) !important;
}
/* In settings dropdowns (white bg) */
#game-menu-dropdown button[onclick*="openDictionaryLookup"],
#game-settings-dropdown button[onclick*="openDictionaryLookup"],
#lobby-menu-dropdown button[onclick*="openDictionaryLookup"] {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Game footer (bottom bar) — darker ── */
#screen-game .mobile-bottom-bar {
  background: #2e2b6e !important;
  border-top-color: rgba(255,255,255,0.1) !important;
}
body.dark-mode #screen-game .mobile-bottom-bar {
  background: #14122e !important;
}

/* ── Dark mode: PLAY button gold when it's your turn ── */
body.dark-mode .games-list-item .btn-sm[style*="background:#534AB7"],
body.dark-mode .games-list-item button[style*="background:#534AB7"] {
  background: #EF9F27 !important;
  border-color: #c97f00 !important;
  color: #fff !important;
}
/* Also mobile games list */
body.dark-mode #games-list-mobile .btn-sm[style*="background:#534AB7"],
body.dark-mode #games-list-mobile button[style*="background:#534AB7"] {
  background: #EF9F27 !important;
  border-color: #c97f00 !important;
  color: #fff !important;
}

/* ── Drifter cell: black bg + skull ── */
.cell.chaos-drifter {
  background: #111 !important;
  box-shadow: 0 0 0 3px #E24B4A, 0 0 12px 4px rgba(226,75,74,0.7) !important;
  animation: drifter-pulse 0.8s infinite !important;
}
.cell.chaos-drifter::before {
  content: '💀';
  position: absolute;
  font-size: 16px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

/* ── Target cell: pulsing gold highlight, more visible on mobile ── */
.cell.chaos-target {
  box-shadow: 0 0 0 3px #EF9F27, 0 0 10px 3px rgba(239,159,39,0.8) !important;
  animation: target-pulse 0.8s infinite !important;
  background: rgba(239,159,39,0.25) !important;
}
@keyframes target-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(239,159,39,0.7), 0 0 6px 2px rgba(239,159,39,0.4); }
  50%      { box-shadow: 0 0 0 3px #EF9F27, 0 0 14px 5px rgba(239,159,39,0.9); }
}

/* ── Settings dropdowns: always above everything, clickable in all modes ── */
#lobby-settings-dropdown,
#game-settings-dropdown,
#admin-settings-dropdown {
  z-index: 10000 !important;
  pointer-events: all !important;
  isolation: isolate;
}
#lobby-settings-dropdown *,
#game-settings-dropdown *,
#admin-settings-dropdown * {
  pointer-events: all !important;
}
/* Ensure the parent wrapper doesn't create a clipping stacking context */
.topnav .desktop-only[style*="position:relative"] {
  overflow: visible !important;
  isolation: auto;
}
body.dark-mode #lobby-settings-dropdown,
body.dark-mode #game-settings-dropdown,
body.dark-mode #admin-settings-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ── Game list buttons (Open/Play/View) — visible in dark mode ── */
body.dark-mode .games-list-item .btn-sm:not([style*="background:#534AB7"]):not([style*="background:#EF9F27"]) {
  background: var(--surface2) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: var(--text) !important;
}
/* Open/View buttons (not My Turn) - slightly lighter than bg */
body.dark-mode .games-list-item .btn-sm {
  background: #3a374f !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
/* Restore PLAY gold override */
body.dark-mode .games-list-item .btn-sm[style*="background:#534AB7"] {
  background: #EF9F27 !important;
  border-color: #c97f00 !important;
  color: #fff !important;
}
/* Mobile game list too */
body.dark-mode #games-list-mobile .btn-sm {
  background: #3a374f !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode #games-list-mobile .btn-sm[style*="background:#534AB7"] {
  background: #EF9F27 !important;
  border-color: #c97f00 !important;
  color: #fff !important;
}

/* ── Waiting status bar: dark mode bg ── */
body.dark-mode #wp-bar,
body.dark-mode .wp-bar,
body.dark-mode [id*="waiting"],
body.dark-mode .game-status-bar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* ── Log wrap: constrained height so log can scroll ── */
.log-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.log {
  flex: 1;
  min-height: 80px;
  max-height: 420px;
  overflow-y: auto;
  scroll-behavior: auto;
}

/* ── Open button in game list: light purple in light mode ── */
.games-list-item .btn-sm:not([style*="background:#534AB7"]):not([style*="color:#A32D2D"]) {
  background: #eeecfa !important;
  border-color: #c5c0ee !important;
  color: #3C3489 !important;
}
body.dark-mode .games-list-item .btn-sm:not([style*="background:#EF9F27"]):not([style*="color:#A32D2D"]) {
  background: #3a374f !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--text) !important;
}

/* ── Shuffle/Recall: dark purple border in light mode ── */
#screen-game .mobile-dock-actions .btn-shuffle,
#screen-game .mobile-dock-actions .btn-recall {
  border: 1.5px solid #3C3489 !important;
}
body.dark-mode #screen-game .mobile-dock-actions .btn-shuffle,
body.dark-mode #screen-game .mobile-dock-actions .btn-recall {
  border-color: #7B74D4 !important;
}

/* ── Footer: always full width, below content ── */
@media (max-width: 768px) {
  #screen-lobby .lobby-wrap > footer,
  #screen-lobby footer {
    width: 100% !important;
    flex-basis: 100% !important;
    display: block !important;
    float: none !important;
    clear: both;
  }
}

/* ── Heart/Fav button: always pink, transparent bg ── */
.btn-fav {
  background: transparent !important;
  border-color: transparent !important;
  color: #E24B4A !important;
  font-size: 18px !important;
  padding: 4px 8px !important;
}
.btn-fav.faved { color: #E24B4A !important; }
body.dark-mode .btn-fav { color: #ff7b7b !important; background: transparent !important; }

/* ── Saved words pane: dark mode bg ── */
body.dark-mode #saved-moves-pane,
body.dark-mode #saved-moves-pane-mobile {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Stats modal sections: dark mode ── */
body.dark-mode .stat-section,
body.dark-mode .profile-stat,
body.dark-mode .stats-grid,
body.dark-mode .stats-section,
body.dark-mode [class*="stat"] { 
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* ── Lobby nav bar: restored purple ── */
@media (max-width: 768px) {
  .lobby-nav-bar {
    background: #3d3b82 !important;
    border-top: 1.5px solid rgba(255,255,255,0.12) !important;
  }
  body.dark-mode .lobby-nav-bar {
    background: #1c1a3a !important;
  }
  /* Game dock bottom bar: purple */
  .mobile-bottom-bar {
    background: #3d3b82 !important;
    border-top: 1.5px solid rgba(255,255,255,0.1) !important;
  }
  body.dark-mode .mobile-bottom-bar {
    background: #1c1a3a !important;
  }
  /* Reduce dock bottom bar padding to show waiting bar */
  .mbb-btn {
    padding: 3px 4px 4px !important;
  }
  .mbb-btn span { font-size: 9px !important; }
}

/* ── Opponent list: pink heart for favs ── */
.games-list-opp-fav, span[style*="color:#E24B4A"] { color: #E24B4A !important; }

/* ── Lobby settings dropdown dark mode ── */
#lobby-settings-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
#lobby-settings-dropdown button { color: var(--text) !important; }

/* ── Mobile: hide bottom banners (status shown in dock instead) ── */
@media (max-width: 768px) {
  .turn-banner,
  #admin-banner,
  #nudge-area-mobile {
    display: none !important;
  }
}

/* ── Game topnav: always bright purple in dark mode ── */
body.dark-mode #game-topnav,
body.dark-mode #screen-game .topnav {
  background: #3C3489 !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* ── Game bottom bar: bright purple in dark mode ── */
body.dark-mode .mobile-bottom-bar {
  background: #2e2b6e !important;
  border-top-color: rgba(255,255,255,0.12) !important;
}

/* ── Placed tile on Lurker/Drifter cell: tile shows above skull ── */
.cell.placed-on-drifter {
  background: #111 !important;
  box-shadow: 0 0 0 3px #E24B4A, 0 0 12px 4px rgba(226,75,74,0.7) !important;
}
.cell.placed-on-drifter .blank-letter,
.cell.placed-on-drifter {
  color: #fff !important;
  font-weight: 900 !important;
  z-index: 5;
  position: relative;
}
/* Skull pseudo suppressed — JS appends the skull span instead */
.cell.placed-on-drifter::before {
  content: none;
}

/* Practice tile on drifter — keep practice colors, letter still visible */
.cell.placed.practice.placed-on-drifter {
  background: #534AB7 !important;
  color: #FFE566 !important;
  border: 2px dashed #c8c2ff !important;
  opacity: 0.85 !important;
  box-shadow: 0 0 0 3px #E24B4A, 0 0 10px 3px rgba(226,75,74,0.6) !important;
}

/* ── Game footer bar: purple always ── */
.mobile-bottom-bar {
  background: #3d3b82 !important;
  border-top: 1.5px solid rgba(255,255,255,0.12) !important;
}
body.dark-mode .mobile-bottom-bar {
  background: #2e2b6e !important;
}
.mbb-btn, .mbb-btn span { color: rgba(255,255,255,0.85) !important; }

/* ── Mobile bottom bar: same purple as topnav, always ── */
.mobile-bottom-bar {
  background: #534AB7 !important;
  border-top: 1.5px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15) !important;
}
body.dark-mode .mobile-bottom-bar {
  background: #3C3489 !important;
  border-top-color: rgba(255,255,255,0.1) !important;
}



/* Ensure html.dark-mode applies background before body class loads */
html.dark-mode {
  background: #16141f;
  color-scheme: dark;
}

/* ── Disable double-tap zoom on all interactive elements ── */
button, a, .cell, .tile, .wb-cell, .bs-tile, .ebtn, .lnb-btn, .mbb-btn {
  touch-action: manipulation;
}

/* ── Disable pull-to-refresh and overscroll on game screen ── */
#screen-game,
#screen-game .main,
#screen-game .board-wrap {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* Also prevent body pull-to-refresh when game is active */
body:has(#screen-game.active) {
  overscroll-behavior-y: none;
}

/* ══════════════════════════════════════════════════
   DARK MODE: GLOBAL FIXES FOR DYNAMICALLY CREATED PANELS
   ══════════════════════════════════════════════════ */

/* Confirm submit sheet */
body.dark-mode #mobile-submit-confirm {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
}

/* Modal boxes */
body.dark-mode .modal-box {
  background: var(--surface) !important;
  color: var(--text) !important;
}
body.dark-mode .modal-overlay {
  background: rgba(0,0,0,0.6) !important;
}

/* Admin panel */
body.dark-mode #admin-panel-card,
body.dark-mode .admin-section {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* All inline-created white panels / cards */
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background:#f4f2ed"],
body.dark-mode [style*="background:#f8f7f4"],
body.dark-mode [style*="background:#FFF8EC"],
body.dark-mode [style*="background:#fff8ec"] {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Inline muted/grey text */
body.dark-mode [style*="color:#888"],
body.dark-mode [style*="color: #888"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color:#aaa"] {
  color: var(--text-muted) !important;
}

/* WordBlitz / WordStorm modal content */
body.dark-mode #modal-box [style*="background:#f4f2ed"],
body.dark-mode #modal-box [style*="background:#FFF8EC"],
body.dark-mode #modal-box [style*="background:#fff4f4"] {
  background: var(--surface2) !important;
}

/* ── Chaos ability bar: bigger icons on desktop ── */
@media (min-width: 769px) {
  #chaos-abilities-bar .chaos-ab-btn,
  #chaos-abilities-bar button {
    font-size: 22px !important;
    min-width: 36px !important;
    padding: 4px 8px !important;
  }
}

/* ── Dictionary side button: neutral in light mode ── */
.side-icon-btn[onclick*="openDictionaryLookup"] {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Desktop chaos skull button: purple always ── */
#desk-chaos-btn {
  background: #534AB7 !important;
  border-color: #3C3489 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(83,74,183,0.4) !important;
}
body.dark-mode #desk-chaos-btn {
  background: #3C3489 !important;
}

/* ── Chaos pips: dark in light mode ── */
.chaos-pip-skull {
  filter: brightness(0);  /* black in light mode */
}
body.dark-mode .chaos-pip-skull {
  filter: none;  /* normal emoji in dark mode */
}

/* ── Topnav always above modal overlay on desktop so settings btn is clickable ── */
@media (min-width: 769px) {
  .topnav, header.topnav {
    z-index: 1060 !important;  /* above modal-overlay (1050) */
    position: relative;
  }
}

/* ── Admin settings dropdown: always readable regardless of topnav color ── */
#admin-settings-dropdown {
  color: var(--text) !important;
}
#admin-settings-dropdown button,
#admin-settings-dropdown .btn-sm {
  color: var(--text) !important;
  background: transparent !important;
  border-color: transparent !important;
}
#admin-settings-dropdown button:hover,
#admin-settings-dropdown .btn-sm:hover {
  background: var(--surface2) !important;
}
#admin-settings-dropdown button[style*="color:#A32D2D"] {
  color: #A32D2D !important;
}

/* ── Placed tiles on bonus cells: always use tile colors, not bonus colors ── */
.cell.placed.dw, .cell.placed.dl, .cell.placed.tw, .cell.placed.tl,
.cell.placed.norm {
  background: #534AB7 !important;
  color: #FFE566 !important;
}
.cell.locked.dw, .cell.locked.dl, .cell.locked.tw, .cell.locked.tl {
  background: #534AB7 !important;
  color: #fff !important;
}

/* ── Desktop game log: constrained height so it scrolls ── */
@media (min-width: 769px) {
  .side-extras {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
  }
  .side-extras[open] {
    max-height: 40vh;
  }
  .log-wrap {
    min-height: 0;
    flex: 1;
    overflow: hidden;
    padding-bottom: 8px;
  }
  #log-e {
    max-height: 35vh;
    overflow-y: auto;
  }
}

/* ── Defuse bonus cell: glowing 2W for current turn only ── */
.cell.chaos-defuse-bonus {
  background: #F4C0D1 !important;
  color: #72243E !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 2px #E24B4A, 0 0 10px 3px rgba(226,75,74,0.5) !important;
  animation: defuse-pulse 1s infinite !important;
}
@keyframes defuse-pulse {
  0%,100% { box-shadow: 0 0 0 2px #E24B4A, 0 0 6px 2px rgba(226,75,74,0.3); }
  50%      { box-shadow: 0 0 0 3px #E24B4A, 0 0 14px 4px rgba(226,75,74,0.6); }
}

/* ── Chaos pickup tiles: GT, Coin, XP ── */
.chaos-pickup-tile {
  position: relative;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.chaos-pickup-tile .pickup-icon {
  font-size: 18px;
  line-height: 1;
  z-index: 2;
  position: relative;
}
.chaos-pickup-tile .xp-icon {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
}

/* Golden Tile — warm gold raised tile */
.cell.golden.chaos-pickup-tile {
  background: linear-gradient(135deg, #f7c948, #e8a000) !important;
  box-shadow: 0 2px 0 #a06800, 0 0 10px 3px rgba(239,159,39,0.6) !important;
  border: 1.5px solid #f0b800 !important;
}

/* Glowing Coin — green raised tile with pulse */
.chaos-pickup-coin {
  box-shadow: 0 2px 0 #0e4a28, 0 0 12px 4px rgba(46,158,91,0.7) !important;
  border: 1.5px solid #2e9e5b !important;
  animation: coin-throb 1.6s ease-in-out infinite !important;
}
@keyframes coin-throb {
  0%,100% { box-shadow: 0 2px 0 #0e4a28, 0 0 6px 2px rgba(46,158,91,0.4); }
  50%      { box-shadow: 0 2px 0 #0e4a28, 0 0 18px 6px rgba(46,158,91,0.8); }
}

/* XP Tile — dark blue raised tile with shine sweep */
.chaos-pickup-xp {
  background: #0a8a8a !important;
  box-shadow: 0 2px 0 #056060, 0 0 12px 4px rgba(10,138,138,0.8);
  border: 1.5px solid #1a4a9e;
  overflow: hidden !important;
}
.chaos-pickup-xp::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  animation: xp-shine 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes xp-shine {
  0%,70% { left: -75%; }
  100%   { left: 125%; }
}

@media (min-width: 820px) {
  .auth-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    max-width: 820px;
    gap: 24px;
    padding: 60px 32px 60px;
  }
  /* Logo + card share one white block */
  .logo-block {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 240px;
    text-align: left;
    background: #fff;
    border-radius: 16px 0 0 16px;
    padding: 32px 24px 32px 32px;
    margin: 0;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .logo-block img { margin: 0 0 8px 0 !important; max-width: 200px; }
  .logo-block .tagline { text-align: left; margin: 0; }
  #auth-card {
    flex: 0 0 360px;
    border-radius: 0 16px 16px 0 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
    margin: 0 !important;
  }
  .auth-new-prompt {
    flex: 0 0 604px;
  }
  /* Logo + card share one visual block */
  .logo-block {
    background: #fff;
    border-radius: 16px 0 0 16px;
    padding: 32px 24px 32px 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin: 0;
  }
  #auth-card {
    border-radius: 0 16px 16px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin: 0;
    border-left: 1px solid #f0f0f0;
  }
  /* game info spans full width below */
  .auth-info {
    flex: 0 0 100%;
    margin-top: 16px;
  }
}

/* Desktop chaos skull button */
#desk-chaos-btn {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark-mode #desk-chaos-btn {
  background: #222 !important;
  border: 1px solid #444 !important;
}

/* Rack swap log entries — make them more noticeable */
.le.sys[data-swap="1"] {
  color: #A32D2D;
  font-weight: 700;
  font-size: 13px;
  background: #fff0f0;
  padding: 5px 10px;
  border-left: 3px solid #A32D2D;
  border-radius: 6px;
  border-bottom: none;
  margin: 4px 0;
}
body.dark-mode .le.sys[data-swap="1"] {
  background: rgba(163,45,45,0.15);
  color: #f5a0a0;
  border-left-color: #E24B4A;
}

/* ── Faves heart pulse animation ── */
@keyframes faves-pulse {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(1.1);  }
  80%  { transform: scale(1.25); }
  100% { transform: scale(1);    }
}
.faves-heart-btn.has-requests {
  animation: faves-pulse 1.4s ease-in-out infinite;
  transform-origin: center;
}
/* Faves heart — override nav-icon-btn white */
.faves-heart-btn.nav-icon-btn { color: #FF3D6B !important; }
.faves-heart-btn.btn-sm       { color: #FF3D6B !important; border-color: rgba(255,61,107,0.3) !important; }