/* ==============================================
   MGP CORE STYLES — SINGLE SOURCE OF TRUTH
   Do NOT put CSS anywhere else.
   Do NOT inject CSS from JavaScript.
   ============================================== */

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

/* === THEME VARIABLES ===
   Two systems coexist:
   - Legacy (--mgp-*): keeps existing rules working.
   - Contrast (--text-*, --bg-*): new readable scheme used by the global
     text rules at the bottom of this file. Both kept in sync per theme.
   Theme attribute model: NO attribute = light (default fallback);
   data-theme="dark" = dark; data-theme="light" = explicit light. */
:root,
[data-theme="light"] {
  --mgp-bg: #F5F5F4;
  --mgp-text: #1E293B;
  --mgp-text-muted: #64748B;
  --mgp-text-heading: #0F172A;
  --mgp-surface: #FFFFFF;
  --mgp-border: #E2E8F0;
  --mgp-nav-bg: rgba(255,255,255,0.95);
  --mgp-nav-border: #E2E8F0;
  --mgp-link: #2563EB;

  /* Contrast scheme — light context (text on white/cream surfaces) */
  --text-heading: #0F172A;     /* slate-900   ~19:1 on white */
  --text-body:    #1E293B;     /* slate-800   ~15:1 on white */
  --text-secondary: #475569;   /* slate-600   ~7.4:1 on white */
  --text-muted:   #64748B;     /* slate-500   ~4.7:1 on white (AA) */
  --text-link:    #0284C7;     /* sky-600     ~4.7:1 on white (AA) */
  --text-on-card: #0F172A;
  --bg-card:    rgba(255,255,255,0.92);
  --bg-article: rgba(248,250,252,0.94);
}

[data-theme="dark"] {
  --mgp-bg: #0C0A1A;
  --mgp-text: #E2E8F0;
  --mgp-text-muted: #94A3B8;
  --mgp-text-heading: #F8FAFC;
  --mgp-surface: rgba(255,255,255,0.06);
  --mgp-border: rgba(255,255,255,0.12);
  --mgp-nav-bg: rgba(12,10,26,0.8);
  --mgp-nav-border: rgba(255,255,255,0.08);
  --mgp-link: #818CF8;

  /* Contrast scheme — dark context (text on dark surfaces, e.g. body bg,
     nav, footer). NOTE: this site renders <main> on a white-ish surface
     in dark mode, so --text-* gets re-overridden inside that scope below. */
  --text-heading: #F1F5F9;     /* slate-100   ~17:1 on dark */
  --text-body:    #CBD5E1;     /* slate-300   ~12:1 on dark */
  --text-secondary: #94A3B8;   /* slate-400   ~6.7:1 on dark */
  --text-muted:   #94A3B8;     /* keep readable, not below AA */
  --text-link:    #38BDF8;     /* sky-400     ~7:1 on dark */
  --text-on-card: #F1F5F9;
  --bg-card:    rgba(30,41,59,0.85);
  --bg-article: rgba(15,23,42,0.65);
}

/* === PAGE LAYOUT === */
body {
  margin: 0;
  padding: 0;
  background: var(--mgp-bg);
  font-family: 'Space Grotesk', sans-serif;
  color: var(--mgp-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --mgp-shell-heading: var(--mgp-text-heading);
  --mgp-shell-muted: var(--mgp-text-muted);
  transition: background-color 300ms ease, color 300ms ease;
}

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 50% at 85% 10%, rgba(99, 102, 241, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(20, 184, 166, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(236, 72, 153, 0.15) 0%, transparent 70%),
    #0C0A1A;
  background-attachment: fixed;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  margin-bottom: 24px;
}

[data-theme="dark"] main {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  color: #0F172A;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  --mgp-text: #0F172A;
  --mgp-text-heading: #0F172A;
  --mgp-text-muted: #64748B;
  --mgp-surface: #FFFFFF;
  --mgp-border: #E2E8F0;
  --mgp-shell-heading: #0F172A;
  --mgp-shell-muted: #64748B;
  /* Re-localize the contrast scheme: <main> in dark mode is white,
     so children must use light-context (dark-on-white) text colors. */
  --text-heading: #0F172A;
  --text-body: #1E293B;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-link: #0284C7;
  --text-on-card: #0F172A;
  --bg-card: rgba(255,255,255,0.92);
  --bg-article: rgba(248,250,252,0.94);
}

.mgp-game-content main,
.mgp-game-area main {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
  max-width: none;
  color: inherit;
  --mgp-text: inherit;
  --mgp-text-heading: inherit;
  --mgp-text-muted: inherit;
  --mgp-surface: inherit;
  --mgp-border: inherit;
  --mgp-link: inherit;
}

.mgp-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mgp-page-content {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

/* === GAME WRAPPER === */
.mgp-game-wrapper {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  position: relative;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* === THEME: DARK (Arcade, Action) === */
.mgp-theme-dark {
  background: #0F172A;
  color: #F1F5F9;
  --mgp-shell-heading: #F8FAFC;
  --mgp-shell-muted: #94A3B8;
  border-top: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 -2px 20px rgba(59, 130, 246, 0.12);
}

.mgp-theme-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.45) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 25% 45%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,0.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 90%, rgba(255,255,255,0.3) 50%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: mgp-twinkle 4s ease-in-out infinite alternate;
}

@keyframes mgp-twinkle {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.mgp-theme-dark > * {
  position: relative;
  z-index: 1;
}

/* === THEME: FELT (Card, Casino) === */
.mgp-theme-felt {
  background: linear-gradient(135deg, #1a472a 0%, #0d2818 100%);
  color: #E2E8F0;
  --mgp-shell-heading: #F8FAFC;
  --mgp-shell-muted: #94A3B8;
  border: 1px solid rgba(218, 165, 32, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mgp-theme-felt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.mgp-theme-felt > * {
  position: relative;
  z-index: 1;
}

/* === THEME: WOOD (Board, Strategy) === */
.mgp-theme-wood {
  background: linear-gradient(135deg, #5c3d2e 0%, #3e2723 100%);
  color: #EFEBE9;
  --mgp-shell-heading: #EFEBE9;
  --mgp-shell-muted: #A1887F;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mgp-theme-wood::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.15' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.mgp-theme-wood > * {
  position: relative;
  z-index: 1;
}

/* === THEME: LIGHT (Puzzle, Word, Casual, Math, Trivia, Builder) === */
.mgp-theme-light {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --mgp-shell-heading: #0F172A;
  --mgp-shell-muted: #64748B;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* === SCORE BAR === */
.mgp-score-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mgp-theme-dark .mgp-score-bar,
.mgp-theme-felt .mgp-score-bar,
.mgp-theme-wood .mgp-score-bar {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: inherit;
}

.mgp-game-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.mgp-scores {
  display: flex;
  gap: 20px;
  align-items: center;
}

.mgp-score-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mgp-shell-muted, #64748B);
}

.mgp-score-value {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.mgp-score-value.mgp-score-pop {
  animation: mgp-pop 0.3s ease;
}

@keyframes mgp-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* === GAME AREA === */
.mgp-game-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 300px;
  color: var(--mgp-text, #0F172A);
  background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.04) 100%);
}

.mgp-theme-dark .mgp-game-area {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 100%);
}

.mgp-theme-felt .mgp-game-area {
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.15) 100%);
}

.mgp-theme-wood .mgp-game-area {
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.12) 100%);
}

.mgp-game-area canvas,
main canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
  margin: 0 auto;
  object-fit: contain;
}

/* === DESKTOP GAME PAGES — wider container, canvas fills wrapper === */
/* Override Tailwind .max-w-{4,5,6,7}xl on game-page <main>. 1100px desktop,
   100vw on mobile so games can breathe. Zero side padding so canvases /
   tables align edge-to-edge on phones. */
body[data-game-slug] main {
  max-width: 1100px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  body[data-game-slug] main {
    max-width: 100vw !important;
    width: 100vw;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

body[data-game-slug] main canvas,
body[data-game-slug] .mgp-game-content canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

body[data-game-slug] main .card,
body[data-game-slug] main > div:first-child,
body[data-game-slug] .mgp-game-content .card,
body[data-game-slug] .mgp-game-content > div:first-child {
  max-width: 100%;
}

/* Canvas wrappers: remove Tailwind max-width caps, go full container width */
body[data-game-slug] .relative:has(canvas),
body[data-game-slug] div:has(> canvas) {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mgp-game-area > div,
.mgp-game-area > section,
.mgp-game-area > article {
  width: 100%;
}

/* Legacy game containers */
#mgp-card-legacy-root,
#mgp-casino-legacy-root,
#mgp-arcade-legacy-root {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Legacy game pages without mgp-core shell */
.game-container,
.game-wrapper,
#gameWrapper,
#game-container {
  max-width: 100%;
  margin: 0 auto;
}

/* === CONTROLS BAR === */
.mgp-controls-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mgp-theme-dark .mgp-controls-bar,
.mgp-theme-felt .mgp-controls-bar,
.mgp-theme-wood .mgp-controls-bar {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* === BUTTONS === */
.mgp-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.mgp-btn:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.mgp-btn:active {
  transform: scale(0.98) translateY(0);
}

.mgp-btn-primary {
  color: #FFFFFF;
}

.mgp-btn-secondary {
  background: rgba(0, 0, 0, 0.06);
  color: #0F172A;
}

.mgp-theme-dark .mgp-btn-secondary,
.mgp-theme-felt .mgp-btn-secondary,
.mgp-theme-wood .mgp-btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #F1F5F9;
}

/* === GAME OVER OVERLAY === */
.mgp-game-over-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mgp-game-over-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.mgp-game-over-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  color: #0F172A;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.mgp-game-over-overlay.active .mgp-game-over-card {
  transform: scale(1);
}

.mgp-game-over-title {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 4px;
}

.mgp-game-over-subtitle {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 20px;
}

.mgp-game-over-score {
  font-family: 'DM Mono', monospace;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}

.mgp-game-over-best {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: #64748B;
  margin-bottom: 8px;
}

.mgp-new-best {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #FFFFFF;
  margin-bottom: 20px;
  animation: mgp-pulse-glow 1.5s ease infinite;
}

@keyframes mgp-pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }
}

.mgp-game-over-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.mgp-game-over-actions .mgp-btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 15px;
}

/* === PAUSE OVERLAY === */
.mgp-pause-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.mgp-pause-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.mgp-pause-text {
  font-weight: 700;
  font-size: 32px;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* === PLAYER BAR === */
.mgp-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 13px;
  opacity: 1;
  color: var(--mgp-shell-muted);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.mgp-player-name {
  font-family: 'DM Mono', monospace;
  color: var(--mgp-shell-heading);
  font-weight: 700;
}

.mgp-player-edit {
  cursor: pointer;
  color: var(--mgp-shell-muted);
  transition: opacity 0.15s;
}

.mgp-theme-dark .mgp-player-bar,
.mgp-theme-felt .mgp-player-bar,
.mgp-theme-wood .mgp-player-bar {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.mgp-player-edit:hover {
  opacity: 1;
}

/* === LEADERBOARD === */
.mgp-leaderboard,
#leaderboard-container {
  margin-top: 24px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--mgp-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-theme="dark"] .mgp-leaderboard,
[data-theme="dark"] #leaderboard-container {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
}

.mgp-leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--mgp-border);
}

.mgp-leaderboard-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--mgp-border);
}

.mgp-leaderboard-row:last-child {
  border-bottom: none;
}

.mgp-leaderboard-rank {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  width: 32px;
  text-align: center;
}

.mgp-leaderboard-rank.gold { color: #D97706; }
.mgp-leaderboard-rank.silver { color: #64748B; }
.mgp-leaderboard-rank.bronze { color: #B45309; }

.mgp-leaderboard-name {
  flex: 1;
  margin-left: 12px;
}

.mgp-leaderboard-name.is-you {
  font-weight: 600;
}

.mgp-leaderboard-score {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
}

/* === RELATED GAMES === */
.mgp-related-games,
#related-games {
  margin-top: 24px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.mgp-related-games h3,
#related-games h3,
#related-games section h3 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
  color: var(--mgp-text-heading);
}

/* Similar To / Related Games — clean horizontal row */
.mgp-related-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
.mgp-related-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mgp-text-heading);
  margin-bottom: 14px;
}
.mgp-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .mgp-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .mgp-related-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.mgp-related-grid .mgp-game-tile,
.mgp-play-next-grid .mgp-game-tile {
  height: auto !important;
  aspect-ratio: 4 / 3;
  width: 100%;
}

.mgp-related-card {
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--mgp-text);
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  transition: transform 300ms ease, box-shadow 300ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-theme="dark"] .mgp-related-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

.mgp-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .mgp-related-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.mgp-related-card-color {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
  overflow: hidden;
}

.mgp-related-card-color::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.mgp-related-card-info {
  padding: 10px 12px;
}

.mgp-related-card-title {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgp-game-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mgp-text-heading);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.18);
}

.mgp-embed-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 0;
}

.mgp-embed-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.mgp-embed-stack > * { min-width: 0; width: 100%; }

.mgp-embed-header {
  display: grid;
  gap: 12px;
}

.mgp-embed-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--mgp-text-heading);
}

.mgp-embed-subtitle {
  margin: 0;
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mgp-text-muted);
}

.mgp-embed-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.mgp-embed-panel {
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .mgp-embed-panel {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: none;
}

.mgp-embed-stage {
  position: relative;
  background: #020617;
  min-height: 640px;
}

.mgp-embed-frame {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  background: #020617;
}

.mgp-embed-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--mgp-border);
}

.mgp-embed-toolbar-copy {
  display: grid;
  gap: 4px;
}

.mgp-embed-toolbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mgp-text-heading);
}

.mgp-embed-toolbar-subtitle {
  font-size: 12px;
  color: var(--mgp-text-muted);
}

.mgp-embed-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mgp-embed-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mgp-text-muted);
}

.mgp-attribution-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mgp-attribution-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .mgp-attribution-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
}

.mgp-attribution-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mgp-attribution-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--mgp-text-heading);
}

.mgp-attribution-meta {
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--mgp-text-muted);
}

.mgp-attribution-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mgp-attribution-links a {
  color: var(--mgp-link);
  text-decoration: none;
  font-weight: 600;
}

.mgp-attribution-links a:hover {
  color: #3B82F6;
}

/* === SEO CONTENT === */
.mgp-seo-content,
article.prose,
.seo-content,
main ~ article {
  margin-top: 24px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mgp-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-theme="dark"] .mgp-seo-content,
[data-theme="dark"] article.prose,
[data-theme="dark"] .seo-content,
[data-theme="dark"] main ~ article {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
}

.mgp-seo-content h2,
article.prose h2,
main ~ article h2 {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--mgp-text-heading);
  letter-spacing: -0.02em;
}

.mgp-seo-content p,
article.prose p,
main ~ article p {
  margin-bottom: 12px;
  color: var(--mgp-text);
}

.mgp-seo-content a,
article.prose a,
main ~ article a {
  color: var(--mgp-link);
  transition: color 150ms ease;
}

.mgp-seo-content a:hover,
article.prose a:hover,
main ~ article a:hover {
  color: #3B82F6;
}

[data-theme="dark"] .mgp-seo-content a:hover,
[data-theme="dark"] article.prose a:hover,
[data-theme="dark"] main ~ article a:hover {
  color: #93C5FD;
}

.mgp-seo-content h3,
article.prose h3,
.seo-content h3,
main ~ article h3 {
  font-weight: 700;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 8px;
  color: var(--mgp-text-heading);
}

.mgp-seo-content h4,
article.prose h4,
main ~ article h4 {
  font-weight: 600;
  color: var(--mgp-text-heading);
}

.mgp-seo-content li,
article.prose li,
.seo-content li,
main ~ article li {
  color: var(--mgp-text);
  margin-bottom: 4px;
}

.mgp-seo-content strong,
article.prose strong,
.seo-content strong,
main ~ article strong {
  color: var(--mgp-text-heading);
  font-weight: 700;
}

/* Dark mode overrides for Tailwind text utility classes in articles */
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
  color: var(--mgp-text);
}

[data-theme="dark"] h2.text-slate-900,
[data-theme="dark"] h3.text-slate-900,
[data-theme="dark"] h4.text-slate-800,
[data-theme="dark"] h4.text-slate-900 {
  color: var(--mgp-text-heading);
}

[data-theme="dark"] .bg-gray-100 {
  background: rgba(255, 255, 255, 0.1);
}

/* === CONTRAST FIX — readable greys in BOTH light + dark modes ===
   Tailwind .text-slate-400 (#94A3B8) and .text-gray-400 read at only ~3.1:1
   on white backgrounds, failing WCAG AA. In dark mode, <main> is rendered
   on a near-white surface, so the same problem applies. Bump these utility
   classes to slate-500 (#64748B, ~4.6:1) by default. Restore lighter shades
   only on confirmed dark surfaces (top-level nav and footer). */
.text-slate-400,
.text-gray-400,
.text-slate-300,
.text-gray-300,
.text-slate-500,
.text-gray-500 {
  color: #64748B !important;
}
[data-theme="dark"] #nav-container .text-slate-400,
[data-theme="dark"] #nav-container .text-gray-400,
[data-theme="dark"] #nav-container .text-slate-300,
[data-theme="dark"] #nav-container .text-gray-300,
[data-theme="dark"] #footer-container .text-slate-400,
[data-theme="dark"] #footer-container .text-gray-400,
[data-theme="dark"] #footer-container .text-slate-300,
[data-theme="dark"] #footer-container .text-gray-300 {
  color: #CBD5E1 !important;
}

/* === GAME-PAGE LIGHT-PANEL CONTRAST FIX ===
   Many in-game UI panels (bid prompts, round summaries, score panels, etc.)
   use inline `style="background:#fff|#F8FAFC|#F1F5F9|white"` without setting
   an explicit foreground color. They rely on the cascade — which can break
   when nested inside theme containers, sandboxed iframes, or game wrappers
   that override `color`. Force dark text on any light-toned inline-styled
   panel inside a game page so titles like "Your Bid", "Round Summary",
   etc. always read at full contrast in BOTH light and dark mode. */
body[data-game-slug] [style*="background:#fff"],
body[data-game-slug] [style*="background:#FFF"],
body[data-game-slug] [style*="background: #fff"],
body[data-game-slug] [style*="background: #FFF"],
body[data-game-slug] [style*="background:white"],
body[data-game-slug] [style*="background: white"],
body[data-game-slug] [style*="background:#F8FAFC"],
body[data-game-slug] [style*="background: #F8FAFC"],
body[data-game-slug] [style*="background:#F1F5F9"],
body[data-game-slug] [style*="background: #F1F5F9"],
body[data-game-slug] [style*="background:#F5F5F4"],
body[data-game-slug] [style*="background: #F5F5F4"],
body[data-game-slug] [style*="background:#FAFAFA"],
body[data-game-slug] [style*="background: #FAFAFA"],
body[data-game-slug] [style*="background:#FFFDF6"],
body[data-game-slug] [style*="background: #FFFDF6"],
body[data-game-slug] [style*="background:#FFF8E6"],
body[data-game-slug] [style*="background: #FFF8E6"] {
  color: #0F172A;
}

/* === FOOTER === */
#footer-container {
  border-top: 1px solid var(--mgp-border);
  background: transparent;
  margin-top: 48px;
}

.mgp-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mgp-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mgp-footer-links a,
.mgp-footer-links button {
  font-size: 13px;
  color: var(--mgp-text-muted);
  text-decoration: none;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 150ms ease;
  white-space: nowrap;
}

.mgp-footer-links a:hover,
.mgp-footer-links button:hover {
  color: var(--mgp-text-heading);
}

.mgp-footer-links a + a::before,
.mgp-footer-links button::before {
  content: "\00b7";
  margin: 0 6px;
  color: var(--mgp-text-muted);
  pointer-events: none;
}

.mgp-footer-links a:first-child::before {
  display: none;
}

.mgp-footer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mgp-footer-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 12px rgba(15, 23, 42, 0.28);
}

.mgp-footer-logo {
  height: 18px;
  width: auto;
  display: block;
  opacity: 1;
}

.mgp-footer-copy {
  font-size: 12.5px;
  color: var(--mgp-text-muted);
  white-space: nowrap;
}

.mgp-theme-dark .mgp-footer-logo-wrap {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 12px rgba(15, 23, 42, 0.28);
}

.mgp-theme-dark .mgp-footer-logo {
  height: 20px;
  opacity: 1;
  filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.75));
}

.mgp-theme-dark .mgp-footer-links a,
.mgp-theme-dark .mgp-footer-links button {
  color: #94A3B8;
}

.mgp-theme-dark .mgp-footer-links a:hover,
.mgp-theme-dark .mgp-footer-links button:hover {
  color: #F1F5F9;
}

.mgp-theme-dark .mgp-footer-links a + a::before,
.mgp-theme-dark .mgp-footer-links button::before {
  color: #475569;
}

.mgp-theme-dark .mgp-footer-copy {
  color: #94A3B8;
}

.mgp-theme-dark #footer-container {
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 540px) {
  .mgp-footer-links {
    gap: 2px 4px;
  }
  .mgp-footer-links a + a::before,
  .mgp-footer-links button::before {
    margin: 0 4px;
  }
}

/* === SCORE POPUP === */
.mgp-score-popup {
  position: absolute;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 18px;
  pointer-events: none;
  z-index: 30;
  animation: mgp-float-up 0.8s ease forwards;
}

@keyframes mgp-float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

/* === INPUT-SPECIFIC CONTROLS === */
.ctrl-keyboard { display: inline; }
.ctrl-touch { display: none; }
.ctrl-gamepad { display: none; }

@media (pointer: coarse) {
  .ctrl-keyboard { display: none; }
  .ctrl-touch { display: inline; }
}

body.gamepad-connected .ctrl-gamepad { display: inline; }
body.gamepad-connected .ctrl-keyboard { display: none; }

.ctrl-key {
  display: inline-block;
  padding: 3px 9px;
  background: #1E293B;
  border: 1px solid #0F172A;
  border-radius: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  color: #F8FAFC;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.08);
  letter-spacing: 0.3px;
}

[data-theme="dark"] .ctrl-key {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #0F172A;
  box-shadow: 0 1px 0 rgba(0,0,0,0.45), inset 0 -1px 0 rgba(255,255,255,0.5);
}

.game-controls-info {
  font-size: 14px;
  color: var(--mgp-text-heading, #0F172A);
  line-height: 1.7;
  font-weight: 500;
}

[data-theme="dark"] .game-controls-info {
  color: #E2E8F0;
}

/* === CARD GAME STYLES === */
.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* === MOBILE INSTRUCTION CLASSES === */
@media (pointer: coarse) {
  .desktop-only { display: none; }
}
@media (pointer: fine) {
  .mobile-only { display: none; }
}

/* === MOBILE GAME SIZING === */
@media (max-width: 640px) {

  /* --- Non-game page defaults --- */
  .mgp-page-content {
    padding: 4px;
  }

  .mgp-embed-shell {
    padding: 12px 0 0;
    max-width: 100%;
  }

  .mgp-embed-header,
  .mgp-embed-subtitle,
  .mgp-embed-meta,
  .mgp-seo-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .mgp-embed-title {
    font-size: clamp(1.35rem, 5vw, 1.9rem);
    margin-bottom: 2px;
  }

  .mgp-embed-subtitle {
    font-size: 13px;
    line-height: 1.4;
  }

  .mgp-embed-panel {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .mgp-embed-stage {
    min-height: calc(100vh - 180px);
    min-height: calc(100dvh - 180px);
  }

  .mgp-embed-frame {
    min-height: calc(100vh - 180px);
    min-height: calc(100dvh - 180px);
  }

  .mgp-embed-toolbar {
    padding: 10px 12px;
    gap: 8px;
  }

  .mgp-embed-toolbar-copy { display: none; }

  .mgp-embed-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .mgp-embed-toolbar-actions .mgp-btn {
    flex: 1;
    min-height: 44px;
    font-size: 13px;
    padding: 10px 12px;
    text-align: center;
    justify-content: center;
  }

  .mgp-attribution-grid {
    grid-template-columns: 1fr;
  }

  /* =============================================
     GAME PAGES — Full-screen game on mobile
     body[data-game-slug] is set by initToolPage()
     Specificity (0,1,2+) beats Tailwind (0,1,0)
     ============================================= */

  /* Strip ALL padding from game page containers — both <main> and mgp-core shell */
  body[data-game-slug] main,
  body[data-game-slug] .mgp-page-content {
    padding: 0;
    max-width: 100%;
    margin: 0;
  }

  body[data-game-slug] .mgp-game-wrapper {
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  body[data-game-slug] .mgp-game-area {
    padding: 0;
  }

  /* Game card wrapper: minimal padding, edge-to-edge */
  body[data-game-slug] main > .card:first-child,
  body[data-game-slug] main > div:first-child,
  body[data-game-slug] main > article:first-child,
  body[data-game-slug] .mgp-game-content > .card:first-child,
  body[data-game-slug] .mgp-game-content > div:first-child {
    padding: 6px 10px 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    max-width: 100%;
  }

  /* Inner padding sections inside game cards */
  body[data-game-slug] main > article:first-child > header,
  body[data-game-slug] main > article:first-child > .p-6,
  body[data-game-slug] main > article:first-child > div {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Game title: compact single line */
  body[data-game-slug] main h1 {
    font-size: 18px;
    margin-bottom: 2px;
    line-height: 1.2;
  }

  /* Description text below title: smaller, tighter */
  body[data-game-slug] main h1 + p {
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  /* Canvas wrapper: break out of card padding to go full-width */
  body[data-game-slug] .relative:has(canvas),
  body[data-game-slug] div:has(> canvas):not([style*="flex"]) {
    display: block;
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
    max-width: none;
    text-align: center;
  }

  /* Canvas: fill available width, cap height to viewport */
  body[data-game-slug] main canvas,
  body[data-game-slug] .mgp-game-content canvas {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    display: block;
    border-radius: 0;
    object-fit: contain;
  }

  /* Score bar / controls bar: compact one-line */
  body[data-game-slug] main .flex.flex-wrap {
    gap: 4px;
    margin-bottom: 4px;
    font-size: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body[data-game-slug] main .flex.flex-wrap::-webkit-scrollbar {
    display: none;
  }

  body[data-game-slug] main .font-mono {
    font-size: 13px;
    white-space: nowrap;
  }

  /* Speed/mode buttons: smaller on mobile */
  body[data-game-slug] main .speed-btn,
  body[data-game-slug] main button.px-3 {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Player identity bar: compact */
  body[data-game-slug] .mgp-player-bar {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* Game over overlay text: readable, not smushed */
  body[data-game-slug] [id*="gameover"],
  body[data-game-slug] [id*="game-over"] {
    padding: 16px 12px;
    word-wrap: break-word;
  }

  body[data-game-slug] [id*="gameover"] h2,
  body[data-game-slug] [id*="game-over"] h2 {
    font-size: 22px;
    margin-bottom: 4px;
  }

  body[data-game-slug] [id*="gameover"] .text-4xl,
  body[data-game-slug] [id*="game-over"] .text-4xl {
    font-size: 28px;
  }

  /* Play Again button: big, tappable, prominent */
  body[data-game-slug] #play-again,
  body[data-game-slug] #play-again-btn,
  body[data-game-slug] [id*="play-again"],
  body[data-game-slug] .mgp-play-again-btn {
    min-height: 48px;
    min-width: 200px;
    width: 100%;
    max-width: 280px;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 12px;
    border: none;
    background: #3B82F6;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto;
  }

  /* SEO article below game: restore padding */
  body[data-game-slug] main > article,
  body[data-game-slug] main + article,
  body[data-game-slug] main > .card:not(:first-child) {
    padding: 16px 12px;
    border-radius: 8px;
    margin: 8px 4px;
  }

  /* Text readability in game areas */
  body[data-game-slug] main .text-sm {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-game-slug] main .text-xs {
    font-size: 10px;
    line-height: 1.3;
  }

  /* Leaderboard: compact */
  body[data-game-slug] .mgp-leaderboard {
    font-size: 12px;
    padding: 8px;
  }

}

/* === LANDING PAGE === */
.mgp-hero-heading {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--mgp-text-heading);
}

.mgp-hero-grad {
  background: linear-gradient(90deg, #0891B2, #7C3AED, #DC2626, #EA580C, #059669, #0891B2);
  background-size: 500% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mgp-hero-shift 6s linear infinite;
}

@keyframes mgp-hero-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes mgp-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mgp-glass {
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: background 300ms ease, border-color 300ms ease;
}

[data-theme="dark"] .mgp-glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
}

/* Game tile cards */
.mgp-game-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 300ms ease, box-shadow 300ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
}

.mgp-game-tile:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}

.mgp-game-tile .mgp-tile-bg-emoji {
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: 160px;
  opacity: 0.65;
  transform: rotate(-12deg);
  line-height: 1;
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.mgp-game-tile:hover .mgp-tile-bg-emoji {
  opacity: 0.75;
  transform: rotate(-8deg) scale(1.05);
}

.mgp-game-tile .mgp-tile-play {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.mgp-game-tile:hover .mgp-tile-play {
  opacity: 1;
  transform: translateX(0);
}

.mgp-game-tile .mgp-tile-emoji {
  transition: transform 200ms ease;
}

.mgp-game-tile:hover .mgp-tile-emoji {
  transform: scale(1.1);
}

/* Thumbnail tiles for embed games */
.mgp-game-tile .mgp-tile-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
  pointer-events: none;
}

.mgp-game-tile:hover .mgp-tile-thumb {
  transform: scale(1.06);
}

/* When thumb is present, keep emoji in DOM as a fallback layer beneath the image.
   If image fails to load (onerror strips img + has-thumb class), the emoji is
   already rendered and becomes fully visible via the else branch. */
.mgp-game-tile.has-thumb .mgp-tile-bg-emoji {
  opacity: 0;
}
/* If onerror fires and strips has-thumb, emoji becomes fully visible */
.mgp-game-tile:not(.has-thumb) .mgp-tile-bg-emoji {
  opacity: 0.65;
}

/* Category pills */
.mgp-pills-scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  position: relative;
}

@media (max-width: 640px) {
  .mgp-pills-scroll {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .mgp-pills-scroll::-webkit-scrollbar { display: none; }
}

.mgp-cat-pill {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  border: 2px solid var(--mgp-border);
  background: var(--mgp-surface);
  color: var(--mgp-text-muted);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 200ms ease;
  flex-shrink: 0;
}

.mgp-cat-pill:hover {
  border-color: var(--mgp-text-muted);
  color: var(--mgp-text);
}

.mgp-cat-pill.active {
  color: #fff;
  border-color: currentColor;
}

/* Search */
.mgp-search-box {
  position: relative;
  border: 2px solid var(--mgp-border);
  border-radius: 14px;
  background: var(--mgp-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

[data-theme="dark"] .mgp-search-box {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

.mgp-search-box:focus-within {
  border-color: var(--mgp-link);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 8px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .mgp-search-box:focus-within {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.mgp-search-input {
  width: 100%;
  padding: 16px 48px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--mgp-text);
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgp-search-input::placeholder {
  color: var(--mgp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .mgp-search-input {
    font-size: 14px;
    padding: 14px 40px;
  }
  .mgp-search-box > span:first-child {
    left: 12px;
    font-size: 16px;
  }
}

/* Nav bar */
.mgp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mgp-nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mgp-nav-border);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  max-width: 100%;
  transition: box-shadow 300ms ease, background 300ms ease;
}

.mgp-nav.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mgp-nav.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mgp-nav-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.mgp-nav-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.15);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .mgp-nav-brand-mark {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(230, 235, 255, 0.88));
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.mgp-nav-brand-icon {
  width: 36px;
  height: 36px;
  display: block;
}

.mgp-nav-brand-text {
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--mgp-text-heading);
}

[data-theme="dark"] .mgp-nav-brand-text {
  color: #F8FAFC;
  text-shadow: 0 0 18px rgba(129, 140, 248, 0.16);
}

.mgp-nav-breadcrumb {
  font-size: 14px;
  font-weight: 600;
  color: var(--mgp-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.mgp-nav-sep {
  margin: 0 6px;
  color: var(--mgp-text-muted);
}

.desktop-nav-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile/Desktop nav visibility */
.mgp-nav-mobile-only { display: none; }

@media (max-width: 640px) {
  .mgp-nav-breadcrumb { display: none; }
  .mgp-nav-mobile-only { display: inline-flex; }
  .desktop-nav-items { display: none; }
  .mgp-nav {
    padding: 0 12px;
    gap: 8px;
  }
  .mgp-nav-logo-link {
    gap: 10px;
    min-width: 0;
  }
  .mgp-nav-brand-text {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mgp-nav-actions {
    flex-shrink: 0;
  }
  .mgp-nav-actions > .mgp-coin-display {
    min-width: auto;
    padding: 6px 10px;
    font-size: 12px;
  }
  .mobile-nav-hamburger {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    font-size: 18px;
  }
}

/* Mobile hamburger menu */
.mgp-nav-mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--mgp-surface);
  border-bottom: 1px solid var(--mgp-border);
  padding: 4px 0;
}

.mgp-nav-mobile-menu.open {
  display: flex;
}

@media (min-width: 641px) {
  .mgp-nav-mobile-menu { display: none; }
}

@media (max-width: 640px) {
  .mobile-nav-menu {
    position: fixed;
    top: 64px;
    right: 12px;
    width: min(280px, calc(100vw - 24px));
    background: var(--mgp-surface);
    border: 1px solid var(--mgp-border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    padding: 8px 0;
    z-index: 200;
  }
}

.mgp-nav-mobile-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mgp-text);
  text-decoration: none;
  transition: background 150ms ease;
}

.mgp-nav-mobile-item:hover {
  background: var(--mgp-bg);
}

.mgp-nav-link {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 150ms ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mgp-nav-link:hover {
  opacity: 0.8;
}

.mgp-nav-btn {
  background: var(--mgp-surface);
  color: var(--mgp-text);
  border: 1px solid var(--mgp-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 200ms ease, border-color 200ms ease;
}

.mgp-nav-btn:hover {
  background: var(--mgp-bg);
}

.mgp-home-row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mgp-home-row > a {
  min-width: 0;
}

/* Scroll row */
.mgp-scroll-row {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mgp-scroll-row::-webkit-scrollbar {
  display: none;
}

.mgp-scroll-row > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Section header */
.mgp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mgp-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--mgp-text-heading);
  letter-spacing: -0.01em;
}

.mgp-section-link {
  font-size: 14px;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  transition: color 150ms ease;
}

.mgp-section-link:hover {
  color: #818CF8;
}

/* Marquee bar */
.mgp-marquee {
  background: #0F172A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

[data-theme="dark"] .mgp-marquee {
  background: rgba(15, 23, 42, 0.6);
}

/* Random game FAB */
.mgp-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
  transition: transform 200ms ease, box-shadow 200ms ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mgp-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
}

/* Welcome toast */
.mgp-welcome-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 14px;
  padding: 14px 24px;
  font-size: 15px;
  color: var(--mgp-text);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
  white-space: nowrap;
}

[data-theme="dark"] .mgp-welcome-toast {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
}

.mgp-welcome-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Play streak */
.mgp-streak-popup {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 150;
  background: rgba(245, 158, 11, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #F59E0B;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.mgp-streak-popup.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Related games grid — definitive rules live near top of file (search "mgp-related-section") */

/* Play Next bar */
.mgp-play-next {
  margin-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.mgp-play-next-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mgp-text-heading);
  margin-bottom: 12px;
}

.mgp-play-next-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .mgp-play-next-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .mgp-play-next-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

/* Standardized caption layout used by both Similar To and Play Next tiles */
.mgp-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.mgp-tile-caption {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  z-index: 2;
}
.mgp-tile-caption .mgp-tile-emoji {
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  margin-bottom: 4px;
}
.mgp-tile-caption .mgp-tile-name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 900px) {
  .mgp-tile-caption .mgp-tile-name { font-size: 16px; }
}
.mgp-tile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.mgp-tile-category {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.mgp-tile-play {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Daily challenges placeholder */
.mgp-challenges {
  max-width: 960px;
  margin: 32px auto;
  padding: 0 16px;
}

.mgp-challenge-card {
  padding: 16px;
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

@media (max-width: 640px) {
  .mgp-fab {
    bottom: 16px;
    right: 16px;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 14px;
  }

  .mgp-nav {
    padding: 0 14px;
  }

  .mgp-nav-logo-link {
    gap: 8px;
  }

  .mgp-nav-brand-mark {
    width: 38px;
    height: 38px;
  }

  .mgp-nav-brand-icon {
    width: 30px;
    height: 30px;
  }

  .mgp-nav-brand-text {
    font-size: 1.1rem;
  }

  .mgp-home-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mgp-welcome-toast {
    left: 16px;
    right: 16px;
    transform: translateX(0) translateY(20px);
    white-space: normal;
    text-align: center;
  }

  .mgp-welcome-toast.visible {
    transform: translateX(0) translateY(0);
  }

  /* ── Mobile Game Area Polish ── */
  .mgp-game-wrapper {
    border-radius: 0;
    margin-left: -4px;
    margin-right: -4px;
    width: calc(100% + 8px);
    box-shadow: none;
    border: none;
  }

  .mgp-game-area {
    padding: 0;
    min-height: 70vh;
  }

  .mgp-game-area canvas {
    max-width: 100vw;
    width: 100%;
    height: auto;
  }

  .mgp-score-bar {
    font-size: 12px;
    padding: 6px 10px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .mgp-game-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  .mgp-score-value {
    font-size: 14px;
  }

  .mgp-score-label {
    font-size: 9px;
  }

  /* Touch-friendly buttons on mobile */
  .mgp-btn-primary,
  .mgp-btn-secondary,
  .action-btn,
  .wb-btn {
    min-height: 44px;
    font-size: 15px;
    padding: 12px 20px;
  }

  /* Game over overlay mobile */
  .mgp-game-over-overlay .mgp-game-over-card {
    padding: 24px 16px;
    width: 100%;
    max-width: none;
    margin: 0 8px;
  }

  .mgp-game-over-score {
    font-size: 48px;
  }

  .mgp-game-over-actions {
    flex-direction: column;
    gap: 8px;
  }

  .mgp-game-over-actions button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  /* Controls bar mobile */
  .mgp-controls-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
  }

  .mgp-controls-bar button {
    min-height: 40px;
    font-size: 13px;
  }

  /* Player bar mobile */
  .mgp-player-bar {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* Start overlay mobile */
  .mgp-start-card {
    max-width: none;
    margin: 0 8px;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .mgp-home-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .mgp-home-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==============================================
   STYLES MOVED FROM effects.js
   ============================================== */

/* === Game Over (from celebrateWin / showGameOverOverlay) === */
@keyframes mgp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.mgp-restart-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(59,130,246,0.4);
}

.mgp-restart-btn:active {
  transform: scale(0.97);
}

/* === Minesweeper cascade animation (used by effects.js) === */
.mgp-ms-cascade { animation: mgp-ms-reveal 0.15s ease-out backwards; }
@keyframes mgp-ms-reveal { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }



/* === Mobile Controls (from initGlobalMobileUX) === */
html, body { max-width: 100%; overflow-x: hidden; }
body { min-height: 100vh; min-height: 100dvh; }
canvas, svg, img, video { max-width: 100%; height: auto; }
canvas { touch-action: none; }
input, textarea, select, button { font-size: 16px; }
.mgp-overlay-host { position: relative; }

@media (hover:hover) and (pointer:fine) {
  .mobile-controls,
  #touchControls,
  #touchOverlay,
  .touch-btn,
  #touchLeft,
  #touchRight {
    display: none;
  }
}

@media (pointer: coarse) {
  button, [role="button"], .cat-pill, .speed-btn, a {
    min-height: 42px;
  }
  #nav-container nav {
    padding: 8px 12px;
    min-height: 56px;
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
  }
  #nav-container nav > div {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #nav-container nav a, #nav-container nav button {
    font-size: 13px;
  }
  .mobile-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    pointer-events: none;
    z-index: 22;
  }
  .mobile-controls-cluster {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .mobile-controls-row {
    display: flex;
    gap: 10px;
  }
  .mobile-control-btn,
  .touch-btn {
    width: 56px;
    height: 56px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(15, 23, 42, 0.52);
    color: #F8FAFC;
    font-size: 24px;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 12px 30px rgba(2, 8, 23, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0.66;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  }
  .mobile-control-btn:active,
  .touch-btn:active {
    opacity: 0.9;
    transform: scale(0.96);
  }
  #touchControls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    opacity: 1;
    pointer-events: none;
    z-index: 22;
  }
  #touchControls > *,
  #touchControls button {
    pointer-events: auto;
  }
}

/* ==============================================
   STYLES MOVED FROM cards.js
   ============================================== */

/* === Card Module (from injectCardStyles) === */
.mgp-card {
  width: clamp(56px, 9vw, 80px); height: clamp(80px, 13vw, 112px);
  border-radius: 8px; position: relative; cursor: pointer; flex-shrink: 0;
  perspective: 800px; user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.mgp-card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}
.mgp-card.flipping .mgp-card-inner { transform: rotateY(90deg); }
.mgp-card-face, .mgp-card-back-face {
  position: absolute; inset: 0; border-radius: 8px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mgp-card-face {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  border: 1px solid #E5E7EB;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4px 6px; overflow: hidden;
}
.mgp-card-back-face {
  background: linear-gradient(135deg, #1E3A5F 0%, #2D1B69 50%, #1E3A5F 100%);
  background-size: 100% 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
  border: 2px solid rgba(255,255,255,0.15);
}
.mgp-card-back-face::before {
  content: ''; position: absolute; inset: 0; border-radius: 6px;
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,0.06) 6px, rgba(255,255,255,0.06) 12px);
}
.mgp-card-back-face::after {
  content: ''; position: absolute; inset: 4px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}
.mgp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.mgp-card-selected {
  transform: translateY(-12px);
  box-shadow: 0 0 0 3px #3B82F6, 0 8px 20px rgba(0,0,0,0.2);
}
.mgp-card-playable {
  animation: mgp-card-pulse 1.5s ease-in-out infinite;
}
.mgp-card-dimmed { opacity: 0.6; pointer-events: none; }
@keyframes mgp-card-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
  50% { box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 2px rgba(59,130,246,0.4); }
}

.mgp-card .rank {
  font-family: 'DM Mono', monospace; font-weight: 700;
  font-size: clamp(14px, 2.4vw, 20px); line-height: 1;
}
.mgp-card .suit-symbol {
  font-size: clamp(12px, 2vw, 16px); line-height: 1; margin-top: -1px;
}
.mgp-card .center-pip {
  font-size: clamp(24px, 4vw, 40px); line-height: 1;
}

.mgp-table-surface {
  background: linear-gradient(160deg, #1a5c35 0%, #0d4025 100%);
  border-radius: 16px; position: relative; overflow: hidden;
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.3);
}
.mgp-table-surface::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  background: repeating-conic-gradient(rgba(255,255,255,0.015) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  pointer-events: none;
}

.mgp-hand {
  display: flex; justify-content: center; align-items: flex-end;
  position: relative; min-height: 120px; padding: 8px 0;
}
.mgp-hand .mgp-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, margin-top 0.15s ease;
}

.mgp-opponent-hand {
  display: flex; justify-content: center; gap: -10px; padding: 8px 0;
}
.mgp-opponent-hand .mgp-card { transform: scale(0.7); margin-left: -16px; }
.mgp-opponent-hand .mgp-card:first-child { margin-left: 0; }

.mgp-pile-empty {
  width: clamp(56px, 9vw, 80px); height: clamp(80px, 13vw, 112px);
  border-radius: 8px; border: 2px dashed rgba(255,255,255,0.2);
}

.mgp-deal-in {
  animation: mgp-deal-slide 0.3s ease-out backwards;
}
@keyframes mgp-deal-slide {
  from { opacity: 0; transform: translateY(-40px) rotate(var(--deal-rot, 0deg)) scale(0.7); }
  to { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

/* === COIN ECONOMY === */
.mgp-coin-display {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease;
  user-select: none;
}
.mgp-coin-display:hover { background: rgba(245, 158, 11, 0.2); }
.mgp-coin-display.coin-gain {
  animation: mgp-coin-pulse-green 0.5s ease;
}
.mgp-coin-display.coin-loss {
  animation: mgp-coin-pulse-red 0.5s ease;
}
@keyframes mgp-coin-pulse-green {
  0% { background: rgba(34, 197, 94, 0.3); transform: scale(1.08); }
  100% { background: rgba(245, 158, 11, 0.12); transform: scale(1); }
}
@keyframes mgp-coin-pulse-red {
  0% { background: rgba(239, 68, 68, 0.3); transform: scale(1.08); }
  100% { background: rgba(245, 158, 11, 0.12); transform: scale(1); }
}

.mgp-coin-popup {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 12px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  background: rgba(15, 23, 42, 0.9);
  color: #4ADE80;
  backdrop-filter: blur(8px);
}
.mgp-coin-popup[data-type="bet"],
.mgp-coin-popup[data-type="spend"] {
  color: #F87171;
}
.mgp-coin-popup[data-type="win"] {
  color: #FBBF24;
}
.mgp-coin-popup.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mgp-daily-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  animation: mgp-fade-in 0.3s ease;
}
@keyframes mgp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mgp-daily-popup-card {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  color: #F8FAFC;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: mgp-popup-scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mgp-popup-scale {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.mgp-daily-popup-btn {
  margin-top: 16px;
  padding: 10px 32px;
  background: #3B82F6;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms ease;
}
.mgp-daily-popup-btn:hover { background: #2563EB; }


/* ── Hero Cascade Animation ── */
.hero-fade-title {
  opacity: 0;
  animation: mgp-fade-in-up 0.8s ease forwards;
}

.hero-fade-subtitle {
  opacity: 0;
  animation: mgp-fade-in-up 0.8s ease 0.3s forwards;
}

.hero-fade-search {
  opacity: 0;
  animation: mgp-fade-in-up 0.8s ease 0.6s forwards;
}

@keyframes mgp-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Scroll Reveal ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .scroll-reveal,
  .scroll-reveal.revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Skeleton Shimmer ── */
.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: mgp-shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes mgp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (max-width: 640px) {
  .mgp-pills-scroll::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--mgp-bg, #0C0A1A));
    pointer-events: none;
    z-index: 2;
  }
}

/* ── Start Overlay ── */
.mgp-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mgp-start-card {
  max-width: 380px;
  width: 100%;
  background: var(--mgp-surface);
  border: 1px solid var(--mgp-border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}

.mgp-start-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--mgp-text-heading);
  margin-bottom: 8px;
}

.mgp-start-hint {
  font-size: 14px;
  color: var(--mgp-text-muted);
  margin-bottom: 20px;
}

.mgp-start-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: #059669;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 150ms ease;
}

.mgp-start-btn:hover {
  background: #047857;
}

/* ── Casino 13+ Age Gate ── */
.mgp-age-gate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mgp-age-gate-card {
  max-width: 420px;
  width: 100%;
  background: #fff;
  color: #111;
  border-radius: 16px;
  padding: 32px 28px 24px;
  text-align: center;
  animation: mgp-popup-scale 0.3s ease forwards;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.mgp-age-gate-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin: 0 0 12px;
}

.mgp-age-gate-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 20px;
}

.mgp-age-gate-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  margin-bottom: 20px;
  user-select: none;
}

.mgp-age-gate-checkbox {
  width: 20px;
  height: 20px;
  accent-color: #059669;
  cursor: pointer;
  flex-shrink: 0;
}

.mgp-age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mgp-age-gate-confirm {
  width: 100%;
  height: 48px;
  background: #059669;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms ease, opacity 150ms ease;
}

.mgp-age-gate-confirm:hover:not(:disabled) {
  background: #047857;
}

.mgp-age-gate-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #9CA3AF;
}

.mgp-age-gate-back {
  width: 100%;
  height: 44px;
  background: transparent;
  color: #334155;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid #94A3B8;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 150ms ease, color 150ms ease;
}

.mgp-age-gate-back:hover {
  border-color: #9CA3AF;
  color: #333;
}

.mgp-age-gate-fine {
  font-size: 11px;
  color: #475569;
  margin-top: 16px;
}

.mgp-age-gate-fine a {
  color: #6366F1;
  text-decoration: underline;
}

/* ── Casino 13+ Inline Notice ── */
.age-notice {
  max-width: 960px;
  margin: 8px auto;
  padding: 8px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--mgp-text-muted);
  text-align: center;
}

/* ============================================================
   GLOBAL CONTRAST LAYER  —  must be last so it wins specificity
   ============================================================
   Every text element falls back to the readable --text-* scheme.
   Inline styles still beat these (specificity), but tile / article /
   utility class colors below use !important to override Tailwind's
   text-slate-* / text-gray-* / text-* utilities and any low-contrast
   carryover. Keep this block at the bottom of the file. */

/* ---- Body & Headings -------------------------------------- */
body { color: var(--text-body); }

h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }

p, li, td, th, blockquote, figcaption, label, dd, dt {
  color: var(--text-body);
}

strong, b { color: var(--text-heading); }

small { color: var(--text-secondary); }

a:not([class*="btn"]):not(.mgp-game-tile-link):not(.mgp-related-card):not(.mgp-tile) {
  color: var(--text-link);
}

/* ---- SEO / "How to play" articles ------------------------- */
article,
.mgp-seo-content,
.game-article,
section.seo-content,
.legal-content,
.terms-content,
.privacy-content {
  color: var(--text-body);
}

article h1, article h2, article h3, article h4, article h5, article h6,
.mgp-seo-content h1, .mgp-seo-content h2, .mgp-seo-content h3,
.mgp-seo-content h4, .mgp-seo-content h5, .mgp-seo-content h6,
.legal-content h1, .legal-content h2, .legal-content h3, .legal-content h4,
.terms-content h1, .terms-content h2, .terms-content h3,
.privacy-content h1, .privacy-content h2, .privacy-content h3 {
  color: var(--text-heading);
}

article p, article li, article ul, article ol, article blockquote,
.mgp-seo-content p, .mgp-seo-content li, .mgp-seo-content blockquote,
.legal-content p, .legal-content li,
.terms-content p, .terms-content li,
.privacy-content p, .privacy-content li {
  color: var(--text-body);
}

article a:not([class*="btn"]),
.mgp-seo-content a:not([class*="btn"]),
.legal-content a, .terms-content a, .privacy-content a {
  color: var(--text-link);
}

article strong, article b,
.mgp-seo-content strong, .mgp-seo-content b,
.legal-content strong, .terms-content strong, .privacy-content strong {
  color: var(--text-heading);
}

/* ---- Info / feature cards (homepage "What is MGP", etc.) ---
   NOTE: .mgp-game-tile / .mgp-tile / .mgp-related-card have a dark
   gradient overlay design — their .mgp-tile-name keeps its existing
   white text. Don't clobber it here. */
.info-card, .feature-card,
[class*="info-card"], [class*="feature-card"] {
  color: var(--text-body);
}

.info-card h2, .info-card h3, .info-card h4,
.feature-card h2, .feature-card h3, .feature-card h4 {
  color: var(--text-heading);
}

.info-card p, .info-card li,
.feature-card p, .feature-card li {
  color: var(--text-body);
}

/* ---- Leaderboard / Stats / Shop / Profile ---------------- */
.leaderboard-entry, .stat-card, .shop-item, .profile-stat,
.mgp-leaderboard, .mgp-leaderboard-row, .mgp-stat,
.mgp-shop-item, .mgp-profile-card {
  color: var(--text-body);
}

.leaderboard-entry .name, .stat-card h3, .shop-item h3,
.mgp-leaderboard-name, .mgp-shop-name, .mgp-profile-name {
  color: var(--text-heading);
}

/* ---- NUKE remaining low-contrast Tailwind utilities ------
   .text-slate-300/400/500 and .text-gray-300/400/500 read at
   2.4-3.1:1 on white (fail WCAG AA). Force slate-500 minimum. */
.text-slate-300, .text-slate-400, .text-slate-500,
.text-gray-300,  .text-gray-400,  .text-gray-500,
.text-zinc-300,  .text-zinc-400,  .text-zinc-500,
.text-neutral-300, .text-neutral-400, .text-neutral-500,
.text-stone-300, .text-stone-400, .text-stone-500 {
  color: var(--text-muted) !important;
}

.text-slate-600, .text-slate-700, .text-slate-800, .text-slate-900,
.text-gray-600,  .text-gray-700,  .text-gray-800,  .text-gray-900 {
  color: var(--text-body) !important;
}

h1.text-slate-900, h2.text-slate-900, h3.text-slate-900, h4.text-slate-900,
h1.text-slate-800, h2.text-slate-800, h3.text-slate-800, h4.text-slate-800,
h1.text-gray-900,  h2.text-gray-900,  h3.text-gray-900,  h4.text-gray-900 {
  color: var(--text-heading) !important;
}

/* Restore intended lightness on confirmed dark surfaces only:
   nav and footer in dark mode keep faded grey for hierarchy. */
[data-theme="dark"] #nav-container .text-slate-400,
[data-theme="dark"] #nav-container .text-gray-400,
[data-theme="dark"] #nav-container .text-slate-300,
[data-theme="dark"] #nav-container .text-gray-300,
[data-theme="dark"] #footer-container .text-slate-400,
[data-theme="dark"] #footer-container .text-gray-400,
[data-theme="dark"] #footer-container .text-slate-300,
[data-theme="dark"] #footer-container .text-gray-300 {
  color: #CBD5E1 !important;
}

/* ---- Inline color="#94A3B8" / #CBD5E1 catch-all ---------- */
/* Inline styles win on specificity, but [style*=...] + !important
   matches them. Apply only inside light-context surfaces. */
body:not([data-theme="dark"]) [style*="color:#94A3B8"],
body:not([data-theme="dark"]) [style*="color: #94A3B8"],
[data-theme="dark"] main [style*="color:#94A3B8"],
[data-theme="dark"] main [style*="color: #94A3B8"] {
  color: #64748B !important;
}
body:not([data-theme="dark"]) [style*="color:#CBD5E1"],
body:not([data-theme="dark"]) [style*="color: #CBD5E1"],
[data-theme="dark"] main [style*="color:#CBD5E1"],
[data-theme="dark"] main [style*="color: #CBD5E1"] {
  color: #475569 !important;
}

/* ---- Final safety net: kill ultra-thin opacity on text ---- */
p[style*="opacity:0.3"], p[style*="opacity:0.4"],
span[style*="opacity:0.3"], span[style*="opacity:0.4"],
li[style*="opacity:0.3"], li[style*="opacity:0.4"] {
  opacity: 0.7 !important;
}

/* ============================================================
   REAL PLAYING CARDS — universal face & back rendering
   ------------------------------------------------------------
   Targets every card-game card-class pattern across the site:
     .sp-card / .ht-card / .eu-card / .pt-card / .oh-card /
     .rm-card / .cb-card / .pr-card / .gr-card / .gf-card /
     .ce-card / .hl-card / .bac-card / .vp-card / .ers-card /
     .card-el (solitaire/freecell/spider) / .card (blackjack) /
     .mini-card (texas-holdem)
   Catch-all: any element with 'card' in its class that also
   has .face-up/.face-down (or .facedown) gets the real-card look.
   ============================================================ */

/* Card faces: pristine white, soft inner glow, crisp shadow */
body[data-game-slug] [class*="card"].face-up,
body[data-game-slug] [class*="card"].faceup,
body[data-game-slug] .card-el.face-up,
body[data-game-slug] .card:not(.facedown):not(.face-down) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF9 100%) !important;
  border: 1px solid #D6D3D1 !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 0 0 1px rgba(255,255,255,0.7) inset !important;
  border-radius: 8px !important;
}

/* Red suits — rich casino red, never washed out */
body[data-game-slug] [class*="card"].red,
body[data-game-slug] .card-el.card-red,
body[data-game-slug] .card.red {
  color: #DC2626 !important;
}

/* Black suits — true near-black, not washed slate */
body[data-game-slug] [class*="card"].black,
body[data-game-slug] .card-el.card-black,
body[data-game-slug] .card.black {
  color: #0F172A !important;
}

/* Card backs: royal-blue diamond crosshatch with white border */
body[data-game-slug] [class*="card"].face-down,
body[data-game-slug] [class*="card"].facedown,
body[data-game-slug] .card-el.face-down,
body[data-game-slug] .card.facedown,
body[data-game-slug] .mini-card.facedown {
  background:
    /* Diamond crosshatch (two diagonal stripe layers create diamonds) */
    repeating-linear-gradient( 45deg, rgba(255,255,255,0.14) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.14) 0 1.5px, transparent 1.5px 7px),
    /* Royal blue base with subtle radial sheen */
    radial-gradient(circle at 50% 40%, #2563EB 0%, #1E3A8A 80%, #172554 100%) !important;
  border: 2px solid #FFFFFF !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.28),
    inset 0 0 0 1px #1E3A8A !important;
  border-radius: 8px !important;
  position: relative !important;
}

/* Inner card-back frame — narrow white border just inside */
body[data-game-slug] [class*="card"].face-down::before,
body[data-game-slug] [class*="card"].facedown::before,
body[data-game-slug] .card-el.face-down::before,
body[data-game-slug] .card.facedown::before,
body[data-game-slug] .mini-card.facedown::before {
  content: '' !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 4px !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  background:
    repeating-linear-gradient( 45deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 5px) !important;
  pointer-events: none !important;
}

/* Hide rank/suit text on face-down cards (some games leave text in DOM) */
body[data-game-slug] [class*="card"].face-down > *,
body[data-game-slug] [class*="card"].facedown > *,
body[data-game-slug] .card-el.face-down > *,
body[data-game-slug] .card.facedown > * {
  visibility: hidden !important;
}

/* Standard card aspect ratio reinforcement (2.5:3.5 ≈ 5:7) — only when
   the game hasn't set a height (avoid overriding tight in-hand layouts). */
body[data-game-slug] [class*="card"].face-up:not([style*="height"]),
body[data-game-slug] [class*="card"].face-down:not([style*="height"]) {
  aspect-ratio: 5 / 7;
}

/* ============================================================
   CARD-TABLE POLISH — premium felt table look
   Targets every card-game table by ID. Adds:
     - Subtle SVG felt-noise texture overlay
     - Rich wood-tone outer border (mahogany ring)
     - Stronger inset shadow for table-edge depth
   ============================================================ */
body[data-game-slug] #spades-table,
body[data-game-slug] #hearts-table,
body[data-game-slug] #eu-table,
body[data-game-slug] #pt-table,
body[data-game-slug] #oh-table,
body[data-game-slug] #rm-table,
body[data-game-slug] #cb-table,
body[data-game-slug] #pr-table,
body[data-game-slug] #gr-table {
  /* Wood-grain mahogany ring outside green felt */
  border: 8px solid !important;
  border-image: linear-gradient(135deg, #7c2d12 0%, #92400e 25%, #78350f 50%, #92400e 75%, #7c2d12 100%) 1 !important;
  box-shadow:
    inset 0 4px 18px rgba(0,0,0,0.45),
    inset 0 0 0 2px rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.35) !important;
  position: relative !important;
}

/* Felt noise overlay using inline SVG turbulence */
body[data-game-slug] #spades-table::after,
body[data-game-slug] #hearts-table::after,
body[data-game-slug] #eu-table::after,
body[data-game-slug] #pt-table::after,
body[data-game-slug] #oh-table::after,
body[data-game-slug] #rm-table::after,
body[data-game-slug] #cb-table::after,
body[data-game-slug] #pr-table::after,
body[data-game-slug] #gr-table::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  opacity: 0.18 !important;
  mix-blend-mode: overlay !important;
  border-radius: inherit !important;
  z-index: 0 !important;
}

/* Make sure seats and trick area sit above the felt overlay */
body[data-game-slug] #spades-table > *,
body[data-game-slug] #hearts-table > *,
body[data-game-slug] #eu-table > *,
body[data-game-slug] #pt-table > *,
body[data-game-slug] #oh-table > *,
body[data-game-slug] #rm-table > *,
body[data-game-slug] #cb-table > *,
body[data-game-slug] #pr-table > *,
body[data-game-slug] #gr-table > * {
  position: relative;
  z-index: 1;
}

/* Seat name pills — keep the team color (set inline by each game) but
   add a subtle leather depth so they read as engraved nameplates rather
   than flat tinted divs. We avoid overriding background/color here. */
body[data-game-slug] .sp-seat .sp-name,
body[data-game-slug] .ht-seat .ht-name,
body[data-game-slug] .eu-seat .eu-name,
body[data-game-slug] .pt-seat .pt-name,
body[data-game-slug] .oh-seat .oh-name,
body[data-game-slug] .rm-seat .rm-name,
body[data-game-slug] .cb-seat .cb-name,
body[data-game-slug] .pr-seat .pr-name,
body[data-game-slug] .gr-seat .gr-name {
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 1px 4px rgba(0,0,0,0.35) !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   CASINO POLISH — bigger reels, bigger wheel, deep casino-floor
   wrapper for slot-machine, roulette, blackjack, baccarat,
   video-poker, keno, spin-the-wheel, scratch-card.
   ============================================================ */

/* Casino-floor backdrop on the outer game-wrap white card */
body[data-game-slug="slot-machine"] main > div:first-child,
body[data-game-slug="roulette"] main > div:first-child,
body[data-game-slug="blackjack"] main > div:first-child,
body[data-game-slug="baccarat"] main > div:first-child,
body[data-game-slug="video-poker"] main > div:first-child,
body[data-game-slug="keno"] main > div:first-child,
body[data-game-slug="spin-the-wheel"] main > div:first-child,
body[data-game-slug="scratch-card"] main > div:first-child {
  background:
    radial-gradient(ellipse at 50% 0%, #1e293b 0%, #0f172a 60%, #020617 100%) !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(212,175,55,0.15) !important;
}

/* Casino card titles in gold */
body[data-game-slug="slot-machine"] main > div:first-child h1,
body[data-game-slug="roulette"] main > div:first-child h1,
body[data-game-slug="blackjack"] main > div:first-child h1,
body[data-game-slug="baccarat"] main > div:first-child h1,
body[data-game-slug="video-poker"] main > div:first-child h1,
body[data-game-slug="keno"] main > div:first-child h1,
body[data-game-slug="spin-the-wheel"] main > div:first-child h1,
body[data-game-slug="scratch-card"] main > div:first-child h1 {
  color: #F4D36B !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
  letter-spacing: 0.02em !important;
}

/* Slot machine — bigger cabinet width (NOT touching reel height since
   reel positioning is JS-controlled in 130px increments) */
body[data-game-slug="slot-machine"] #slot-machine {
  max-width: 780px !important;
}
body[data-game-slug="slot-machine"] .slot-window {
  width: clamp(100px, 22vw, 150px) !important;
}
body[data-game-slug="slot-machine"] .reel-symbol {
  font-size: clamp(3.6rem, 9vw, 5.4rem) !important;
}

/* Roulette wheel — bigger and more visible */
body[data-game-slug="roulette"] #wheel-canvas {
  width: clamp(280px, 38vw, 420px) !important;
  height: clamp(280px, 38vw, 420px) !important;
}
body[data-game-slug="roulette"] .wheel-frame {
  padding: 18px !important;
}

/* Bigger spin button on slot + roulette */
body[data-game-slug="slot-machine"] .btn-spin,
body[data-game-slug="roulette"] .btn-spin {
  font-size: 18px !important;
  padding: 14px 44px !important;
  min-width: 200px !important;
}

/* ============================================================
   BOARD / CANVAS / PUZZLE SIZING — fill the new 1100px shell
   so chess pieces, snake, sudoku, etc. are big enough to play
   without squinting on desktop.
   ============================================================ */

/* Chess: 640px -> 720px square that fills the column */
body[data-game-slug="chess"] #chess-board {
  max-width: min(92vw, 720px) !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
}

/* Checkers: 600 -> 680 */
body[data-game-slug="checkers"] #board {
  width: min(92vw, 680px) !important;
}

/* Reversi: was w-fit, force a real size */
body[data-game-slug="reversi"] #board {
  width: min(92vw, 640px) !important;
  aspect-ratio: 1 !important;
}

/* Tic-Tac-Toe: bump 28rem (448px) -> 540px */
body[data-game-slug="tic-tac-toe"] #board {
  width: min(92vw, 540px) !important;
  height: min(92vw, 540px) !important;
}

/* Backgammon: 480 -> 720 */
body[data-game-slug="backgammon"] #board {
  width: min(95vw, 720px) !important;
}

/* 2048: 340 -> 540 */
body[data-game-slug="twenty-forty-eight"] #board {
  max-width: 540px !important;
  width: min(92vw, 540px) !important;
}

/* Sudoku: 378 -> 540 */
body[data-game-slug="sudoku"] #sudoku-grid {
  max-width: 540px !important;
  width: min(92vw, 540px) !important;
}

/* Word Search: 320 -> 540 */
body[data-game-slug="word-search"] #board {
  max-width: 540px !important;
  width: min(92vw, 540px) !important;
}

/* Snake: 400px canvas -> CSS-scale to 600px so the snake reads at distance */
body[data-game-slug="snake"] #gameCanvas {
  width: min(94vw, 600px) !important;
  height: min(94vw, 600px) !important;
  max-width: 600px !important;
  image-rendering: pixelated !important;
}

/* Four-in-a-row: 450 -> 620 (canvas CSS-scaled) */
body[data-game-slug="four-in-a-row"] #goban {
  width: min(94vw, 620px) !important;
  height: min(94vw, 620px) !important;
  max-width: 620px !important;
}

/* Generic catch-all for any game canvas under a game-page that's
   smaller than 360px wide — scale it to fill at least 480px. */
body[data-game-slug] canvas[width][height] {
  max-width: 100%;
}

/* Mobile: respect viewport — let widths cap at viewport-2px */
@media (max-width: 640px) {
  body[data-game-slug] #board,
  body[data-game-slug] #chess-board,
  body[data-game-slug] #sudoku-grid,
  body[data-game-slug] #gameCanvas,
  body[data-game-slug] #goban {
    max-width: calc(100vw - 12px) !important;
  }
}

/* =====================================================================
   NUCLEAR CONTRAST LAYER  (Task 1 — Apr 2026)
   ---------------------------------------------------------------------
   Catches every white / light-colored container in dark mode and forces
   dark text on its descendants. Defends against:
   - inline style="background:#fff" panels in game UIs
   - .game-info / .game-controls / .panel / .scoreboard light cards
   - Tailwind .bg-white .bg-slate-50 .bg-gray-50 utility classes
   - Inline color:#94A3B8 / #9CA3AF / #A1A1AA / #CBD5E1 grey text on light bg
   Rules: never light-on-light, never dark-on-dark.
   ===================================================================== */

/* ---- 1. Any element with a hard-coded LIGHT background is a "light island" ---- */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:#F8FAFC"],
[data-theme="dark"] [style*="background: #F8FAFC"],
[data-theme="dark"] [style*="background:#F1F5F9"],
[data-theme="dark"] [style*="background: #F1F5F9"],
[data-theme="dark"] [style*="background:#FAFAF9"],
[data-theme="dark"] [style*="background:#F9FAFB"],
[data-theme="dark"] [style*="background:#F3F4F6"],
[data-theme="dark"] [style*="background:#E5E7EB"],
[data-theme="dark"] [style*="background:#FAFBFC"],
[data-theme="dark"] [style*="background:#FEFEFE"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background:#fefefe"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-stone-50,
[data-theme="dark"] .bg-zinc-50,
[data-theme="dark"] .bg-neutral-50 {
  color: #1E293B !important;
}

/* ---- 2. Headings / labels / small text inside those light islands ---- */
[data-theme="dark"] [style*="background:#fff"] h1,
[data-theme="dark"] [style*="background:#fff"] h2,
[data-theme="dark"] [style*="background:#fff"] h3,
[data-theme="dark"] [style*="background:#fff"] h4,
[data-theme="dark"] [style*="background:#fff"] h5,
[data-theme="dark"] [style*="background:#fff"] h6,
[data-theme="dark"] [style*="background: #fff"] h1,
[data-theme="dark"] [style*="background: #fff"] h2,
[data-theme="dark"] [style*="background: #fff"] h3,
[data-theme="dark"] [style*="background: #fff"] h4,
[data-theme="dark"] [style*="background: #fff"] h5,
[data-theme="dark"] [style*="background: #fff"] h6,
[data-theme="dark"] [style*="background:white"] h1,
[data-theme="dark"] [style*="background:white"] h2,
[data-theme="dark"] [style*="background:white"] h3,
[data-theme="dark"] [style*="background:white"] h4,
[data-theme="dark"] [style*="background:white"] h5,
[data-theme="dark"] [style*="background:white"] h6,
[data-theme="dark"] [style*="background-color:#fff"] h1,
[data-theme="dark"] [style*="background-color:#fff"] h2,
[data-theme="dark"] [style*="background-color:#fff"] h3,
[data-theme="dark"] [style*="background-color:#fff"] h4,
[data-theme="dark"] [style*="background-color:#fff"] h5,
[data-theme="dark"] [style*="background-color:#fff"] h6,
[data-theme="dark"] [style*="background:#F8FAFC"] h1,
[data-theme="dark"] [style*="background:#F8FAFC"] h2,
[data-theme="dark"] [style*="background:#F8FAFC"] h3,
[data-theme="dark"] [style*="background:#F1F5F9"] h1,
[data-theme="dark"] [style*="background:#F1F5F9"] h2,
[data-theme="dark"] [style*="background:#F1F5F9"] h3,
[data-theme="dark"] .bg-white h1,
[data-theme="dark"] .bg-white h2,
[data-theme="dark"] .bg-white h3,
[data-theme="dark"] .bg-white h4,
[data-theme="dark"] .bg-white h5,
[data-theme="dark"] .bg-white h6,
[data-theme="dark"] .bg-slate-50 h1,
[data-theme="dark"] .bg-slate-50 h2,
[data-theme="dark"] .bg-slate-50 h3 {
  color: #0F172A !important;
}

/* Body / paragraph / span / label / li inside light islands → dark body text.
   Use :not([style*="color"]) so we don't override per-element inline colors
   that the game author intentionally set (e.g. red for errors). */
[data-theme="dark"] [style*="background:#fff"] p:not([style*="color"]),
[data-theme="dark"] [style*="background:#fff"] span:not([style*="color"]),
[data-theme="dark"] [style*="background:#fff"] label:not([style*="color"]),
[data-theme="dark"] [style*="background:#fff"] li:not([style*="color"]),
[data-theme="dark"] [style*="background:#fff"] td:not([style*="color"]),
[data-theme="dark"] [style*="background:#fff"] th:not([style*="color"]),
[data-theme="dark"] [style*="background:#fff"] div:not([style*="color"]),
[data-theme="dark"] [style*="background: #fff"] p:not([style*="color"]),
[data-theme="dark"] [style*="background: #fff"] span:not([style*="color"]),
[data-theme="dark"] [style*="background: #fff"] label:not([style*="color"]),
[data-theme="dark"] [style*="background: #fff"] li:not([style*="color"]),
[data-theme="dark"] [style*="background: #fff"] div:not([style*="color"]),
[data-theme="dark"] [style*="background:white"] p:not([style*="color"]),
[data-theme="dark"] [style*="background:white"] span:not([style*="color"]),
[data-theme="dark"] [style*="background:white"] label:not([style*="color"]),
[data-theme="dark"] [style*="background:white"] li:not([style*="color"]),
[data-theme="dark"] [style*="background:white"] div:not([style*="color"]),
[data-theme="dark"] [style*="background-color:#fff"] p:not([style*="color"]),
[data-theme="dark"] [style*="background-color:#fff"] span:not([style*="color"]),
[data-theme="dark"] [style*="background-color:#fff"] label:not([style*="color"]),
[data-theme="dark"] [style*="background-color:#fff"] li:not([style*="color"]),
[data-theme="dark"] [style*="background-color:#fff"] div:not([style*="color"]),
[data-theme="dark"] [style*="background:#F8FAFC"] p:not([style*="color"]),
[data-theme="dark"] [style*="background:#F8FAFC"] span:not([style*="color"]),
[data-theme="dark"] [style*="background:#F8FAFC"] label:not([style*="color"]),
[data-theme="dark"] [style*="background:#F8FAFC"] div:not([style*="color"]),
[data-theme="dark"] [style*="background:#F1F5F9"] p:not([style*="color"]),
[data-theme="dark"] [style*="background:#F1F5F9"] span:not([style*="color"]),
[data-theme="dark"] [style*="background:#F1F5F9"] label:not([style*="color"]),
[data-theme="dark"] .bg-white p:not([style*="color"]),
[data-theme="dark"] .bg-white span:not([style*="color"]),
[data-theme="dark"] .bg-white label:not([style*="color"]),
[data-theme="dark"] .bg-white li:not([style*="color"]),
[data-theme="dark"] .bg-white div:not([style*="color"]),
[data-theme="dark"] .bg-slate-50 p:not([style*="color"]),
[data-theme="dark"] .bg-slate-50 span:not([style*="color"]),
[data-theme="dark"] .bg-slate-50 label:not([style*="color"]),
[data-theme="dark"] .bg-slate-50 div:not([style*="color"]),
[data-theme="dark"] .bg-gray-50 p:not([style*="color"]),
[data-theme="dark"] .bg-gray-50 span:not([style*="color"]),
[data-theme="dark"] .bg-gray-50 div:not([style*="color"]) {
  color: #1E293B !important;
}

/* ---- 3. The grey "muted/secondary" inline colors that game authors used
   on top of light cards. Re-map them to a dark-but-muted slate so they
   stay readable on white but don't disappear. ---- */
[data-theme="dark"] [style*="background:#fff"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#A1A1AA"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#CBD5E1"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#D1D5DB"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#E2E8F0"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#a1a1aa"],
[data-theme="dark"] [style*="background:#fff"] [style*="color:#cbd5e1"],
[data-theme="dark"] [style*="background: #fff"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="background: #fff"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="background: #fff"] [style*="color:#CBD5E1"],
[data-theme="dark"] [style*="background:white"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="background:white"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="background:white"] [style*="color:#CBD5E1"],
[data-theme="dark"] [style*="background-color:#fff"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="background-color:#fff"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="background-color:#fff"] [style*="color:#CBD5E1"],
[data-theme="dark"] [style*="background:#F8FAFC"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="background:#F8FAFC"] [style*="color:#CBD5E1"],
[data-theme="dark"] [style*="background:#F1F5F9"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="background:#F1F5F9"] [style*="color:#CBD5E1"],
[data-theme="dark"] .bg-white [style*="color:#94A3B8"],
[data-theme="dark"] .bg-white [style*="color:#9CA3AF"],
[data-theme="dark"] .bg-white [style*="color:#A1A1AA"],
[data-theme="dark"] .bg-white [style*="color:#CBD5E1"],
[data-theme="dark"] .bg-white [style*="color:#D1D5DB"],
[data-theme="dark"] .bg-white [style*="color:#E2E8F0"] {
  color: #475569 !important; /* slate-600 = WCAG AA on white */
}

/* ---- 4. Common game UI containers that AREN'T white but can still
   end up with light-grey text from the dark theme cascade. Force a
   neutral readable color for known game-info / scoreboard panels. ---- */
body[data-game-slug] .game-info,
body[data-game-slug] .game-info *,
body[data-game-slug] .game-controls,
body[data-game-slug] .game-controls *,
body[data-game-slug] .game-controls-info,
body[data-game-slug] .game-controls-info *,
body[data-game-slug] .scoreboard:not([style*="background"]),
body[data-game-slug] .panel:not([style*="background"]) {
  color: var(--text-on-card, #1E293B);
}

/* If a game-info card explicitly draws on a dark background, override
   back to light text (these slugs have dark scoreboards) */
body[data-game-slug="spades"] .game-info,
body[data-game-slug="hearts"] .game-info,
body[data-game-slug="blackjack"] .game-info,
body[data-game-slug="poker"] .game-info,
body[data-game-slug="texas-holdem"] .game-info,
body[data-game-slug="video-poker"] .game-info,
body[data-game-slug="baccarat"] .game-info,
body[data-game-slug="roulette"] .game-info,
body[data-game-slug="slot-machine"] .game-info {
  color: #F1F5F9;
}

/* ---- 5. Form labels & inputs inside light cards in dark mode ---- */
[data-theme="dark"] [style*="background:#fff"] input[type="text"],
[data-theme="dark"] [style*="background:#fff"] input[type="number"],
[data-theme="dark"] [style*="background:#fff"] input[type="email"],
[data-theme="dark"] [style*="background:#fff"] textarea,
[data-theme="dark"] [style*="background:#fff"] select,
[data-theme="dark"] .bg-white input[type="text"],
[data-theme="dark"] .bg-white input[type="number"],
[data-theme="dark"] .bg-white input[type="email"],
[data-theme="dark"] .bg-white textarea,
[data-theme="dark"] .bg-white select {
  color: #0F172A !important;
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
}
[data-theme="dark"] [style*="background:#fff"] input::placeholder,
[data-theme="dark"] [style*="background:#fff"] textarea::placeholder,
[data-theme="dark"] .bg-white input::placeholder,
[data-theme="dark"] .bg-white textarea::placeholder {
  color: #64748B !important;
}

/* ---- 6. Generic "white pill" detector: any element whose computed
   background is white and contains text — bump the text to dark slate.
   This catches Tailwind's preflight `<button>` / `<input>` defaults too. */
[data-theme="dark"] button[style*="background:#fff"],
[data-theme="dark"] button[style*="background: #fff"],
[data-theme="dark"] button[style*="background:white"],
[data-theme="dark"] .bg-white button:not([style*="background"]) {
  color: #1E293B !important;
}

/* ---- 7. Inverse case: DARK-bg islands need LIGHT text on descendants
   (any theme). Catches "dark-on-dark" failures when game UI has a dark
   panel inside the light page wrap. ---- */
[style*="background:#0f172a"]:not([style*="color"]),
[style*="background: #0f172a"]:not([style*="color"]),
[style*="background:#0F172A"]:not([style*="color"]),
[style*="background: #0F172A"]:not([style*="color"]),
[style*="background:#1e293b"]:not([style*="color"]),
[style*="background: #1e293b"]:not([style*="color"]),
[style*="background:#1E293B"]:not([style*="color"]),
[style*="background:#020617"]:not([style*="color"]),
[style*="background:#111827"]:not([style*="color"]),
[style*="background:#1f2937"]:not([style*="color"]),
.bg-slate-900,
.bg-slate-800,
.bg-gray-900,
.bg-gray-800,
.bg-zinc-900,
.bg-zinc-800,
.bg-neutral-900,
.bg-stone-900 {
  color: #F1F5F9;
}

/* =====================================================================
   HOT BADGE  (Task 5 — Apr 2026)
   Top-20 most-recognizable games get a fiery orange-to-tomato badge
   on the homepage tiles. Pulses gently to grab attention.
   ===================================================================== */
.mgp-badge-hot {
  background: linear-gradient(135deg, #FF4500 0%, #FF6347 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 8px rgba(255,69,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: hotPulse 2s ease-in-out infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(255,69,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
  50%      { box-shadow: 0 2px 14px rgba(255,69,0,0.85), 0 0 18px rgba(255,99,71,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
}

/* And their descendants without explicit color */
[style*="background:#0f172a"] p:not([style*="color"]),
[style*="background:#0f172a"] span:not([style*="color"]),
[style*="background:#0f172a"] h1:not([style*="color"]),
[style*="background:#0f172a"] h2:not([style*="color"]),
[style*="background:#0f172a"] h3:not([style*="color"]),
[style*="background:#0f172a"] li:not([style*="color"]),
[style*="background:#0f172a"] label:not([style*="color"]),
[style*="background:#0F172A"] p:not([style*="color"]),
[style*="background:#0F172A"] span:not([style*="color"]),
[style*="background:#0F172A"] h1:not([style*="color"]),
[style*="background:#0F172A"] h2:not([style*="color"]),
[style*="background:#0F172A"] h3:not([style*="color"]),
[style*="background:#1e293b"] p:not([style*="color"]),
[style*="background:#1e293b"] span:not([style*="color"]),
[style*="background:#1e293b"] h1:not([style*="color"]),
[style*="background:#1e293b"] h2:not([style*="color"]),
[style*="background:#1e293b"] h3:not([style*="color"]),
.bg-slate-900 p:not([style*="color"]),
.bg-slate-900 span:not([style*="color"]),
.bg-slate-900 h1:not([style*="color"]),
.bg-slate-900 h2:not([style*="color"]),
.bg-slate-900 h3:not([style*="color"]),
.bg-gray-900 p:not([style*="color"]),
.bg-gray-900 span:not([style*="color"]),
.bg-gray-900 h1:not([style*="color"]),
.bg-gray-900 h2:not([style*="color"]),
.bg-gray-900 h3:not([style*="color"]) {
  color: #F1F5F9;
}