/* PlayAtOffice.com - Main Stylesheet */
/* Eye-calming palette: whites, soft greys, professional accents */

/* ============================================ */
/* MOBILE-FIRST RESPONSIVE FOUNDATION */
/* ============================================ */

/* CSS Variables - Single Source of Truth */
:root {
  /* Light Mode Colors (Default) */
  --color-bg-primary: #d5d5d5;
  --color-bg-secondary: #f0f0f0;
  --color-bg-tertiary: #d5d5d5;
  --color-text-primary: #2d3436;
  --color-text-secondary: #636e72;
  --color-text-light: #b2bec3;
  --color-accent: #6c5ce7;
  --color-accent-light: #a29bfe;
  --color-accent-dark: #5f3dc4;
  --color-border: #e5e5e5;
  --color-border-light: #f0f0f0;
  --color-card-bg: #ffffff;
  --color-card-border: #f0f0f0;
  
  /* Game-specific colors */
  --color-solitaire-bg: #ffffff;
  --color-2048-bg: #b2bec3;
  --color-minesweeper-bg: #d5dbdb;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Layout */
  --dashboard-width: 960px;
}

/* Dark Mode Colors - Softer Dark (Cursor.com style) */
body.dark-mode {
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #1e1e1e;
  --color-bg-tertiary: #252525;
  --color-text-primary: #ffffff;
  --color-text-secondary: #cccccc;
  --color-text-light: #999999;
  --color-accent: #6c5ce7;
  --color-accent-light: #8b7ff0;
  --color-accent-dark: #5f3dc4;
  --color-border: #333333;
  --color-border-light: #2a2a2a;
  --color-card-bg: #252525;
  --color-card-border: #333333;
  
  /* Game-specific colors for dark mode */
  --color-solitaire-bg: #1a1a1a;
  --color-2048-bg: #1e1e1e;
  --color-minesweeper-bg: #1a1a1a;
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* HTML - FOUT/FOUC Prevention */
html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  background-color: var(--color-bg-primary) !important;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
}

html.loaded {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--transition-base);
}

/* Body - Consolidated */
body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary) !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Touch-friendly sizing - Minimum 44x44px for iOS */
button, a.btn, .btn, input[type="button"], input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
}

/* Prevent zoom on input focus (iOS) */
input, select, textarea {
  font-size: 16px !important;
}

/* Better touch feedback */
button:active, .btn:active, .game-card:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* Prevent pull-to-refresh during game */
body.game-active {
  overscroll-behavior-y: contain;
}

/* Safe area for notch devices (iPhone X+) */
@supports (padding: max(0px)) {
  .header-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  
  .main-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Light Mode - Uniform background color */
body:not(.dark-mode):not([data-theme="dark"]) {
  background-color: var(--color-bg-primary);
}

body:not(.dark-mode):not([data-theme="dark"]) main,
body:not(.dark-mode):not([data-theme="dark"]) .main-container,
body:not(.dark-mode):not([data-theme="dark"]) #main-content {
  background-color: var(--color-bg-primary);
}

/* Ensure main element has uniform background */
main {
  background-color: var(--color-bg-primary);
}

/* Dark Mode - Softer Dark Theme */
body.dark-mode,
body[data-theme="dark"] {
  background-color: #1a1a1a !important;
  color: #ffffff;
}

body.dark-mode header,
body[data-theme="dark"] header,
.dark-mode header {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #333333;
}

body.dark-mode main,
body[data-theme="dark"] main,
.dark-mode main {
  background-color: #1a1a1a !important;
}

body.dark-mode footer,
body[data-theme="dark"] footer,
.dark-mode footer {
  background-color: #1a1a1a !important;
  border-top: 1px solid #333333;
  color: #ffffff;
}

body.dark-mode .game-card-description,
body[data-theme="dark"] .game-card-description,
.dark-mode .game-card-description {
  color: #cccccc !important;
}

/* Dark Mode - Text Colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4 {
  color: #ffffff !important;
}

body.dark-mode p,
body[data-theme="dark"] p {
  color: #cccccc !important;
}

/* Dark Mode - Buttons */
body.dark-mode button:not(.dashboard-btn-new-game):not(.difficulty-btn):not(.game-difficulty-btn):not(.btn-new-game):not(.btn-undo):not(.btn-sound):not(.btn-flag):not(.chess-sound-btn):not(.backgammon-sound-btn),
body[data-theme="dark"] button:not(.dashboard-btn-new-game):not(.difficulty-btn):not(.game-difficulty-btn):not(.btn-new-game):not(.btn-undo):not(.btn-sound):not(.btn-flag):not(.chess-sound-btn):not(.backgammon-sound-btn) {
  background-color: #252525;
  color: #ffffff;
  border-color: #333333;
}

/* These rules are handled by specific dashboard button rules below */
/* Removed general dark mode overrides for game-difficulty-btn */

/* Dark Mode - Language Selector */
body.dark-mode .language-switcher,
body[data-theme="dark"] .language-switcher {
  background: #1a1a1a !important;
}

body.dark-mode .lang-btn,
body[data-theme="dark"] .lang-btn {
  background: transparent !important;
  color: #cccccc !important;
}

body.dark-mode .lang-btn:hover,
body[data-theme="dark"] .lang-btn:hover {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

body.dark-mode .lang-btn.active,
body[data-theme="dark"] .lang-btn.active {
  background: #667eea !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
}

/* Dark Mode - Links */
body.dark-mode a,
body[data-theme="dark"] a {
  color: #8b9aff;
}

body.dark-mode a:hover,
body[data-theme="dark"] a:hover {
  color: #a5b4ff;
}

/* Dark Mode - Input fields */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
  background-color: #252525 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
}

/* Dark Mode - Scrollbar */
body.dark-mode ::-webkit-scrollbar,
body[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  background-color: #1a1a1a;
}

body.dark-mode ::-webkit-scrollbar-thumb,
body[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #333333;
  border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #444444;
}

/* Dark Mode - Containers */
body.dark-mode .container,
body[data-theme="dark"] .container,
body.dark-mode .main-container,
body[data-theme="dark"] .main-container {
  background-color: #1a1a1a !important;
}

/* ============================================ */
/* How to Play Pages - Play Button */
/* ============================================ */
.how-to-content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* SEO-optimized How to Play pages */
.how-to-page-container {
  position: relative;
  z-index: 1; /* Ensure content is above any game elements */
}

.how-to-header {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.how-to-header h1 {
  color: var(--color-accent);
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  line-height: 1.2;
}

.how-to-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.how-to-main-content {
  /* Ensure all text is selectable for SEO and AdSense */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}

.how-to-section {
  margin-bottom: var(--spacing-xl);
}

.how-to-section h2 {
  color: var(--color-accent);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.how-to-section h3 {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.how-to-section h4 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

/* Ensure all text elements in how-to pages are selectable */
.how-to-content p,
.how-to-content ul,
.how-to-content ol,
.how-to-content li,
.how-to-content h1,
.how-to-content h2,
.how-to-content h3,
.how-to-content h4,
.how-to-content h5,
.how-to-content h6,
.how-to-section,
.how-to-main-content,
.how-to-header {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

.how-to-section p {
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.how-to-section p.lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  font-weight: 500;
  margin-bottom: var(--spacing-lg);
}

.how-to-section ul {
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
}

.how-to-section li {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.how-to-section strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Play Button Container */
/* Play Button Container - IDENTICAL TO GAME CARD BUTTONS */
.play-button-container {
  display: flex;
  justify-content: center;
  margin: 3rem 0 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--color-border);
}

/* Purple Play Button - IDENTICAL TO GAME CARD BUTTONS */
.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 1.25rem 3rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  text-decoration: none;
  font-family: var(--font-family);
  min-width: 280px;
}

.play-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  background: linear-gradient(135deg, #5568d3 0%, #667eea 100%);
}

.play-button:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Play Button Icon */
.play-button::before {
  content: '🎮';
  font-size: 1.5rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Responsive Play Button */
@media (max-width: 768px) {
  .play-button {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: 100%;
    min-width: auto;
    max-width: 100%;
  }
  
  .play-button::before {
    font-size: 1.25rem;
  }
  
  .how-to-content {
    padding: var(--spacing-md);
  }
  
  .how-to-section {
    margin-bottom: var(--spacing-lg);
  }
}

/* Dark Mode Game-Specific Styles - Softer Dark */
body.dark-mode .solitaire-board {
  background: #1a1a1a !important;
  border: 1px solid #333333;
}

body.dark-mode .grid-2048-container {
  background: #1e1e1e !important;
  border-color: #333333 !important;
}

/* Minesweeper theme styles are now handled by CSS variables in addMinesweeperStyles() */
/* These overrides ensure compatibility with existing dark mode system */
body.dark-mode .minesweeper-grid-container {
  background: var(--minesweeper-grid-bg, #1a1a1a) !important;
}

body.dark-mode .minesweeper-cell.hidden,
body.dark-mode .minesweeper-cell.flagged {
  background: var(--minesweeper-cell-normal, #2a2a2a) !important;
  border-color: var(--minesweeper-border, #333333) !important;
}

body.dark-mode .minesweeper-cell.revealed {
  background: var(--minesweeper-cell-revealed, #1a1a1a) !important;
}

body.dark-mode .game-card {
  background: #252525 !important;
  border-color: #333333;
}

body.dark-mode .game-card:hover {
  background: #2a2a2a !important;
  border-color: #3a3a3a;
}

body.dark-mode .solitaire-dashboard,
body.dark-mode .dashboard-item {
  background: #252525 !important;
  border-color: #333333;
}


/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

.lead-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

/* Separator line for "FREE ONLINE GAMES" heading on home page */
.home-page h2.text-center.mb-lg {
  position: relative;
  padding-top: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  border-top: 2px solid var(--color-border);
}

/* Remove top divider line from home page header and refine spacing */
.home-page header.text-center {
  border-bottom: none !important;
  margin-bottom: var(--spacing-lg);
  padding-bottom: 0;
}

.home-page header.text-center p {
  border-bottom: none !important;
}

.home-page header.text-center p:last-child {
  margin-bottom: var(--spacing-md);
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
}

/* Header - Sticky */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  display: block !important;
  visibility: visible !important;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.logo:hover {
  color: var(--color-accent);
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.44em;
}

/* Header Navigation */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  padding: 8px 12px;
  background: var(--color-bg-primary);
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  min-width: 40px;
  min-height: 36px;
  height: 36px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Theme Toggle Button on Game Pages - Same size as language buttons */
.header-nav:has(.header-nav-buttons) .theme-toggle-btn {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  min-height: 36px;
  height: 36px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

/* Language Switcher - Modern & Simple */
.language-switcher {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px;
  background: var(--color-bg-primary);
  border-radius: 10px;
}

.lang-btn {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family);
  min-width: 40px;
  min-height: 36px;
  height: 36px;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.lang-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.lang-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
}

/* Header Navigation Buttons */
.header-nav-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}

.header-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-family: var(--font-family);
  cursor: pointer;
  border: 1px solid transparent;
}

.header-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.header-btn-secondary {
  background: var(--color-bg-primary);
  border: none;
  color: var(--color-text-secondary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  color: var(--color-text-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.header-btn-primary {
  background: var(--color-bg-primary);
  border: none;
  color: var(--color-text-secondary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-btn-primary:hover {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  color: var(--color-text-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.header-btn-primary span {
  font-size: calc(var(--font-size-sm) * 0.9);
}

.header-btn:active {
  transform: translateY(0);
}

/* Main Container */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* Game pages - allow content to grow and push footer down */
body:has(#minesweeper-dashboard) .main-container,
body:has(#game-2048-dashboard) .main-container,
body:has(#solitaire-dashboard) .main-container,
body:has(.backgammon-root) .main-container,
body:has(.chess-root) .main-container {
  flex: 1;
  min-height: 0;
  overflow: visible;
  padding-bottom: var(--spacing-lg);
  padding-top: 5px;
}

/* 2048 - Allow content to scroll and avoid footer overlap */
body:has(#game-2048-dashboard) .main-container {
  padding-bottom: var(--spacing-xl);
  overflow: auto;
}

body:has(#game-2048-dashboard) .game-container {
  padding-bottom: var(--spacing-lg);
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

body:has(#game-2048-dashboard) .game-container header {
  margin-bottom: 0.5rem !important;
  margin-top: 0;
  flex-shrink: 0;
}

body:has(#game-2048-dashboard) .game-container h1 {
  margin-bottom: 0.5rem;
  font-size: calc(var(--font-size-3xl) * 0.9);
  flex-shrink: 0;
}

body:has(#game-2048-dashboard) #game-2048-dashboard {
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  flex-shrink: 0;
}

body:has(#game-2048-dashboard) .grid-2048-container {
  flex: 1;
  min-height: 0;
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Footer should be visible on 2048 page */
body:has(#game-2048-dashboard) .footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* Minimize margin-top of Minesweeper title */
body:has(#minesweeper-dashboard) .game-container header.mb-lg,
body:has(#minesweeper-dashboard) .game-container header {
  margin-bottom: 0.5rem !important;
  margin-top: 0;
}

body:has(#minesweeper-dashboard) .game-container h1 {
  margin-bottom: 0.5rem;
  font-size: calc(var(--font-size-3xl) * 0.9);
}

@media (max-width: 1024px) {
  body:has(#minesweeper-dashboard) .game-container header {
    margin-bottom: 0.25rem !important;
  }
  
  body:has(#minesweeper-dashboard) .game-container h1 {
    margin-bottom: 0.25rem;
    font-size: calc(var(--font-size-2xl) * 0.9);
  }
}

/* Game Grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.game-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-base);
  cursor: pointer;
  text-align: center;
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.game-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--color-accent-light);
  text-decoration: none;
  color: inherit;
}

.game-card-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.game-card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.game-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.game-card-disabled {
  position: relative;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

.game-card-disabled:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}

.coming-soon-ribbon {
  position: absolute;
  top: 15px;
  right: -35px;
  background: var(--color-accent);
  color: white;
  padding: 5px 45px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 10;
  white-space: nowrap;
  line-height: 1.3;
  min-width: 120px;
  text-align: center;
}

/* Game header row (title + action button). */
.game-container .game-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.game-container .game-header-row h1 {
  margin: 0;
}

/* Difficulty buttons in header */
.game-difficulty-buttons {
  display: flex !important;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  flex-wrap: wrap;
  visibility: visible !important;
}

.game-difficulty-btn {
  flex: 0 0 auto;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  min-height: 36px;
  height: 36px;
  /* Colors are defined in the main dashboard buttons section below */
}

/* Chess button styles (used by chess and backgammon) */
.chess-primary,
.chess-secondary {
  border-radius: var(--radius-md);
  padding: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-family);
  border: 1px solid;
}

.chess-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.chess-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.chess-secondary {
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.chess-secondary:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-light);
  color: var(--color-accent);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-family);
}

.btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.btn-secondary:hover {
  background: var(--color-accent);
  color: white;
}

/* Cookie Consent Modal */
.cookie-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-xl);
  z-index: 2000;
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.cookie-modal.show {
  transform: translateY(0);
}

.cookie-modal-content {
  max-width: 1200px;
  margin: 0 auto;
}

.cookie-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
}

.cookie-modal-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.cookie-modal-message {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.cookie-modal-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.cookie-settings {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.cookie-setting-item {
  margin-bottom: var(--spacing-md);
}

.cookie-setting-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.cookie-setting-title {
  font-weight: 500;
  color: var(--color-text-primary);
}

.cookie-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cookie-toggle.active {
  background: var(--color-accent);
}

.cookie-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--color-bg-secondary);
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.cookie-toggle.active .cookie-toggle-slider {
  transform: translateX(20px);
}

.cookie-setting-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Footer - Sticky at bottom */
.footer {
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  padding: calc(var(--spacing-xl) * 0.5);
  margin-top: auto;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: calc(var(--font-size-sm) * 0.75);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  display: block !important;
  visibility: visible !important;
}

.footer p {
  margin: var(--spacing-xs) 0;
}

.footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer a:hover {
  color: var(--color-accent);
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.hidden {
  display: none;
}

/* ============================================ */
/* MOBILE HAMBURGER MENU */
/* ============================================ */

/* Hamburger Button - Hidden on Desktop */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  gap: 5px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(108, 92, 231, 0.2);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  margin: 0;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Game Intro Section - SEO content with border and square corners */
.game-intro-section {
  width: 100%;
  max-width: var(--dashboard-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-sizing: border-box;
}

body.dark-mode .game-intro-section {
  background: #1a1a1a;
  border-color: #333333;
  box-sizing: border-box;
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: var(--color-bg-secondary);
  z-index: 1999;
  overflow-y: auto;
  overflow-x: hidden;
  transition: right 0.3s ease;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
}

.mobile-menu.active {
  right: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-menu-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}

.mobile-menu-close:hover {
  background: var(--color-bg-tertiary);
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

.mobile-menu-content {
  padding: var(--spacing-md);
}

.mobile-menu-section {
  margin-bottom: var(--spacing-xl);
}

.mobile-menu-section h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.mobile-menu-link {
  display: block;
  padding: var(--spacing-md);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  font-size: var(--font-size-base);
  background: var(--color-bg-primary);
  border: 1px solid transparent;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
  background: var(--color-bg-tertiary);
  color: var(--color-accent);
  border-color: var(--color-accent-light);
  transform: translateX(4px);
}

.mobile-menu-games {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xs);
}

.mobile-menu-games .mobile-menu-link {
  text-align: center;
  font-weight: 500;
}

/* Mobile Language Switcher */
.mobile-menu-language-switcher {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
}

.mobile-lang-btn {
  padding: var(--spacing-sm);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  font-family: var(--font-family);
}

.mobile-lang-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-light);
  color: var(--color-text-primary);
}

.mobile-lang-btn.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
}

/* Mobile Theme Toggle */
.mobile-menu-theme-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.mobile-menu-theme-toggle span {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-primary);
}

.mobile-theme-toggle-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-text-primary);
}

.mobile-theme-toggle-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-light);
  transform: scale(1.05);
}

.mobile-theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}

.mobile-theme-toggle-btn .theme-icon-dark {
  display: none;
}

body.dark-mode .mobile-theme-toggle-btn .theme-icon-light,
body[data-theme="dark"] .mobile-theme-toggle-btn .theme-icon-light {
  display: none;
}

body.dark-mode .mobile-theme-toggle-btn .theme-icon-dark,
body[data-theme="dark"] .mobile-theme-toggle-btn .theme-icon-dark {
  display: block;
}

/* Hide desktop language switcher and theme toggle on mobile */
@media (max-width: 1023px) {
  .header-nav .language-switcher {
    display: none;
  }
  
  .header-nav .theme-toggle-btn {
    display: none;
  }
  
  /* Hide Home and How to Play buttons on game pages (mobile only) */
  .header-nav-buttons {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  .mobile-menu-overlay {
    display: block;
  }
  
  .mobile-menu {
    display: block !important;
    visibility: visible;
  }
  
  .mobile-menu-overlay {
    display: block !important;
  }
  
  /* Ensure header container allows hamburger button to be clickable */
  .header-container {
    position: relative;
    padding-right: calc(var(--spacing-sm) + 44px + var(--spacing-sm));
  }

  .mobile-menu-toggle {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 1002;
  }

  /* Reduce space between header and game title on mobile - ALL game pages */
  .game-container {
    padding-top: 2px !important;
  }

  .game-container header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 2px !important;
  }
  
  .game-container header.mb-lg {
    margin-bottom: 2px !important;
  }
  
  .game-container h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: var(--spacing-sm) !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .header-container {
    padding: var(--spacing-md);
  }
  
  .main-container {
    padding: var(--spacing-md);
  }
  
  .games-grid {
    grid-template-columns: 1fr;
  }
  
  .cookie-modal-actions {
    flex-direction: column;
  }
  
  .cookie-modal-actions .btn {
    width: 100%;
  }
}

/* Game Container */
.game-container {
  width: 100%;
  max-width: var(--dashboard-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

/* Loading Spinner */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-2xl);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* How to Play Content */
.how-to-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  color: var(--color-text-primary);
}

.how-to-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.how-to-section h2 {
  color: var(--color-text-primary);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--spacing-sm);
}

.how-to-section h3 {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.how-to-section h4 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.how-to-section p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

.how-to-section .lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-bottom: var(--spacing-lg);
}

.how-to-section ul {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.how-to-section li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
  line-height: 1.7;
}

.how-to-section strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ============================================
   SOLITAIRE GAME STYLES
   ============================================ */

/* Solitaire Dashboard */
.solitaire-dashboard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  gap: var(--spacing-lg);
  flex-wrap: nowrap;
  width: 100%;
  max-width: var(--dashboard-width);
  box-sizing: border-box;
}

/* 2048 Dashboard - reduce margin-bottom by 10% */
#game-2048-dashboard {
  margin-bottom: calc(var(--spacing-lg) * 0.9);
}

/* 2048 - Eliminate vertical scroll - aggressive optimization */
body:has(#game-2048-dashboard) .main-container {
  padding-bottom: var(--spacing-xl) !important;
  overflow: auto !important;
  max-height: none;
}

body:has(#game-2048-dashboard) .game-container {
  padding: 0 var(--spacing-lg) !important;
  padding-bottom: var(--spacing-lg) !important;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Ensure grid container doesn't get affected by game-container padding changes */
body:has(#game-2048-dashboard) .grid-2048-container {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
  /* Don't override padding, position, or aspect-ratio - let the inline styles from add2048Styles() handle it */
  position: relative !important;
  /* Reset any padding that might have been set by other rules */
  padding: 11px !important;
}

@media (max-width: 1024px) {
  body:has(#game-2048-dashboard) .grid-2048-container {
    padding: 5px !important;
  }
}

body:has(#game-2048-dashboard) .game-container header {
  margin-bottom: 0.25rem !important;
  margin-top: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

body:has(#game-2048-dashboard) .game-container h1 {
  margin-bottom: 0.25rem !important;
  margin-top: 0 !important;
  font-size: calc(var(--font-size-2xl) * 0.9) !important;
  line-height: 1.2 !important;
  flex-shrink: 0;
}

body:has(#game-2048-dashboard) #game-2048-dashboard {
  margin-bottom: var(--spacing-xs) !important;
  margin-top: 0 !important;
  padding: var(--spacing-xs) var(--spacing-md) !important;
  flex-shrink: 0;
}

body:has(#game-2048-dashboard) .grid-2048-container {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
  /* Don't override padding, position, or aspect-ratio - let the inline styles from add2048Styles() handle it */
  position: relative !important;
}

body:has(#game-2048-dashboard) .grid-2048-tiles {
  /* Ensure tiles container maintains correct positioning */
  position: absolute !important;
}

body:has(#game-2048-dashboard) .tile-2048 {
  /* Ensure tiles maintain absolute positioning */
  position: absolute !important;
}

/* Footer should be visible on 2048 page, but ensure it doesn't cause scroll */
body:has(#game-2048-dashboard) .footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* Mobile: Eliminate space between game and footer to remove scroll */
@media (max-width: 767px) {
  body:has(#game-2048-dashboard) .footer {
    margin-top: 0 !important;
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
  }
  
  body:has(#game-2048-dashboard) .main-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  body:has(#game-2048-dashboard) .game-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  body:has(#game-2048-dashboard) .grid-2048-container {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  body:has(#game-2048-dashboard) #game-2048-dashboard {
    margin-bottom: var(--spacing-xs) !important;
  }
  
  /* Remove any gap between game board wrapper and footer */
  body:has(#game-2048-dashboard) .game-2048-board-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Reduce space between instructions text and footer by half */
  body:has(#game-2048-dashboard) .game-instructions {
    margin-bottom: 0.75rem !important; /* Half of 1.5rem */
    margin-top: 22px !important; /* 22px below game board */
  }
}

.dashboard-stats-section {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  flex: 0 0 auto;
}

.dashboard-controls-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px !important;
  flex: 0 0 auto;
}

/* Desktop: Game Controls Wrapper - ROW 1: [NEW GAME][UNDO][MUTE] */
@media (min-width: 768px) {
  .game-controls-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px !important;
    width: auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    justify-content: flex-start;
  }
  
  /* All buttons in game-controls-wrapper (ROW 1) - EXACT SIZE: 124x42px */
  .game-controls-wrapper .dashboard-btn-new-game,
  .game-controls-wrapper .uniform-mute-btn,
  .game-controls-wrapper button {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  
  /* Difficulty Selector - ROW 2: [EASY][MEDIUM][HARD] */
  .solitaire-difficulty-selector,
  .minesweeper-difficulty-selector,
  .sudoku-difficulty-selector,
  .chess-difficulty-selector,
  .snake-difficulty-selector,
  .backgammon-difficulty-selector,
  .mahjong-difficulty-selector,
  .fir-difficulty-selector,
  [id$="-difficulty-selector"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px !important;
    width: auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    justify-content: flex-start;
  }
  
  /* All difficulty buttons (ROW 2) - EXACT SIZE: 124x42px */
  .difficulty-btn {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  
  /* ROW 3: [IMPOSSIBLE] - Only where applicable, full width */
  .difficulty-selector-row-3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px !important;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .difficulty-selector-row-3 .difficulty-btn {
    width: 378px !important;
    min-width: 378px !important;
    max-width: 378px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    box-sizing: border-box;
    flex: 0 0 auto;
  }
}

/* Minesweeper dashboard: specific layout */
.minesweeper-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: var(--dashboard-width);
}

/* All game dashboards: move 10px to the left on desktop */
@media (min-width: 768px) {
  #solitaire-dashboard,
  #minesweeper-dashboard,
  #game-2048-dashboard,
  #backgammon-dashboard,
  #sudoku-dashboard,
  #snake-dashboard,
  #mahjong-dashboard,
  #fir-dashboard,
  #chess-dashboard {
    margin-left: -10px;
  }
}

/* Universal Difficulty Modal for Desktop - Based on Chess implementation */
@media (min-width: 768px) {
  .game-difficulty-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.9rem;
    pointer-events: auto !important;
  }
  
  .game-difficulty-modal.active,
  .game-difficulty-modal[style*="flex"] {
    display: flex !important;
  }
  
  .game-difficulty-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: var(--color-bg-primary);
    opacity: 0.85;
    z-index: 99998 !important;
  }
  
  .game-difficulty-modal-dialog {
    position: relative !important;
    width: min(378px, 92vw);
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    padding: 0.9rem;
    text-align: center;
    z-index: 99999 !important;
  }
  
  .game-difficulty-modal-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.9rem;
  }
  
  .game-difficulty-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0.9rem 0;
  }
  
  .game-difficulty-modal-btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: 44px;
    height: auto;
    line-height: 1.5;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .game-difficulty-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  }
  
  .game-difficulty-modal-btn:active {
    transform: translateY(0);
  }
  
  .game-difficulty-modal-btn.active {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 600;
  }
  
  .game-difficulty-start-btn {
    width: 100%;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: 44px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #e0d5ff 0%, #d4c5f9 100%);
    color: var(--color-text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .game-difficulty-start-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #d4c5f9 0%, #c8b5f3 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 197, 249, 0.4);
  }
  
  .game-difficulty-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* Dark mode support */
  body.dark-mode .game-difficulty-modal-dialog {
    background: var(--color-card-bg);
    border-color: var(--color-card-border);
  }
  
  body.dark-mode .game-difficulty-start-btn {
    background: linear-gradient(135deg, #2a2a3a 0%, #3a3a4a 100%);
    color: var(--color-text-primary);
  }
  
  body.dark-mode .game-difficulty-start-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #3a3a4a 0%, #4a4a5a 100%);
  }
}

/* Top Row: Stats - horizontal row with space-between */
.minesweeper-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.minesweeper-stats-row .dashboard-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1 1 0;
  min-width: 0;
}

/* Bottom Row: Buttons - difficulty selector and action buttons aligned to right */
.minesweeper-buttons-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}

.minesweeper-difficulty-selector {
  display: flex;
  align-items: center;
  gap: 4px;
}

#minesweeper-dashboard .game-controls-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

/* New Game button slightly wider */
#minesweeper-dashboard .btn-new-game {
  min-width: 120px;
}

#minesweeper-dashboard .btn-undo,
#minesweeper-dashboard .btn-flag,
#minesweeper-dashboard .btn-sound {
  min-width: 80px;
}

/* Reduce font-size of stat labels to save vertical space */
.minesweeper-dashboard .dashboard-label {
  font-size: calc(var(--font-size-sm) * 0.85);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.minesweeper-dashboard .dashboard-timer,
.minesweeper-dashboard .dashboard-moves,
.minesweeper-dashboard .dashboard-score,
.minesweeper-dashboard .dashboard-best-score,
.minesweeper-dashboard .dashboard-undo {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.dashboard-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}

.dashboard-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

.dashboard-timer,
.dashboard-moves,
.dashboard-score,
.dashboard-best-score,
.dashboard-undo {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: left;
  width: 100%;
}

.dashboard-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  width: 100%;
  margin-bottom: var(--spacing-xs);
}

.dashboard-subtitle {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.dashboard-game-status {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  align-items: center;
}

.dashboard-status-text {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

.dashboard-btn-new-game {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: #CCCCCC;
  color: #333333;
  border: 2px solid #B3B3B3;
  border-radius: 0;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  font-family: var(--font-family);
  margin-left: 0;
  box-sizing: border-box;
  height: auto;
  min-height: 40px;
}

/* SOLITAIRE MOBILE: Scale down all game elements by 10% (except header and footer) */
@media (max-width: 1023px) {
  /* Scale down Solitaire dashboard - but increase width by 20% */
  #solitaire-dashboard,
  .solitaire-dashboard {
    transform: scale(0.9);
    transform-origin: top center;
    width: 120% !important;
    max-width: 120% !important;
    margin-left: -10% !important;
    margin-right: -10% !important;
  }
  
  /* 2048 Dashboard - centered on mobile */
  #game-2048-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Minesweeper Dashboard - same width as Solitaire on mobile */
  #minesweeper-dashboard,
  .minesweeper-dashboard {
    width: 120% !important;
    max-width: 120% !important;
    margin-left: -10% !important;
    margin-right: -10% !important;
    gap: 2px !important; /* 2px gap between row1 (stats) and row2 (buttons) */
  }
  
  /* Minesweeper game board - increase size by 30% + 30% = 69% total on mobile */
  #minesweeper-grid,
  .minesweeper-grid-container {
    transform: scale(1.69) !important;
    transform-origin: center center !important;
  }
  
  /* Remove scroll and scrollbar from Minesweeper on mobile */
  body:has(#minesweeper-dashboard) .minesweeper-board-wrapper {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  
  body:has(#minesweeper-dashboard) .game-container {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  
  body:has(#minesweeper-dashboard) .main-container {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  
  /* Adjust Minesweeper cell content (numbers, bombs, flags) - reduce by 20% */
  .minesweeper-cell {
    font-size: calc(clamp(0.55rem, 1.8vw, 0.7rem) * 1.69 * 0.8) !important;
  }
  
  .minesweeper-cell.revealed {
    font-size: calc(clamp(0.6rem, 1.9vw, 0.75rem) * 1.69 * 0.8) !important;
  }
  
  .minesweeper-cell.flagged,
  .minesweeper-cell.mine {
    font-size: calc(clamp(0.55rem, 1.8vw, 0.7rem) * 1.69 * 0.8) !important;
  }
  
  /* For small mobile screens */
  @media (max-width: 480px) {
    .minesweeper-cell {
      font-size: calc(clamp(0.5rem, 1.6vw, 0.65rem) * 1.69 * 0.8) !important;
    }
    
    .minesweeper-cell.revealed {
      font-size: calc(clamp(0.55rem, 1.7vw, 0.7rem) * 1.69 * 0.8) !important;
    }
    
    .minesweeper-cell.flagged,
    .minesweeper-cell.mine {
      font-size: calc(clamp(0.5rem, 1.6vw, 0.65rem) * 1.69 * 0.8) !important;
    }
  }
  
  /* BACKGAMMON MOBILE: Scale down all game elements by 20% (except header and footer) */
  body:has(.backgammon-root) .game-container > *:not(header):not(footer),
  body:has(.backgammon-root) .backgammon-root {
    transform: scale(0.8);
    transform-origin: top center;
  }
  
  /* Ensure header and footer are NOT scaled */
  body:has(.backgammon-root) header.header,
  body:has(.backgammon-root) footer.footer,
  body:has(.backgammon-root) .game-container > header,
  body:has(.backgammon-root) .header-container,
  body:has(.backgammon-root) .footer-container {
    transform: none !important;
  }
  
  /* CHESS MOBILE: Scale down all game elements by 10% (except header and footer) */
  body:has(.chess-root) .game-container > *:not(header):not(footer),
  body:has(.chess-root) .chess-root {
    transform: scale(0.9);
    transform-origin: top center;
  }
  
  /* Ensure header and footer are NOT scaled */
  body:has(.chess-root) header.header,
  body:has(.chess-root) footer.footer,
  body:has(.chess-root) .game-container > header,
  body:has(.chess-root) .header-container,
  body:has(.chess-root) .footer-container {
    transform: none !important;
  }
  
  /* Scale down Solitaire board and all game elements */
  body:has(#solitaire-dashboard) .solitaire-board,
  body:has(#solitaire-dashboard) .solitaire-grid-container,
  body:has(#solitaire-dashboard) .solitaire-card,
  body:has(#solitaire-dashboard) .stock-slot,
  body:has(#solitaire-dashboard) .waste-slot,
  body:has(#solitaire-dashboard) .foundation-slot,
  body:has(#solitaire-dashboard) .tableau-slot {
    transform: scale(0.9);
    transform-origin: top center;
  }
  
  /* Scale down dashboard stats - but keep font sizes readable */
  #solitaire-dashboard .dashboard-stats-section {
    transform: scale(0.9);
    transform-origin: top center;
  }
  
  /* Scale down dashboard controls */
  #solitaire-dashboard .dashboard-controls-section {
    transform: scale(0.9);
    transform-origin: top center;
  }
  
  /* Ensure header and footer are NOT scaled */
  body:has(#solitaire-dashboard) header.header,
  body:has(#solitaire-dashboard) footer.footer,
  body:has(#solitaire-dashboard) .game-container > header,
  body:has(#solitaire-dashboard) .header-container,
  body:has(#solitaire-dashboard) .footer-container {
    transform: none !important;
  }
}

/* SOLITAIRE MOBILE: Removed old specific rules - now using uniform dashboard rules */
@media (max-width: 1023px) {
  /* Solitaire button icons - adjust size */
  #solitaire-dashboard .mute-button svg,
  #solitaire-dashboard .uniform-mute-btn svg,
  #solitaire-dashboard .solitaire-mute-btn svg,
  #solitaire-dashboard .game-controls-wrapper .mute-button svg,
  #solitaire-dashboard .game-controls-wrapper .uniform-mute-btn svg,
  #solitaire-dashboard .game-controls-wrapper .solitaire-mute-btn svg,
  .solitaire-dashboard .mute-button svg,
  .solitaire-dashboard .uniform-mute-btn svg,
  .solitaire-dashboard .solitaire-mute-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Game Controls Wrapper - Unified button container for all games */
/* Difficulty Selector (Minesweeper & Solitaire) */
.minesweeper-difficulty-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: var(--spacing-md);
}

.solitaire-difficulty-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 0;
}

.difficulty-btn {
  padding: calc(var(--spacing-sm) * 0.6) var(--spacing-md);
  background: #CCCCCC;
  border: 2px solid #B3B3B3;
  border-radius: 0;
  font-size: calc(var(--font-size-sm) * 0.9);
  font-weight: 500;
  color: #333333;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-family);
  white-space: nowrap;
}

.difficulty-btn:hover {
  background: #B8B8B8;
  border: 2px solid #A8A8A8;
  color: #333333;
}

.difficulty-btn.active {
  background: #A0A0A0 !important;
  border: 2px solid #909090 !important;
  color: #222222 !important;
  filter: none;
}

.game-controls-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

#solitaire-dashboard .game-controls-wrapper {
  margin-left: 0;
}

.game-controls-wrapper .dashboard-btn-new-game {
  margin-left: 0 !important;
  flex-shrink: 0;
  /* Consistent sizing for all buttons */
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: var(--spacing-sm) var(--spacing-lg);
  box-sizing: border-box;
  border: 2px solid #B3B3B3;
  background: #CCCCCC !important;
  color: #333333 !important;
  box-shadow: none !important;
}
#minesweeper-flag-btn.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}

/* SOLITAIRE MOBILE: Removed old override - now using uniform dashboard rules */
@media (max-width: 1023px) {
  /* Removed specific overrides - using general dashboard button rules */
}

/* Mobile: Removed Solitaire specific rules - using uniform dashboard rules */
@media (max-width: 1023px) {
  /* Removed specific overrides - using general dashboard button rules */
}

/* SOLITAIRE MOBILE: allow columns to grow and keep text below */
@media (max-width: 1023px) {
  body:has(#solitaire-dashboard) #game-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
  }

  body:has(#solitaire-dashboard) .solitaire-board {
    width: 100% !important;
    max-width: 640px;
    margin: 0 auto var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
    overflow: visible;
  }

  body:has(#solitaire-dashboard) .solitaire-grid-container,
  body:has(#solitaire-dashboard) .solitaire-tableau-zone {
    width: 100%;
    max-width: 640px;
    justify-content: center;
  }

  /* Disable transforms on mobile so the board's real height pushes the text down */
  body:has(#solitaire-dashboard) .solitaire-board,
  body:has(#solitaire-dashboard) .solitaire-grid-container,
  body:has(#solitaire-dashboard) .solitaire-tableau-zone,
  body:has(#solitaire-dashboard) .tableau-column,
  body:has(#solitaire-dashboard) .solitaire-card,
  body:has(#solitaire-dashboard) .stock-slot,
  body:has(#solitaire-dashboard) .waste-slot,
  body:has(#solitaire-dashboard) .foundation-slot,
  body:has(#solitaire-dashboard) .tableau-slot {
    transform: none !important;
    transform-origin: top center !important;
  }

  body:has(#solitaire-dashboard) .game-container section {
    margin-top: var(--spacing-lg);
  }
}

/* Ensure Flag button maintains same size when active */
#minesweeper-flag-btn.active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: 2px solid #c0392b !important;
  color: white !important;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
}

.dashboard-btn-new-game:hover {
  background: #B8B8B8;
  border: 2px solid #A8A8A8;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dashboard-btn-new-game:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Flag button should not transform when active */
#minesweeper-flag-btn.active,
#minesweeper-flag-btn.active:hover,
#minesweeper-flag-btn.active:active {
  transform: none;
}

.dashboard-btn-new-game svg {
  width: 20px;
  height: 20px;
}

/* Solitaire Board */
.solitaire-board {
  width: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
  /* Ensure board can grow to accommodate tall piles */
  min-height: fit-content;
  max-width: var(--dashboard-width);
  margin: 0 auto;
}

/* Game container should handle overflow gracefully */
/* Game container allows content to grow naturally */
.game-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}

/* Solitaire Grid Container - Perfect Alignment */
.solitaire-grid-container {
  display: grid;
  grid-template-columns: repeat(7, 85px);
  gap: 15px;
  justify-content: center;
  width: fit-content;
}

.solitaire-tableau-zone {
  display: grid;
  grid-template-columns: repeat(7, 85px);
  gap: 15px;
  justify-content: center;
  width: fit-content;
}

.solitaire-spacer {
  /* Empty spacer for column 3 */
  width: 85px;
  height: 125px;
}

/* Stock Slot - Premium Styling */
.stock-slot {
  transition: all var(--transition-base);
}

.stock-slot.empty {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.03), rgba(162, 155, 254, 0.03)) !important;
  border: 2px dashed var(--color-accent-light) !important;
  cursor: pointer;
}

.stock-slot.has-cards {
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-secondary) !important;
  cursor: pointer;
}

.stock-slot.has-cards:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Waste Slot */
.waste-slot {
  transition: all var(--transition-base);
}

.waste-slot.empty {
  background: var(--color-bg-tertiary) !important;
  border: 1px solid var(--color-border) !important;
}

.waste-slot.has-card {
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-secondary) !important;
}

/* Foundation Slots - Premium Styling */
.foundation-slot {
  background: var(--color-bg-tertiary) !important;
  border: 2px dashed var(--color-border) !important;
  transition: all var(--transition-base);
}

.foundation-slot.empty {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.03), rgba(162, 155, 254, 0.03)) !important;
  border-color: var(--color-accent-light) !important;
}

.foundation-slot.has-card {
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-secondary) !important;
}

.foundation-placeholder {
  font-size: 4.5em !important;
  opacity: 0.12 !important;
  color: var(--color-text-primary) !important;
  font-weight: 300;
  user-select: none;
  pointer-events: none;
}

/* Win Modal */
.solitaire-win-modal,
.solitaire-victory-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.win-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(45, 52, 54, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.win-modal-content {
  position: relative;
  background: var(--color-bg-secondary);
  border-radius: 0;
  padding: var(--spacing-2xl);
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.win-modal-header {
  margin-bottom: var(--spacing-xl);
}

.win-modal-header h2 {
  font-size: var(--font-size-2xl);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.win-modal-header p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
}

.win-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--color-bg-tertiary);
  border-radius: 0;
}

.win-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.win-stat-full {
  grid-column: span 3;
  margin-top: var(--spacing-sm);
}

.win-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.win-stat-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.win-modal-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  width: 100%;
}

.win-modal-btn {
  display: block;
  margin: var(--spacing-lg) auto 0;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-family);
  width: auto;
  min-width: 200px;
}

.win-modal-btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.win-modal-btn:active {
  transform: translateY(0);
}

.win-modal-btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.win-modal-btn-secondary:hover {
  background: var(--color-border);
  color: var(--color-accent);
}

/* ============================================ */
/* MOBILE/TABLET OPTIMIZATION - DASHBOARD HIDDEN */
/* ============================================ */
/* Eliminam dashboardurile din versiunea mobila/tableta */
/* IMPORTANT: Aceasta sectiune afecteaza DOAR versiunea mobila/tableta (max-width: 1024px) */
@media (max-width: 1024px) {
  /* Ascunde toate dashboardurile pe mobil/tableta */
  #solitaire-dashboard,
  #game-2048-dashboard,
  #minesweeper-dashboard,
  #backgammon-dashboard,
  #sudoku-dashboard,
  #snake-dashboard,
  #mahjong-dashboard,
  #fir-dashboard,
  #chess-dashboard,
  .solitaire-dashboard,
  .minesweeper-dashboard,
  .game-2048-dashboard {
    display: none !important;
    visibility: hidden !important;
  }

  /* Optimize Minesweeper board wrapper on mobile */
  @media (max-width: 767px) {
    .minesweeper-board-wrapper {
      padding: var(--spacing-xs) !important;
      margin-bottom: var(--spacing-xs);
    }
  }
  
  /* Desktop: Align minesweeper board with dashboard width */
  @media (min-width: 768px) {
    .minesweeper-board-wrapper {
      width: 100%;
      max-width: var(--dashboard-width);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: var(--spacing-lg);
      padding: var(--spacing-xl);
      box-sizing: border-box;
    }
    
    .minesweeper-grid-container {
      width: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  /* Optimize game instructions on mobile */
  .minesweeper-board-wrapper ~ .game-instructions {
    font-size: 0.65rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
    padding: 0 var(--spacing-xs) !important;
    line-height: 1.2;
  }
  
  /* Flag button active state on mobile */
  .game-controls-wrapper #minesweeper-flag-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 2px solid #c0392b !important;
    color: white !important;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
  }
  
  .dashboard-btn-new-game svg {
    width: 14px;
    height: 14px;
  }
  
  .win-modal-stats {
    grid-template-columns: 1fr;
  }
  
  .foundation-placeholder {
    font-size: 2.5em !important;
  }
  
  /* Solitaire board responsive - adapts to all mobile resolutions */
  .solitaire-board {
    padding: var(--spacing-xs);
    width: 100vw !important;
    max-width: 100vw !important;
    /* Dynamically calculate negative margins based on game-container padding */
    margin-left: calc(-1 * var(--spacing-sm)) !important;
    margin-right: calc(-1 * var(--spacing-sm)) !important;
    /* Fixed 50px bottom extension */
    padding-bottom: 50px !important;
    overflow-x: visible;
    box-sizing: border-box;
    /* Remove board background and border on mobile */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  
  .solitaire-grid-container {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0;
    justify-content: center;
  }
  
  .solitaire-tableau-zone {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    justify-content: center;
  }
  
  .solitaire-spacer {
    width: 100%;
  }
  
  .tableau-column,
  .stock-slot,
  .waste-slot,
  .foundation-slot {
    width: 100% !important;
    max-width: 100%;
  }
  
  .tableau-column {
    min-height: auto !important;
  }
  
  /* Card selection visual feedback for mobile tap-to-move */
  .solitaire-card-selected {
    z-index: 1000 !important;
    transform: scale(1.05) !important;
  }
  
  /* Purple selection border - 50% thinner on mobile */
  .solitaire-card-selected {
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.6) !important;
    border: 1.5px solid #6c5ce7 !important;
  }
  
  /* Green valid drop zones - positioned at bottom of cards, 50% larger (45% of card height) */
  .valid-drop-zone {
    position: relative !important;
  }
  
  /* Highlight for foundation and tableau zones */
  .valid-drop-zone::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background-color: rgba(46, 213, 115, 0.3) !important;
    border-top: 2px dashed rgba(46, 213, 115, 0.8) !important;
    border-left: 2px dashed rgba(46, 213, 115, 0.8) !important;
    border-right: 2px dashed rgba(46, 213, 115, 0.8) !important;
    border-radius: 0 0 8px 8px;
    animation: pulse-valid-bottom 1s ease-in-out infinite;
    pointer-events: none;
    z-index: 100;
  }
  
  /* Tableau columns: 70% larger green zone (77% of card height) */
  .tableau-column.valid-drop-zone::after {
    height: 77% !important;
  }
  
  /* Also highlight the bottom 45% of cards in valid drop zones (50% larger) */
  .valid-drop-zone > div[style*="position:absolute"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background-color: rgba(46, 213, 115, 0.25) !important;
    border-top: 2px dashed rgba(46, 213, 115, 0.7) !important;
    border-radius: 0 0 8px 8px;
    pointer-events: none;
    z-index: 101;
  }
  
  /* Tableau columns: 70% larger green zone for cards (77% of card height) */
  .tableau-column.valid-drop-zone > div[style*="position:absolute"]::after {
    height: 77% !important;
  }
  
  @keyframes pulse-valid-bottom {
    0%, 100% {
      background-color: rgba(46, 213, 115, 0.3);
      opacity: 1;
    }
    50% {
      background-color: rgba(46, 213, 115, 0.5);
      opacity: 0.9;
    }
  }
  
  /* Optimize text sizes for mobile */
  .solitaire-card-selected {
    font-size: clamp(0.7rem, 2vw, 0.9rem) !important;
  }
  
  .dashboard-item {
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
  }
  
  .dashboard-item .dashboard-value {
    font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
  }
  
  /* Footer - consistent styling on mobile */
  .footer {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    margin-top: auto;
  }
  
  /* Game container - allow content to grow naturally */
  .game-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: var(--spacing-md);
  }
  
  .solitaire-board {
    flex: 1;
    min-height: fit-content;
    /* Fixed 50px bottom extension */
    padding-bottom: 50px !important;
    /* Full viewport width */
    width: 100vw !important;
    max-width: 100vw !important;
    /* Dynamically calculate negative margins based on game-container padding */
    margin-left: calc(-1 * var(--spacing-sm)) !important;
    margin-right: calc(-1 * var(--spacing-sm)) !important;
    box-sizing: border-box;
    /* Remove board background and border on mobile */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  
  /* Tableau columns should grow dynamically */
  .tableau-column {
    min-height: fit-content !important;
  }
}

/* ============================================
   MOBILE RESPONSIVE ADJUSTMENTS - SOLITAIRE BOARD
   Automatically adapts to all mobile resolutions (320px - 1023px)
   Uses viewport units and dynamic calculations
   ============================================ */

/* Ensure board adapts to all mobile screen sizes */
@media (max-width: 1023px) {
  /* Board automatically uses 100vw and compensates for container padding */
  /* The negative margins are calculated dynamically based on game-container padding */
  /* This ensures the board spans full width on all mobile resolutions */
  
  /* Additional fine-tuning for very small screens if needed */
  @media (max-width: 360px) {
    .solitaire-board {
      /* Ensure proper spacing on very small screens */
      padding-left: clamp(0.25rem, 2vw, 0.5rem) !important;
      padding-right: clamp(0.25rem, 2vw, 0.5rem) !important;
    }
  }
  
  /* Fine-tuning for larger mobile screens */
  @media (min-width: 481px) and (max-width: 1023px) {
    .solitaire-board {
      /* Slightly more padding on larger mobile screens */
      padding-left: clamp(0.25rem, 1.5vw, 0.75rem) !important;
      padding-right: clamp(0.25rem, 1.5vw, 0.75rem) !important;
    }
  }
}

/* ============================================
   MOBILE & TABLET OPTIMIZATION
   ============================================ */

/* Touch targets - minimum 44x44px */
@media (max-width: 1024px) {
  /* Header buttons - ensure proper touch targets */
  .header-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
  }
  
  .lang-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
  }
  
  .theme-toggle-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 12px !important;
  }
  
  .language-switcher {
    gap: 4px !important;
    padding: 3px !important;
  }
  
  .language-switcher {
    gap: var(--spacing-xs) !important;
  }
  
  /* Dashboard buttons */
  .dashboard-btn-new-game {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Game buttons */
  .btn {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  
  /* Win modal buttons */
  .win-modal-btn {
    min-height: 44px;
  }
}

/* Mobile devices (< 768px) */
@media (max-width: 768px) {
  /* Header optimization */
  .header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .logo {
    font-size: var(--font-size-lg);
  }
  
  .logo-icon {
    width: 29px;
    height: 29px;
    font-size: 1.04em;
  }
  
  /* Main container */
  .main-container {
    padding: var(--spacing-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  
  /* Game container */
  .game-container {
    padding: 0 var(--spacing-sm);
    width: 100%;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  
  /* Footer - consistent styling on mobile */
  .footer {
    padding: var(--spacing-xs) var(--spacing-sm);
    padding-bottom: calc(var(--spacing-xs) + env(safe-area-inset-bottom));
    margin-top: auto;
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    flex-shrink: 0;
  }
  
  /* Footer text styling */
  .footer p {
    margin: var(--spacing-xs) 0;
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    line-height: 1.2;
  }
  
  /* Game container - allow content to grow naturally */
  .game-container {
    padding-bottom: var(--spacing-md);
  }
  
  .solitaire-board {
    flex: 1;
    min-height: fit-content;
    padding-bottom: var(--spacing-md);
  }
  
  /* Tableau columns should grow dynamically */
  .tableau-column {
    min-height: fit-content !important;
  }
  
  /* 2048 Game responsive */
  .grid-2048-container {
    width: 100%;
    max-width: 100vw;
    padding: var(--spacing-sm);
  }
  
  .grid-2048 {
    width: 100%;
    max-width: calc(100vw - 2rem);
  }
  
  /* Minesweeper responsive - Mobile */
  @media (max-width: 767px) {
    .minesweeper-grid-container {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: var(--spacing-sm);
      margin: 0 auto;
    }
  }
  
  .minesweeper-grid {
    margin: 0 auto;
  }
  
  /* Game instructions */
  .game-instructions {
    font-size: var(--font-size-sm);
    padding: 0 var(--spacing-sm);
    margin-top: var(--spacing-md);
  }
  
  /* Compact instructions for Minesweeper */
  #minesweeper-dashboard ~ * .game-instructions,
  .minesweeper-board-wrapper ~ .game-instructions {
    font-size: 0.7em;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }
  
  /* Win modals */
  .win-modal-content {
    width: 90%;
    max-width: 90vw;
    padding: var(--spacing-lg);
  }
  
  .win-modal-btn {
    font-size: var(--font-size-base);
    padding: var(--spacing-md);
  }
}

/* Tablet devices (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .solitaire-grid-container {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }
  
  .solitaire-tableau-zone {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
  }
  
  .grid-2048-container {
    max-width: 600px;
  }
  
  .minesweeper-grid-container {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Landscape orientation optimization */
@media (max-width: 1024px) and (orientation: landscape) {
  .header {
    padding: var(--spacing-xs) var(--spacing-md);
  }
  
  .main-container {
    padding: var(--spacing-sm);
  }
  
  .game-container {
    padding: 0 var(--spacing-sm);
  }
  
  .solitaire-dashboard {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  
  .footer {
    padding: var(--spacing-xs) var(--spacing-md);
    margin-top: var(--spacing-md);
  }
}

/* Prevent text selection during game interactions - ONLY on game grids */
/* Allow text selection on .game-container for descriptions and instructions */
.solitaire-board,
.grid-2048-container,
.minesweeper-grid-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow text selection on game descriptions and instructions */
.game-container .game-description,
.game-container .how-to-content,
.game-container article,
.game-container section,
.game-container p,
.game-container ul,
.game-container ol,
.game-container h1,
.game-container h2,
.game-container h3,
.game-container h4 {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  cursor: text;
}

/* Global rule: All descriptive content should be selectable for SEO */
article, section, p, ul, ol, li, h1, h2, h3, h4, h5, h6,
.description, .intro, .content, .text-content, 
.game-info, .game-intro, .game-features {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* AdSense responsive */
@media (max-width: 768px) {
  ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--spacing-md) auto !important;
  }
}

/* ============================================
   Community & Feedback System
   ============================================ */

/* Floating Feedback Button */
.feedback-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: var(--color-accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transition: all var(--transition-base);
}

.feedback-button:hover {
  background: var(--color-accent-dark);
  transform: scale(1.1);
}

.feedback-button svg {
  width: 24px;
  height: 24px;
}

/* Community Page */
.community-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.community-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--color-border);
}

.community-tab {
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.community-tab:hover {
  color: var(--color-accent);
}

.community-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.community-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.community-form-container {
  background: var(--color-card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.community-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-group label {
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.form-input,
.form-textarea {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.btn-primary {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  align-self: flex-start;
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--color-border);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.btn-delete {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: all var(--transition-fast);
}

.btn-delete:hover {
  background: #c0392b;
}

/* Comments Section */
.comments-section {
  background: var(--color-card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.comments-section h2 {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-primary);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.comment-item {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
  transition: all var(--transition-fast);
}

.comment-item:hover {
  border-left-color: var(--color-accent);
}

.comment-item.admin-reply {
  background: rgba(108, 92, 231, 0.05);
  border-left-color: var(--color-accent);
}

.comment-item.welcome-message {
  background: rgba(108, 92, 231, 0.08);
  border-left: 4px solid var(--color-accent);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.15);
}

.admin-comment-item.welcome-message {
  background: rgba(108, 92, 231, 0.08);
  border-left: 4px solid var(--color-accent);
  border-top: 2px solid var(--color-accent);
}

.welcome-badge {
  padding: 2px 8px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  margin-left: auto;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.comment-author {
  font-weight: 600;
  color: var(--color-text-primary);
}

.comment-date {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-left: auto;
}

.comment-message {
  color: var(--color-text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
}

.admin-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #3498db;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.admin-verified-badge:hover {
  background: #2980b9;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

.comment-item.verified-admin {
  border-left: 3px solid #3498db;
}

.comment-item.verified-admin .comment-author {
  color: #3498db;
  font-weight: 600;
}

.admin-badge {
  padding: 2px 8px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.no-comments {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-secondary);
  font-style: italic;
}

.admin-reply-form {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Notification */
.notification {
  position: fixed;
  top: 2rem;
  right: 2rem;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  opacity: 0;
  transform: translateY(-20px);
  transition: all var(--transition-base);
}

.notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* Admin Panel */
.admin-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--spacing-xl);
}

.admin-login-card {
  background: var(--color-card-bg);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  width: 100%;
}

.admin-login-card h1 {
  margin-bottom: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-primary);
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.login-description {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.form-help {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
  display: block;
}

.admin-login-error {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-align: center;
}

.admin-login-error.error {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.admin-login-error.success {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

#admin-otp {
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 0.5em;
  font-family: 'Courier New', monospace;
}

.admin-panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.admin-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  background: var(--color-card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-comments {
  background: var(--color-card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.admin-comments h2 {
  margin-bottom: var(--spacing-lg);
}

.admin-comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-comment-item {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
}

.admin-comment-item.admin-reply {
  background: rgba(108, 92, 231, 0.05);
  border-left-color: var(--color-accent);
}

.admin-comment-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.comment-category {
  padding: 2px 8px;
  background: var(--color-accent-light);
  color: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
  .feedback-button {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }
  
  .community-tabs {
    flex-wrap: wrap;
  }
  
  .community-tab {
    flex: 1;
    min-width: 100px;
  }
  
  .admin-stats {
    grid-template-columns: 1fr;
  }
}

/* ============================================ */
/* SOLITAIRE ROTATION POPUP */
/* ============================================ */
/* Mobile overlay styles - ONLY on mobile (max-width: 1023px) */
@media (max-width: 1023px) {
  .rotation-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
    pointer-events: none;
  }

  .rotation-popup-overlay.rotation-popup-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .rotation-popup-overlay {
    display: none !important;
  }
}


.rotation-popup {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.rotation-icon {
  margin: 0 auto 1.5rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotateAnimation 2s ease-in-out infinite;
}

@keyframes rotateAnimation {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  75% {
    transform: rotate(-90deg);
  }
}

.rotation-popup h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1rem;
}

.rotation-popup p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.rotation-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-rotate-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 50px;
  font-family: var(--font-family);
}

.btn-rotate-primary:hover, .btn-rotate-primary:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
}

.btn-rotate-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  padding: 0.875rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 48px;
  font-family: var(--font-family);
}

.btn-rotate-secondary:hover, .btn-rotate-secondary:active {
  background: rgba(108, 92, 231, 0.1);
}

/* Mobile adjustments for rotation popup */
@media (max-width: 479px) {
  .rotation-popup {
    padding: 1.5rem;
    border-radius: 16px;
  }
  
  .rotation-popup h2 {
    font-size: 1.25rem;
  }
  
  .rotation-popup p {
    font-size: 0.9375rem;
  }
  
  .btn-rotate-primary,
  .btn-rotate-secondary {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }
  
  .rotation-icon {
    width: 60px;
    height: 60px;
  }
}

/* ============================================ */
/* ENHANCED MOBILE RESPONSIVE BREAKPOINTS */
/* ============================================ */

/* Small phones: 320px - 479px */
@media (max-width: 479px) {
  .header-container {
    padding: 0.5rem 0.75rem;
  }
  
  .logo {
    font-size: 1rem;
  }
  
  .logo-icon {
    width: 32px;
    height: 32px;
  }
  
  .language-switcher {
    gap: 4px;
    padding: 3px;
  }
  
  .lang-btn {
    padding: 8px 10px !important;
    font-size: 0.8125rem !important;
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
  }
  
  .theme-toggle-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 10px !important;
  }
  
  .games-grid {
    gap: 1rem;
    padding: 1rem 0;
  }
  
  .game-card {
    padding: 1.25rem;
  }
  
  .game-card-icon {
    width: 48px;
    height: 48px;
    font-size: 2rem;
  }
  
  .game-card-title {
    font-size: 1.125rem;
  }
  
  .game-card-description {
    font-size: 0.875rem;
  }
  
  .footer {
    padding: 1.5rem 0.75rem;
    font-size: 0.75rem;
  }
  
  .footer p {
    margin: 0.5rem 0;
  }
}

/* Large phones: 480px - 767px */
@media (min-width: 480px) and (max-width: 767px) {
  .header-container {
    padding: 0.75rem 1rem;
  }
  
  .games-grid {
    gap: 1.25rem;
  }
  
  .game-card {
    padding: 1.5rem;
  }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-container {
    padding: 1rem 1.5rem;
  }
  
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .main-container {
    padding: 1.5rem;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .header-container {
    padding: 1rem 2rem;
  }
  
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  
  .main-container {
    padding: 2rem;
  }
  
  /* Desktop: Purple gradient for active language button on all pages */
  .lang-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
  }
  
  body.dark-mode .lang-btn.active,
  body[data-theme="dark"] .lang-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
  }
}

/* ============================================ */
/* SOLITAIRE MOBILE OPTIMIZATIONS */
/* ============================================ */

/* Portrait mode - smaller cards */
@media (max-width: 767px) and (orientation: portrait) {
  .solitaire-card {
    width: 40px !important;
    height: 56px !important;
    font-size: 0.75rem !important;
  }
  
  .solitaire-tableau {
    gap: 0.25rem;
  }
  
  .solitaire-board {
    padding: 0.5rem;
  }
}

/* Landscape mode - optimal sizing */
@media (max-width: 1023px) and (orientation: landscape) {
  .solitaire-card {
    width: 50px !important;
    height: 70px !important;
    font-size: 0.875rem !important;
  }
  
  .solitaire-tableau {
    gap: 0.5rem;
  }
  
  .solitaire-game {
    padding: 0.5rem;
  }
}

/* Touch-friendly drag and drop */
.solitaire-card {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.solitaire-card:active {
  cursor: grabbing;
}

/* Prevent text selection ONLY on interactive game elements, NOT on descriptions */
/* Game container text is selectable by default - see global rules above */

/* ============================================ */
/* MOBILE/TABLET OPTIMIZATIONS - DO NOT AFFECT DESKTOP */
/* ============================================ */

/* ===== MOBILE BUTTON OPTIMIZATIONS ===== */
@media (max-width: 767px) {
  /* Mobile Header Buttons */
  .header-content {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  
  /* Language selector - compact */
  .language-switcher {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .language-switcher::-webkit-scrollbar {
    display: none;
  }
  
  .lang-btn {
    padding: 0.5rem 0.75rem;
    min-width: 48px;
    min-height: 48px;
    font-size: 0.875rem;
    flex-shrink: 0;
    height: 48px;
  }
  
  /* Theme toggle button */
  .theme-toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 0.5rem;
  }
  
  .theme-toggle-btn {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
  }
  
  /* Game Control Buttons - Mobile */
  .game-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 0 1rem;
  }
  
  .game-control-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
  }
  
  .game-btn {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  
  /* Difficulty buttons */
  .difficulty-buttons,
  .minesweeper-difficulty-selector,
  .solitaire-difficulty-selector {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .difficulty-btn {
    flex: 1;
    min-height: 48px;
    min-width: 80px;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }
  
  /* Action buttons (Undo, New Game, etc.) */
  .action-buttons,
  .game-controls-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
  }
  
  .action-btn,
  .dashboard-btn-new-game,
  .dashboard-btn-undo,
  .dashboard-btn-mute,
  #minesweeper-flag-btn {
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  /* Reserve space for ads */
  .game-container {
    padding-bottom: 60px; /* Space for bottom ad */
    padding-top: 60px; /* Space for top ad if needed */
  }
  
  .ad-space-top {
    height: 50px;
    margin-bottom: 1rem;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 0.75rem;
  }
  
  .ad-space-bottom {
    height: 50px;
    margin-top: 1rem;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 0.75rem;
  }
  
  /* Dark mode ad spaces */
  body.dark-mode .ad-space-top,
  body.dark-mode .ad-space-bottom {
    background: var(--color-bg-tertiary);
    color: var(--color-text-light);
  }
}

/* ===== MINESWEEPER MOBILE OPTIMIZATIONS ===== */
@media (max-width: 767px) {
  .minesweeper-container,
  .minesweeper-board-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 1rem;
  }
  
  .minesweeper-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    overflow: visible;
    padding: 1rem;
  }
  
  .minesweeper-grid {
    /* LARGER on mobile - scale 1.2x */
    transform: scale(1.2);
    transform-origin: center;
    margin: 2rem auto;
  }
  
  .minesweeper-cell {
    /* Larger touch targets */
    width: 45px !important;
    height: 45px !important;
    font-size: 1.25rem !important;
    border-width: 3px;
    min-width: 45px;
    min-height: 45px;
  }
  
  /* Center the game */
  .minesweeper-game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  /* Stats above grid */
  .minesweeper-dashboard {
    width: 100%;
    max-width: 400px;
    margin-bottom: 1.5rem;
  }
  
  .minesweeper-stats-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
  
  .minesweeper-stats-row .dashboard-item {
    text-align: center;
    flex: 1;
  }
  
  .dashboard-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
  }
  
  .dashboard-timer,
  .dashboard-moves,
  .dashboard-score,
  .dashboard-best-score,
  .dashboard-undo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent);
    display: block;
  }
  
  /* Controls below grid */
  .minesweeper-buttons-row {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 400px;
    flex-direction: column;
    gap: 1rem;
  }
}

/* Desktop - keep original size for Minesweeper */
@media (min-width: 768px) {
  .minesweeper-grid {
    transform: none;
  }
}

/* ===== 2048 MOBILE OPTIMIZATIONS ===== */
@media (max-width: 767px) {
  .game-2048-container,
  .game-2048-board-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 0 1rem !important;
    margin-bottom: 0 !important;
  }
  
  /* Grid 15% larger on mobile (20% - 5%) - centered */
  .grid-2048-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem auto !important;
    transform: scale(1.14) !important;
    transform-origin: center;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .grid-2048-cell {
    /* Calculate based on smaller grid */
    aspect-ratio: 1;
  }
  
  /* Numbers 15% LARGER (20% - 5%) and EXTRA BOLD */
  .tile-2048 {
    font-size: 2.211rem !important; /* 2.328rem * 0.95 = 2.211rem */
    font-weight: 800 !important; /* Extra bold */
    line-height: 1;
  }
  
  /* Specific tile sizes - all 15% larger and bold */
  .tile-2048[data-value= 2],
  .tile-2048[data-value=4] {
    font-size: 2.508rem !important; /* 2.64rem * 0.95 = 2.508rem */
    font-weight: 900 !important;
  }
  
  .tile-2048[data-value=8],
  .tile-2048[data-value=16],
  .tile-2048[data-value=32] {
    font-size: 2.211rem !important; /* 2.328rem * 0.95 = 2.211rem */
    font-weight: 800 !important;
  }
  
  .tile-2048[data-value=64],
  .tile-2048[data-value=128],
  .tile-2048[data-value=256] {
    font-size: 1.778rem !important; /* 1.872rem * 0.95 = 1.778rem */
    font-weight: 800 !important;
  }
  
  .tile-2048[data-value=512] {
    font-size: 1.778rem !important; /* 1.872rem * 0.95 = 1.778rem */
    font-weight: 800 !important;
  }
  
  .tile-2048[data-value=1024],
  .tile-2048[data-value=2048] {
    font-size: 1.562rem !important; /* 1.644rem * 0.95 = 1.562rem */
    font-weight: 800 !important;
  }
  
  .tile-2048.tile-super,
  .tile-2048[data-value]:not([data-value=2]):not([data-value=4]):not([data-value=8]):not([data-value=16]):not([data-value=32]):not([data-value=64]):not([data-value=128]):not([data-value=256]):not([data-value=512]):not([data-value=1024]):not([data-value=2048]) {
    font-size: 1.322rem !important; /* 1.392rem * 0.95 = 1.322rem */
    font-weight: 800 !important;
  }
  
  /* Stats above grid */
  #game-2048-dashboard {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
  
  /* Controls below grid */
  .game-controls-wrapper {
    margin-top: 1rem;
    width: 100%;
    max-width: 350px;
  }
  
  /* Instructions */
  .game-instructions {
    font-size: 0.875rem;
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
  }
}

/* Desktop - keep original for 2048 */
@media (min-width: 768px) {
  .grid-2048-container {
    width: 100%;
    max-width: 405px;
    transform: none;
  }
  
  .tile-2048 {
    font-size: 1.62rem;
    font-weight: 700;
  }
}

/* ============================================ */
/* MOBILE RESOLUTION OPTIMIZATIONS */
/* Optimized for all specified mobile resolutions */
/* ============================================ */

/* Very Small Phones: 320px - 359px */
@media (max-width: 359px) {
  /* Header Optimizations */
  .header {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 56px;
  }
  
  .header-container {
    padding-left: var(--spacing-xs);
    padding-right: calc(var(--spacing-xs) + 40px + var(--spacing-xs));
    gap: var(--spacing-xs);
  }
  
  .logo {
    font-size: 0.8125rem;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
  }
  
  .logo-icon {
    width: 28px;
    height: 28px;
    font-size: 0.9em;
    flex-shrink: 0;
  }
  
  .logo span {
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Hamburger Button */
  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    padding: 6px;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
  }
  
  .hamburger-line {
    height: 2.5px;
  }
  
  /* Mobile Menu */
  .mobile-menu {
    width: 90%;
    max-width: 280px;
  }
  
  .mobile-menu-header {
    padding: var(--spacing-md);
  }
  
  .mobile-menu-header h2 {
    font-size: var(--font-size-lg);
  }
  
  .mobile-menu-link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }
  
  .mobile-lang-btn {
    padding: var(--spacing-xs);
    font-size: 0.75rem;
    min-height: 40px;
  }
  
  .mobile-theme-toggle-btn {
    width: 44px;
    height: 44px;
  }
}

/* Small Phones: 360px - 374px */
@media (min-width: 360px) and (max-width: 374px) {
  /* Header Optimizations */
  .header {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 60px;
  }
  
  .header-container {
    padding-left: var(--spacing-xs);
    padding-right: calc(var(--spacing-xs) + 44px + var(--spacing-xs));
    gap: var(--spacing-sm);
  }
  
  .mobile-menu-toggle {
    top: var(--spacing-xs);
    right: var(--spacing-xs);
  }
  
  .logo {
    font-size: 0.9375rem;
    gap: var(--spacing-xs);
  }
  
  .logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  
  .logo span {
    font-size: 0.9375rem;
  }
  
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
  }
  
  /* Mobile Menu */
  .mobile-menu {
    width: 85%;
    max-width: 300px;
  }
}

/* Medium Phones: 375px - 413px (iPhone 6/7/8, iPhone X/XS, etc.) */
@media (min-width: 375px) and (max-width: 413px) {
  /* Header Optimizations */
  .header {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 64px;
  }
  
  .header-container {
    padding-left: var(--spacing-sm);
    padding-right: calc(var(--spacing-sm) + 44px + var(--spacing-sm));
    gap: var(--spacing-sm);
  }
  
  .mobile-menu-toggle {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }
  
  .logo {
    font-size: 1rem;
    gap: var(--spacing-sm);
  }
  
  .logo-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  
  .logo span {
    font-size: 1rem;
  }
  
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
  }
  
  /* Mobile Menu */
  .mobile-menu {
    width: 80%;
    max-width: 320px;
  }
}

/* Large Phones: 414px - 479px (iPhone 6/7/8 Plus, iPhone XR, etc.) */
@media (min-width: 414px) and (max-width: 479px) {
  /* Header Optimizations */
  .header {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 68px;
  }
  
  .header-container {
    padding-left: var(--spacing-sm);
    padding-right: calc(var(--spacing-sm) + 44px + var(--spacing-sm));
    gap: var(--spacing-md);
  }
  
  .mobile-menu-toggle {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }
  
  .logo {
    font-size: 1.0625rem;
    gap: var(--spacing-sm);
  }
  
  .logo-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  
  .logo span {
    font-size: 1.0625rem;
  }
  
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
  }
  
  /* Mobile Menu */
  .mobile-menu {
    width: 75%;
    max-width: 340px;
  }
  
  .mobile-menu-link {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}

/* Extra Large Phones: 480px - 639px */
@media (min-width: 480px) and (max-width: 639px) {
  /* Header Optimizations */
  .header {
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 72px;
  }
  
  .header-container {
    padding-left: var(--spacing-md);
    padding-right: calc(var(--spacing-md) + 44px + var(--spacing-sm));
    gap: var(--spacing-md);
  }
  
  .mobile-menu-toggle {
    top: var(--spacing-md);
    right: var(--spacing-md);
  }
  
  .logo {
    font-size: 1.125rem;
    gap: var(--spacing-sm);
  }
  
  .logo-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  
  .logo span {
    font-size: 1.125rem;
  }
  
  .mobile-menu-toggle {
    width: 48px;
    height: 48px;
  }
  
  /* Mobile Menu */
  .mobile-menu {
    width: 70%;
    max-width: 360px;
  }
  
  .mobile-menu-content {
    padding: var(--spacing-lg);
  }
  
  .mobile-menu-section h3 {
    font-size: var(--font-size-xl);
  }
}

/* Landscape Orientation Optimizations */
@media (max-width: 915px) and (orientation: landscape) {
  /* Header Optimizations for Landscape */
  .header {
    padding: var(--spacing-xs) var(--spacing-md);
    min-height: 56px;
  }
  
  .header-container {
    padding-left: var(--spacing-xs);
    padding-right: calc(var(--spacing-xs) + 40px + var(--spacing-xs));
    gap: var(--spacing-xs);
  }
  
  .mobile-menu-toggle {
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: 40px;
    height: 40px;
  }
  
  .logo {
    font-size: 0.9375rem;
    gap: var(--spacing-xs);
  }
  
  .logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  
  .logo span {
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    padding: 6px;
  }
  
  /* Mobile Menu */
  .mobile-menu {
    max-height: 100vh;
    overflow-y: auto;
    width: 70%;
    max-width: 320px;
  }
  
  .mobile-menu-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .mobile-menu-header h2 {
    font-size: var(--font-size-lg);
  }
  
  .mobile-menu-section {
    margin-bottom: var(--spacing-md);
  }
  
  .mobile-menu-link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }
}

/* Height-specific optimizations for very tall screens */
@media (max-width: 480px) and (min-height: 800px) {
  .mobile-menu-content {
    padding-bottom: var(--spacing-2xl);
  }
  
  .mobile-menu-section {
    margin-bottom: var(--spacing-lg);
  }
}

/* Height-specific optimizations for very short screens (landscape) */
@media (max-width: 915px) and (max-height: 480px) and (orientation: landscape) {
  .mobile-menu-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .mobile-menu-header h2 {
    font-size: var(--font-size-base);
  }
  
  .mobile-menu-section {
    margin-bottom: var(--spacing-md);
  }
  
  .mobile-menu-section h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }
  
  .mobile-menu-link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }
  
  .mobile-lang-btn {
    padding: var(--spacing-xs);
    min-height: 36px;
    font-size: 0.75rem;
  }
}

/* Specific optimizations for common resolutions */
/* iPhone SE (320x568) and similar */
@media (width: 320px) {
  .header {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .logo span {
    font-size: 0.8125rem;
  }
  
  .mobile-menu {
    width: 92%;
  }
}

/* iPhone 12/13 Mini (375x812) */
@media (width: 375px) and (height: 812px) {
  .header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .mobile-menu {
    width: 82%;
  }
}

/* iPhone 12/13/14 (390x844) */
@media (width: 390px) and (height: 844px) {
  .header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .mobile-menu {
    width: 80%;
  }
}

/* iPhone 14 Pro Max (430x932) */
@media (width: 430px) and (height: 932px) {
  .header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .mobile-menu {
    width: 75%;
    max-width: 340px;
  }
}

/* Galaxy S20/S21 (360x800) */
@media (width: 360px) and (height: 800px) {
  .header {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .mobile-menu {
    width: 85%;
  }
}

/* Pixel 5 (393x852) */
@media (width: 393px) and (height: 852px) {
  .header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .mobile-menu {
    width: 78%;
  }
}

/* Additional specific resolutions */
/* 320x480 (iPhone 3GS, etc.) */
@media (width: 320px) and (height: 480px) {
  .header {
    min-height: 52px;
  }
  
  .logo-icon {
    width: 26px;
    height: 26px;
  }
}

/* 360x640 (Galaxy S5, etc.) */
@media (width: 360px) and (height: 640px) {
  .header {
    min-height: 60px;
  }
}

/* 375x667 (iPhone 6/7/8) */
@media (width: 375px) and (height: 667px) {
  .header {
    min-height: 64px;
  }
}

/* 414x736 (iPhone 6/7/8 Plus) */
@media (width: 414px) and (height: 736px) {
  .header {
    min-height: 68px;
  }
}

/* 412x915 (Galaxy Note 10, etc.) */
@media (width: 412px) and (height: 915px) {
  .header {
    min-height: 68px;
  }
  
  .mobile-menu {
    width: 75%;
    max-width: 340px;
  }
}

/* 428x926 (iPhone 12/13 Pro Max) */
@media (width: 428px) and (height: 926px) {
  .header {
    min-height: 72px;
  }
  
  .mobile-menu {
    width: 75%;
    max-width: 350px;
  }
}

/* 720x1280 (Tablets in portrait) */
@media (width: 720px) and (height: 1280px) {
  .header {
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 76px;
  }
  
  .logo {
    font-size: 1.25rem;
  }
  
  .logo-icon {
    width: 48px;
    height: 48px;
  }
  
  .mobile-menu {
    width: 65%;
    max-width: 400px;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  @media (max-width: 1023px) {
    .mobile-menu {
      padding-top: max(0px, env(safe-area-inset-top));
      padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    .mobile-menu-header {
      padding-top: max(var(--spacing-lg), calc(var(--spacing-lg) + env(safe-area-inset-top)));
    }
  }
}

/* ============================================ */
/* GAMES MOBILE OPTIMIZATIONS FOR ALL RESOLUTIONS */
/* ============================================ */

/* Solitaire - All Mobile Resolutions */
@media (max-width: 1023px) {
  /* Solitaire Board - Responsive for all screen sizes */
  .solitaire-board {
    padding: var(--spacing-xs);
    width: 100%;
    max-width: 100vw;
    overflow-x: visible;
  }
  
  .solitaire-grid-container {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 4px;
    padding: 0;
  }
  
  .solitaire-tableau-zone {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 4px;
  }
  
  /* Card sizes adapt to screen width */
  .solitaire-card {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }
  
  .solitaire-card:active {
    cursor: grabbing;
    transform: scale(1.05);
    z-index: 1000;
  }
}

/* Solitaire - Very Small Screens (320px - 359px) */
@media (max-width: 359px) {
  .solitaire-grid-container,
  .solitaire-tableau-zone {
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  
  .solitaire-card {
    width: calc((100vw - 2rem - 12px) / 7) !important;
    height: calc((100vw - 2rem - 12px) / 7 * 1.4) !important;
    font-size: 0.65rem !important;
  }
  
  .solitaire-dashboard {
    padding: var(--spacing-xs);
    gap: var(--spacing-xs);
  }
  
  .dashboard-item {
    min-width: 60px;
    padding: var(--spacing-xs);
  }
  
  .dashboard-label {
    font-size: 0.6rem;
  }
  
  .dashboard-timer,
  .dashboard-moves,
  .dashboard-score,
  .dashboard-best-score {
    font-size: 0.8rem;
  }
}

/* Solitaire - Small to Medium Screens (360px - 479px) */
@media (min-width: 360px) and (max-width: 479px) {
  .solitaire-card {
    width: calc((100vw - 2rem - 24px) / 7) !important;
    height: calc((100vw - 2rem - 24px) / 7 * 1.4) !important;
    font-size: 0.7rem !important;
  }
  
  .solitaire-grid-container,
  .solitaire-tableau-zone {
    gap: 3px;
  }
}

/* Solitaire - Large Screens (480px+) */
@media (min-width: 480px) and (max-width: 1023px) {
  .solitaire-card {
    width: calc((100vw - 4rem - 36px) / 7) !important;
    height: calc((100vw - 4rem - 36px) / 7 * 1.4) !important;
    font-size: 0.75rem !important;
  }
  
  .solitaire-grid-container,
  .solitaire-tableau-zone {
    gap: 4px;
  }
}

/* 2048 - All Mobile Resolutions */
@media (max-width: 767px) {
  .grid-2048-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--spacing-xs);
    margin: var(--spacing-sm) auto !important;
    transform: scale(1.14) !important;
    transform-origin: center;
  }
  
  .grid-2048 {
    width: 100%;
    max-width: 100%;
  }
  
  /* Touch-friendly tile sizes */
  .tile-2048 {
    font-weight: 800 !important;
    touch-action: none;
    user-select: none;
  }
}

/* 2048 - Very Small Screens (320px - 359px) */
@media (max-width: 359px) {
  .grid-2048-container {
    max-width: 100% !important;
    padding: 5px;
    transform: scale(1.14) !important;
    transform-origin: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .tile-2048 {
    font-size: 1.71rem !important; /* 1.8rem * 0.95 = 1.71rem */
  }
  
  #game-2048-dashboard {
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
  }
  
  .dashboard-item {
    min-width: 50px;
  }
}

/* 2048 - Small to Medium Screens (360px - 479px) */
@media (min-width: 360px) and (max-width: 479px) {
  .grid-2048-container {
    max-width: 100% !important;
    transform: scale(1.14) !important;
    transform-origin: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .tile-2048 {
    font-size: 1.938rem !important; /* 2.04rem * 0.95 = 1.938rem */
  }
}

/* 2048 - Large Screens (480px+) */
@media (min-width: 480px) and (max-width: 767px) {
  .grid-2048-container {
    max-width: 100% !important;
    transform: scale(1.14) !important;
    transform-origin: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .tile-2048 {
    font-size: 2.052rem !important; /* 2.16rem * 0.95 = 2.052rem */
  }
}

/* Minesweeper - All Mobile Resolutions */
@media (max-width: 1023px) {
  .minesweeper-grid-container {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-xs);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .minesweeper-grid {
    margin: 0 auto;
  }
  
  .minesweeper-cell {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  
  .minesweeper-cell:active {
    transform: scale(0.95);
  }
}

/* Minesweeper - Very Small Screens (320px - 359px) */
@media (max-width: 359px) {
  .minesweeper-grid {
    transform: scale(1.1);
    transform-origin: center;
  }
  
  .minesweeper-cell {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    border-width: 2px;
  }
  
  .minesweeper-dashboard {
    padding: var(--spacing-xs);
  }
  
  .minesweeper-stats-row {
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
  }
  
  .dashboard-item {
    min-width: 50px;
    padding: var(--spacing-xs);
  }
}

/* Minesweeper - Small to Medium Screens (360px - 479px) */
@media (min-width: 360px) and (max-width: 479px) {
  .minesweeper-grid {
    transform: scale(1.15);
    transform-origin: center;
  }
  
  .minesweeper-cell {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.15rem !important;
  }
}

/* Minesweeper - Large Screens (480px+) */
@media (min-width: 480px) and (max-width: 1023px) {
  .minesweeper-grid {
    transform: scale(1.2);
    transform-origin: center;
  }
  
  .minesweeper-cell {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.25rem !important;
  }
}

/* Game Dashboards - All Mobile Resolutions */
@media (max-width: 1023px) {
  .solitaire-dashboard,
  #game-2048-dashboard,
  .minesweeper-dashboard {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md);
  }
  
  /* ALL GAME BUTTONS - Same size as difficulty buttons (Easy, Normal, Hard) */
  /* Use the same dimensions as .difficulty-btn on mobile */
  .dashboard-btn-new-game,
  .btn-new-game,
  .btn-undo,
  .btn-flag,
  .btn-sound,
  .dashboard-btn-undo,
  .dashboard-btn-mute,
  #minesweeper-flag-btn,
  .game-controls-wrapper .dashboard-btn-new-game,
  #game-2048-dashboard .dashboard-btn-new-game,
  #minesweeper-dashboard .dashboard-btn-new-game,
  #minesweeper-dashboard .btn-new-game,
  #minesweeper-dashboard .btn-undo,
  #minesweeper-dashboard .btn-flag,
  #minesweeper-dashboard .btn-sound {
    /* Same as difficulty buttons on mobile */
    padding: calc(var(--spacing-sm) * 0.5) calc(var(--spacing-md) * 0.8) !important;
    font-size: calc(var(--font-size-sm) * 0.75) !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    min-width: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.2);
    box-sizing: border-box;
  }
  
  /* REMOVED SPECIFIC BUTTON OVERRIDES - Using uniform dashboard rules for all games */
  
  /* Button icons - adjust size for all games */
  .dashboard-btn-new-game svg,
  .btn-new-game svg,
  .btn-undo svg,
  .btn-flag svg,
  .btn-sound svg,
  #solitaire-dashboard .dashboard-btn-new-game svg,
  #solitaire-dashboard .game-controls-wrapper button svg,
  #solitaire-dashboard #solitaire-undo-btn svg,
  #solitaire-dashboard #solitaire-sound-btn svg,
  #solitaire-dashboard button svg,
  .solitaire-dashboard .dashboard-btn-new-game svg,
  .solitaire-dashboard .game-controls-wrapper button svg,
  .solitaire-dashboard #solitaire-undo-btn svg,
  .solitaire-dashboard #solitaire-sound-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  
  .dashboard-btn-new-game:active,
  .btn-new-game:active,
  .btn-undo:active,
  .btn-flag:active,
  .btn-sound:active {
    transform: scale(0.95);
    opacity: 0.9;
  }
  
  /* REMOVED old difficulty button specific rules - using uniform dashboard rules */
}

/* ============================================ */
/* HOMEPAGE MOBILE OPTIMIZATIONS FOR ALL RESOLUTIONS */
/* ============================================ */

/* Homepage - All Mobile Resolutions */
@media (max-width: 1023px) {
  .home-page {
    padding: var(--spacing-sm);
  }
  
  .home-page header.text-center {
    padding: var(--spacing-md) var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }
  
  .home-page h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
  }
  
  .home-page .lead-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    padding: 0 var(--spacing-sm);
  }
  
  .home-page h2.text-center.mb-lg {
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  
  /* Games Grid - Mobile */
  .games-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding: 0 var(--spacing-xs);
  }
  
  /* Game Cards - Touch Optimized */
  .game-card {
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.15);
    transition: all 0.2s ease;
  }
  
  .game-card:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
  
  .game-card-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .game-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
  }
  
  .game-card-description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    padding: 0 var(--spacing-xs);
  }
}

/* Homepage - Very Small Screens (320px - 359px) */
@media (max-width: 359px) {
  .home-page {
    padding: var(--spacing-xs);
  }
  
  .home-page header.text-center {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
  
  .home-page h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
  }
  
  .home-page .lead-text {
    font-size: 0.875rem;
    padding: 0;
  }
  
  .home-page h2.text-center.mb-lg {
    font-size: var(--font-size-lg);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
  }
  
  .games-grid {
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: 0;
  }
  
  .game-card {
    padding: var(--spacing-md);
    min-height: 120px;
    border-radius: var(--radius-md);
  }
  
  .game-card-icon {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacing-xs);
  }
  
  .game-card-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
  }
  
  .game-card-description {
    font-size: 0.8125rem;
    line-height: 1.4;
  }
}

/* Homepage - Small to Medium Screens (360px - 479px) */
@media (min-width: 360px) and (max-width: 479px) {
  .home-page h1 {
    font-size: var(--font-size-2xl);
  }
  
  .home-page .lead-text {
    font-size: var(--font-size-base);
  }
  
  .game-card {
    padding: var(--spacing-lg);
    min-height: 130px;
  }
  
  .game-card-icon {
    font-size: 2.25rem;
    width: 60px;
    height: 60px;
  }
}

/* Homepage - Large Screens (480px - 1023px) */
@media (min-width: 480px) and (max-width: 1023px) {
  .home-page {
    padding: var(--spacing-md);
  }
  
  .home-page h1 {
    font-size: var(--font-size-3xl);
  }
  
  .home-page .lead-text {
    font-size: var(--font-size-lg);
  }
  
  .games-grid {
    gap: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .game-card {
    padding: var(--spacing-xl);
    min-height: 150px;
  }
  
  .game-card-icon {
    font-size: 2.75rem;
    width: 72px;
    height: 72px;
  }
  
  .game-card-title {
    font-size: var(--font-size-xl);
  }
  
  .game-card-description {
    font-size: var(--font-size-base);
  }
}

/* Homepage - Landscape Orientation */
@media (max-width: 915px) and (orientation: landscape) {
  .home-page header.text-center {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
  
  .home-page h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
  }
  
  .home-page .lead-text {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .home-page h2.text-center.mb-lg {
    font-size: var(--font-size-lg);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
  }
  
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
  }
  
  .game-card {
    padding: var(--spacing-md);
    min-height: 110px;
  }
  
  .game-card-icon {
    font-size: 1.75rem;
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-xs);
  }
  
  .game-card-title {
    font-size: var(--font-size-base);
  }
  
  .game-card-description {
    font-size: 0.8125rem;
  }
}

/* Main Container - Mobile Optimizations */
@media (max-width: 1023px) {
  .main-container {
    padding: var(--spacing-sm);
    min-height: calc(100vh - var(--header-height, 60px) - var(--footer-height, 50px));
  }
  
  /* Text Content */
  .text-center {
    padding: 0 var(--spacing-sm);
  }
  
  /* Footer - Mobile: Hide links, keep only copyright */
  .footer {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.75rem;
  }
  
  .footer p {
    margin: var(--spacing-xs) 0;
    line-height: 1.4;
  }
  
  /* Hide footer links paragraph on mobile - they're in hamburger menu */
  /* Keep only copyright (first paragraph) visible */
  .footer p:not(:first-child) {
    display: none !important;
  }
  
  /* Ensure copyright is visible */
  .footer p:first-child {
    display: block !important;
    margin: var(--spacing-xs) 0;
    text-align: center;
  }
}

/* ============================================
   UNIFORM MUTE/UNMUTE BUTTON - ALL GAMES
   ============================================ */

.uniform-mute-btn {
  /* Base styling */
  border: 2px solid #B3B3B3;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: none;
  background: #CCCCCC !important;
  color: #333333 !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Muted state - RED */
.uniform-mute-btn[data-muted="true"] {
  background: #dc2626 !important;
  border: 2px solid #b91c1c !important;
  color: #ffffff !important;
}

/* Icon styling */
.uniform-mute-btn .mute-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.uniform-mute-btn svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover effect */
.uniform-mute-btn:hover:not(:active) {
  background: #B8B8B8 !important;
  border: 2px solid #A8A8A8 !important;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.uniform-mute-btn[data-muted="true"]:hover:not(:active) {
  background: #b91c1c !important;
  border: 2px solid #991b1b !important;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4);
}

/* Active/press effect */
.uniform-mute-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.uniform-mute-btn[data-muted="true"]:active {
  box-shadow: none;
}

/* Focus outline for accessibility */
.uniform-mute-btn:focus-visible {
  outline: 3px solid rgba(179, 179, 179, 0.8);
  outline-offset: 2px;
}

.uniform-mute-btn[data-muted="true"]:focus-visible {
  outline: 3px solid rgba(220, 38, 38, 0.8);
  outline-offset: 2px;
}

/* Pulse animation on toggle */
.uniform-mute-btn.mute-btn-pulse {
  animation: muteBtnPulse 0.3s ease;
}

@keyframes muteBtnPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Size variants */
.uniform-mute-btn[style*="32px"] {
  border-radius: 8px;
}

.uniform-mute-btn[style*="32px"] svg {
  width: 18px;
  height: 18px;
}

.uniform-mute-btn[style*="48px"] {
  border-radius: 12px;
}

.uniform-mute-btn[style*="48px"] svg {
  width: 28px;
  height: 28px;
}

/* Mobile optimizations */
@media (max-width: 1023px) {
  .uniform-mute-btn {
    /* Ensure 48px touch target on mobile */
    min-width: 48px;
    min-height: 48px;
    width: 48px !important;
    height: 48px !important;
  }
  
  .uniform-mute-btn svg {
    width: 24px;
    height: 24px;
  }
  
  /* Larger touch area */
  .uniform-mute-btn::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
  }
}

/* Desktop positioning in header */
.header-container .uniform-mute-btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 100;
}

/* Dark mode support */
body.dark-mode .uniform-mute-btn {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 2px solid #1a1a1a !important;
  box-shadow: none;
}

body.dark-mode .uniform-mute-btn[data-muted="true"] {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 2px solid #b91c1c !important;
  box-shadow: none;
}

body.dark-mode .uniform-mute-btn:hover:not(:active) {
  background: #141414 !important;
  border: 2px solid #242424 !important;
  box-shadow: none;
}

body.dark-mode .uniform-mute-btn[data-muted="true"]:hover:not(:active) {
  background: #b91c1c !important;
  border: 2px solid #991b1b !important;
  box-shadow: none;
}

/* ============================================
   ALL GAME BUTTONS - UNIFORM STYLING
   Purple gradient background, 44px height
   ============================================ */

/* All game buttons - New Game, Undo, Difficulty, etc. */
.dashboard-btn-new-game,
.difficulty-btn,
.game-difficulty-btn,
.btn-new-game,
.btn-undo,
.btn-sound,
.btn-flag,
.mute-button,
.chess-sound-btn,
.backgammon-sound-btn,
.snake-sound-btn,
.mahjong-sound-btn,
.fir-sound-btn,
.sudoku-sound-btn {
  background: #CCCCCC !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 0 !important;
  border: 2px solid #B3B3B3 !important;
  color: #333333 !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--spacing-md) !important;
}

/* Hover effect for all game buttons */
.dashboard-btn-new-game:hover:not(:active),
.difficulty-btn:hover:not(:active),
.game-difficulty-btn:hover:not(:active),
.btn-new-game:hover:not(:active),
.btn-undo:hover:not(:active),
.btn-sound:hover:not(:active),
.btn-flag:hover:not(:active),
.mute-button:hover:not(:active),
.chess-sound-btn:hover:not(:active),
.backgammon-sound-btn:hover:not(:active),
.snake-sound-btn:hover:not(:active),
.mahjong-sound-btn:hover:not(:active),
.fir-sound-btn:hover:not(:active),
.sudoku-sound-btn:hover:not(:active) {
  background: #B8B8B8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Active/press effect */
.dashboard-btn-new-game:active,
.difficulty-btn:active,
.game-difficulty-btn:active,
.btn-new-game:active,
.btn-undo:active,
.btn-sound:active,
.btn-flag:active,
.mute-button:active,
.chess-sound-btn:active,
.backgammon-sound-btn:active,
.snake-sound-btn:active,
.mahjong-sound-btn:active,
.fir-sound-btn:active,
.sudoku-sound-btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Active state for difficulty buttons */
.difficulty-btn.active,
.game-difficulty-btn.active {
  background: #A0A0A0 !important;
  border: 2px solid #909090 !important;
  color: #222222 !important;
  box-shadow: none !important;
}

/* Focus outline for accessibility */
.dashboard-btn-new-game:focus-visible,
.difficulty-btn:focus-visible,
.game-difficulty-btn:focus-visible,
.btn-new-game:focus-visible,
.btn-undo:focus-visible,
.btn-sound:focus-visible,
.btn-flag:focus-visible,
.mute-button:focus-visible,
.chess-sound-btn:focus-visible,
.backgammon-sound-btn:focus-visible,
.snake-sound-btn:focus-visible,
.mahjong-sound-btn:focus-visible,
.fir-sound-btn:focus-visible,
.sudoku-sound-btn:focus-visible {
  outline: 3px solid rgba(179, 179, 179, 0.8) !important;
  outline-offset: 2px !important;
}

/* Mobile - all control buttons 20px height, 2px gap, rectangular and no shadows */
@media (max-width: 1023px) {
  /* SOLITAIRE SPECIFIC - Must come after general rules to override them */
  #solitaire-dashboard .game-controls-wrapper .dashboard-btn-new-game,
  #solitaire-dashboard .game-controls-wrapper #solitaire-undo-btn,
  #solitaire-dashboard .game-controls-wrapper .mute-button,
  #solitaire-dashboard .game-controls-wrapper .uniform-mute-btn,
  #solitaire-dashboard .game-controls-wrapper .solitaire-mute-btn,
  #solitaire-dashboard .dashboard-btn-new-game,
  #solitaire-dashboard #solitaire-undo-btn,
  #solitaire-dashboard .mute-button,
  #solitaire-dashboard .uniform-mute-btn,
  #solitaire-dashboard .solitaire-mute-btn {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 2px solid #B3B3B3 !important;
    color: #333333 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }
  /* Mute button - 24px height, full width */
  #solitaire-dashboard .mute-button,
  #solitaire-dashboard .uniform-mute-btn,
  #solitaire-dashboard .solitaire-mute-btn {
    padding: 0 !important;
    width: 100% !important;
  }
  
  /* Solitaire mute button - 24px height, full width */
  #solitaire-dashboard .mute-button,
  #solitaire-dashboard .uniform-mute-btn,
  #solitaire-dashboard .solitaire-mute-btn {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    width: 100% !important;
    min-width: 24px !important;
    max-width: none !important;
    padding: 0 !important;
  }
  
  /* Solitaire mute button icon */
  #solitaire-dashboard .mute-button svg,
  #solitaire-dashboard .uniform-mute-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Only control buttons and difficulty buttons - NOT game board buttons */
  .dashboard-btn-new-game,
  .difficulty-btn,
  .game-difficulty-btn,
  .btn-new-game,
  .btn-undo,
  .btn-sound,
  .btn-flag,
  .chess-sound-btn,
  .backgammon-sound-btn,
  .mute-button,
  .snake-sound-btn,
  .mahjong-sound-btn,
  .fir-sound-btn,
  .sudoku-sound-btn,
  #game-2048-dashboard .dashboard-btn-new-game,
  #game-2048-dashboard .mute-button,
  #minesweeper-dashboard .dashboard-btn-new-game,
  #minesweeper-dashboard .difficulty-btn,
  #minesweeper-dashboard .btn-flag,
  #minesweeper-dashboard .mute-button,
  .chess-difficulty-buttons-inline .game-difficulty-btn,
  .chess-difficulty-buttons-inline .dashboard-btn-new-game,
  .backgammon-difficulty-buttons-inline .game-difficulty-btn,
  .backgammon-difficulty-buttons-inline .dashboard-btn-new-game,
  button.dashboard-btn-new-game,
  button.difficulty-btn,
  button.game-difficulty-btn,
  .game-controls-wrapper button:not([data-square]):not([data-board]),
  .dashboard-controls-section button:not([data-square]):not([data-board]),
  .snake-toolbar button,
  .mahjong-toolbar button,
  .fir-toolbar button {
    min-height: 20px !important;
    height: 20px !important;
    max-height: 20px !important;
    border-radius: 0 !important; /* Rectangular buttons on mobile */
    box-shadow: none !important; /* No shadows on mobile */
  }
  
  /* Sudoku buttons: uniform size on mobile */
  .sudoku-toolbar button,
  .sudoku-toolbar .dashboard-btn-new-game,
  .sudoku-toolbar .game-difficulty-btn,
  .sudoku-toolbar .sudoku-sound-btn {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    border-radius: 0 !important; /* Rectangular buttons on mobile */
    box-shadow: none !important; /* No shadows on mobile */
    flex: 1 1 0;
    min-width: 0;
  }
  
  .sudoku-toolbar > div {
    gap: 2px !important;
  }
}

/* Remove shadows from Snake, Sudoku, Mahjong, Four in a Row buttons - ALL SCREENS */
.snake-toolbar button,
.snake-toolbar .dashboard-btn-new-game,
.snake-toolbar .game-difficulty-btn,
.snake-toolbar .snake-sound-btn,
.mahjong-toolbar button,
.mahjong-toolbar .dashboard-btn-new-game,
.mahjong-toolbar .game-difficulty-btn,
.mahjong-toolbar .mahjong-sound-btn,
.fir-toolbar button,
.fir-toolbar .dashboard-btn-new-game,
.fir-toolbar .game-difficulty-btn,
.fir-toolbar .fir-sound-btn,
.sudoku-toolbar button,
.sudoku-toolbar .dashboard-btn-new-game,
.sudoku-toolbar .sudoku-sound-btn {
  box-shadow: none !important;
}

.snake-toolbar button:hover,
.snake-toolbar button:active,
.snake-toolbar .dashboard-btn-new-game:hover,
.snake-toolbar .dashboard-btn-new-game:active,
.snake-toolbar .game-difficulty-btn:hover,
.snake-toolbar .game-difficulty-btn:active,
.snake-toolbar .snake-sound-btn:hover,
.snake-toolbar .snake-sound-btn:active,
.mahjong-toolbar button:hover,
.mahjong-toolbar button:active,
.mahjong-toolbar .dashboard-btn-new-game:hover,
.mahjong-toolbar .dashboard-btn-new-game:active,
.mahjong-toolbar .game-difficulty-btn:hover,
.mahjong-toolbar .game-difficulty-btn:active,
.mahjong-toolbar .mahjong-sound-btn:hover,
.mahjong-toolbar .mahjong-sound-btn:active,
.fir-toolbar button:hover,
.fir-toolbar button:active,
.fir-toolbar .dashboard-btn-new-game:hover,
.fir-toolbar .dashboard-btn-new-game:active,
.fir-toolbar .game-difficulty-btn:hover,
.fir-toolbar .game-difficulty-btn:active,
.fir-toolbar .fir-sound-btn:hover,
.fir-toolbar .fir-sound-btn:active,
.sudoku-toolbar button:hover,
.sudoku-toolbar button:active,
.sudoku-toolbar .dashboard-btn-new-game:hover,
.sudoku-toolbar .dashboard-btn-new-game:active,
.sudoku-toolbar .sudoku-sound-btn:hover,
.sudoku-toolbar .sudoku-sound-btn:active {
  box-shadow: none !important;
}

.snake-toolbar .game-difficulty-btn.active,
.mahjong-toolbar .game-difficulty-btn.active,
.fir-toolbar .game-difficulty-btn.active {
  box-shadow: none !important;
}

@media (max-width: 1023px) {
  
  /* 2px gap between control buttons on mobile - NOT game board */
  .game-controls-wrapper:not([data-board]):not([data-square]),
  .dashboard-controls-section:not([data-board]):not([data-square]),
  .solitaire-difficulty-selector,
  .minesweeper-difficulty-selector,
  .chess-difficulty-buttons-inline,
  .backgammon-difficulty-buttons-inline,
  .snake-toolbar,
  .mahjong-toolbar,
  .fir-toolbar,
  .sudoku-toolbar,
  .backgammon-toolbar,
  .chess-toolbar {
    gap: 2px !important;
  }
  
  /* Remove shadows on hover and active states on mobile */
  .dashboard-btn-new-game:hover,
  .difficulty-btn:hover,
  .game-difficulty-btn:hover,
  .btn-new-game:hover,
  .btn-undo:hover,
  .btn-sound:hover,
  .btn-flag:hover,
  .chess-sound-btn:hover,
  .backgammon-sound-btn:hover,
  .mute-button:hover,
  .snake-sound-btn:hover,
  .mahjong-sound-btn:hover,
  .fir-sound-btn:hover,
  .sudoku-sound-btn:hover,
  .dashboard-btn-new-game:active,
  .difficulty-btn:active,
  .game-difficulty-btn:active,
  .btn-new-game:active,
  .btn-undo:active,
  .btn-sound:active,
  .btn-flag:active,
  .chess-sound-btn:active,
  .backgammon-sound-btn:active,
  .mute-button:active,
  .snake-sound-btn:active,
  .mahjong-sound-btn:active,
  .fir-sound-btn:active,
  .sudoku-sound-btn:active,
  .difficulty-btn.active,
  .game-difficulty-btn.active,
  .snake-toolbar button:hover,
  .snake-toolbar button:active,
  .mahjong-toolbar button:hover,
  .mahjong-toolbar button:active,
  .fir-toolbar button:hover,
  .fir-toolbar button:active,
  .sudoku-toolbar button:hover,
  .sudoku-toolbar button:active {
    box-shadow: none !important; /* No shadows on mobile */
    border-radius: 0 !important; /* Rectangular buttons on mobile */
  }
}

/* Dark mode adjustments */
body.dark-mode .dashboard-btn-new-game,
body.dark-mode .difficulty-btn,
body.dark-mode .game-difficulty-btn,
body.dark-mode .btn-new-game,
body.dark-mode .btn-undo,
body.dark-mode .btn-sound,
body.dark-mode .btn-flag,
body.dark-mode .mute-button,
body.dark-mode .chess-sound-btn,
body.dark-mode .backgammon-sound-btn,
body.dark-mode .snake-sound-btn,
body.dark-mode .mahjong-sound-btn,
body.dark-mode .fir-sound-btn,
body.dark-mode .sudoku-sound-btn {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 2px solid #1a1a1a !important;
  box-shadow: none !important;
}

body.dark-mode .difficulty-btn {
  background: #0a0a0a !important;
  border: 2px solid #1a1a1a !important;
  color: #ffffff !important;
}

body.dark-mode .difficulty-btn:hover {
  background: #141414 !important;
  border: 2px solid #242424 !important;
  color: #ffffff !important;
}

body.dark-mode .difficulty-btn.active {
  background: #1a1a1a !important;
  border: 2px solid #2a2a2a !important;
  color: #ffffff !important;
}

body.dark-mode .dashboard-btn-new-game:hover:not(:active),
body.dark-mode .difficulty-btn:hover:not(:active),
body.dark-mode .game-difficulty-btn:hover:not(:active),
body.dark-mode .btn-new-game:hover:not(:active),
body.dark-mode .btn-undo:hover:not(:active),
body.dark-mode .btn-sound:hover:not(:active),
body.dark-mode .btn-flag:hover:not(:active),
body.dark-mode .mute-button:hover:not(:active),
body.dark-mode .chess-sound-btn:hover:not(:active),
body.dark-mode .backgammon-sound-btn:hover:not(:active),
body.dark-mode .snake-sound-btn:hover:not(:active),
body.dark-mode .mahjong-sound-btn:hover:not(:active),
body.dark-mode .fir-sound-btn:hover:not(:active),
body.dark-mode .sudoku-sound-btn:hover:not(:active) {
  background: #141414 !important;
  border: 2px solid #242424 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* SOLITAIRE MOBILE - FINAL OVERRIDE - Must be at the end to override all other rules */
@media (max-width: 1023px) {
  /* Solitaire: New Game, Undo, Mute buttons - FINAL override with maximum specificity - 24px height */
  #solitaire-dashboard .game-controls-wrapper .dashboard-btn-new-game,
  #solitaire-dashboard .game-controls-wrapper button.dashboard-btn-new-game,
  #solitaire-dashboard .game-controls-wrapper #solitaire-undo-btn,
  #solitaire-dashboard .game-controls-wrapper button#solitaire-undo-btn,
  #solitaire-dashboard .game-controls-wrapper .mute-button,
  #solitaire-dashboard .game-controls-wrapper .uniform-mute-btn,
  #solitaire-dashboard .game-controls-wrapper .solitaire-mute-btn,
  #solitaire-dashboard .dashboard-btn-new-game,
  #solitaire-dashboard button.dashboard-btn-new-game,
  #solitaire-dashboard #solitaire-undo-btn,
  #solitaire-dashboard button#solitaire-undo-btn,
  #solitaire-dashboard .mute-button,
  #solitaire-dashboard .uniform-mute-btn,
  #solitaire-dashboard .solitaire-mute-btn {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
  }
  
  /* Solitaire mute button - 24px height, full width in grid */
  #solitaire-dashboard .mute-button,
  #solitaire-dashboard .uniform-mute-btn,
  #solitaire-dashboard .solitaire-mute-btn {
    width: 100% !important;
    min-width: 24px !important;
    max-width: none !important;
    padding: 0 !important;
  }
  
  /* Solitaire mute button icon - smaller to fit */
  #solitaire-dashboard .mute-button svg,
  #solitaire-dashboard .uniform-mute-btn svg,
  #solitaire-dashboard .solitaire-mute-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Remove hover/active effects on Solitaire buttons */
  #solitaire-dashboard .game-controls-wrapper .dashboard-btn-new-game:hover,
  #solitaire-dashboard .game-controls-wrapper #solitaire-undo-btn:hover,
  #solitaire-dashboard .game-controls-wrapper .mute-button:hover,
  #solitaire-dashboard .game-controls-wrapper .dashboard-btn-new-game:active,
  #solitaire-dashboard .game-controls-wrapper #solitaire-undo-btn:active,
  #solitaire-dashboard .game-controls-wrapper .mute-button:active {
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  
  /* Chess: Mute button - rectangular, 20px height on mobile */
  .chess-root .mute-button,
  .chess-root .uniform-mute-btn,
  .chess-root .chess-mute-btn,
  .chess-root .game-controls-wrapper .mute-button,
  .chess-root .game-controls-wrapper .uniform-mute-btn,
  .chess-root .game-controls-wrapper .chess-mute-btn,
  .chess-sound-button-container .mute-button,
  .chess-sound-button-container .uniform-mute-btn,
  .chess-sound-button-container .chess-mute-btn {
    min-height: 20px !important;
    height: 20px !important;
    max-height: 20px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;
  }
  
  /* Chess mute button icon - smaller to fit */
  .chess-root .mute-button svg,
  .chess-root .uniform-mute-btn svg,
  .chess-root .chess-mute-btn svg,
  .chess-sound-button-container .mute-button svg,
  .chess-sound-button-container .uniform-mute-btn svg,
  .chess-sound-button-container .chess-mute-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Remove hover/active effects on Chess mute button */
  .chess-root .mute-button:hover,
  .chess-root .uniform-mute-btn:hover,
  .chess-root .chess-mute-btn:hover,
  .chess-root .mute-button:active,
  .chess-root .uniform-mute-btn:active,
  .chess-root .chess-mute-btn:active {
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* Solitaire Mobile - Grid Layout for Buttons (3 columns, 2 rows) */
@media (max-width: 767px) {
  /* Solitaire Dashboard - Grid layout: Row 1 (Difficulty), Row 2 (Controls) */
  #solitaire-dashboard .dashboard-controls-section {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Row 1: Difficulty buttons - Easy, Normal, Hard */
  #solitaire-dashboard .solitaire-difficulty-selector {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Row 2: Control buttons - New Game, Undo, Mute */
  #solitaire-dashboard .game-controls-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: stretch !important;
  }
  
  /* All buttons - 24px height, rectangular, 2px gap */
  #solitaire-dashboard .solitaire-difficulty-selector .difficulty-btn,
  #solitaire-dashboard .game-controls-wrapper .dashboard-btn-new-game,
  #solitaire-dashboard .game-controls-wrapper button.dashboard-btn-new-game,
  #solitaire-dashboard .game-controls-wrapper #solitaire-undo-btn,
  #solitaire-dashboard .game-controls-wrapper button#solitaire-undo-btn,
  #solitaire-dashboard .game-controls-wrapper .mute-button,
  #solitaire-dashboard .game-controls-wrapper .uniform-mute-btn,
  #solitaire-dashboard .game-controls-wrapper .solitaire-mute-btn {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
  }
  
  /* Mute button - 24px height, rectangular (not square) */
  #solitaire-dashboard .game-controls-wrapper .mute-button,
  #solitaire-dashboard .game-controls-wrapper .uniform-mute-btn,
  #solitaire-dashboard .game-controls-wrapper .solitaire-mute-btn {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  /* Mute button icon */
  #solitaire-dashboard .game-controls-wrapper .mute-button svg,
  #solitaire-dashboard .game-controls-wrapper .uniform-mute-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Remove hover/active effects */
  #solitaire-dashboard .solitaire-difficulty-selector .difficulty-btn:hover,
  #solitaire-dashboard .solitaire-difficulty-selector .difficulty-btn:active,
  #solitaire-dashboard .game-controls-wrapper .dashboard-btn-new-game:hover,
  #solitaire-dashboard .game-controls-wrapper .dashboard-btn-new-game:active,
  #solitaire-dashboard .game-controls-wrapper .mute-button:hover,
  #solitaire-dashboard .game-controls-wrapper .mute-button:active {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* 2048 Mobile - Grid Layout for Stats and Buttons */
@media (max-width: 767px) {
  /* 2048 Dashboard - Grid layout: Row 1 (Stats), Row 2 (Buttons) */
  #game-2048-dashboard {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 2px !important;
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Row 1: Stats - Score, Best Score, Undo (statistics) */
  #game-2048-dashboard .dashboard-item {
    grid-row: 1 !important;
    min-height: 24px !important;
    height: auto !important;
    padding: 0.5rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }
  
  /* Position stats in Row 1 */
  #game-2048-dashboard .dashboard-item:first-child {
    grid-column: 1 !important;
  }
  
  #game-2048-dashboard .dashboard-item:nth-child(2) {
    grid-column: 2 !important;
  }
  
  #game-2048-dashboard .dashboard-item:nth-child(3) {
    grid-column: 3 !important;
  }
  
  /* Row 2: Buttons - New Game, Undo, Mute */
  #game-2048-dashboard .game-controls-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  /* All buttons in Row 2 - equal sizing */
  #game-2048-dashboard .game-controls-wrapper .dashboard-btn-new-game,
  #game-2048-dashboard .game-controls-wrapper button,
  #game-2048-dashboard .game-controls-wrapper #game-2048-undo-btn,
  #game-2048-dashboard .game-controls-wrapper .mute-button,
  #game-2048-dashboard .game-controls-wrapper .uniform-mute-btn {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Mute button - square 24x24px */
  #game-2048-dashboard .game-controls-wrapper .mute-button,
  #game-2048-dashboard .game-controls-wrapper .uniform-mute-btn {
    width: 100% !important;
    min-width: 24px !important;
    max-width: none !important;
    padding: 0 !important;
  }
  
  /* Mute button icon */
  #game-2048-dashboard .game-controls-wrapper .mute-button svg,
  #game-2048-dashboard .game-controls-wrapper .uniform-mute-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Remove hover/active effects */
  #game-2048-dashboard .game-controls-wrapper .dashboard-btn-new-game:hover,
  #game-2048-dashboard .game-controls-wrapper .dashboard-btn-new-game:active,
  #game-2048-dashboard .game-controls-wrapper .mute-button:hover,
  #game-2048-dashboard .game-controls-wrapper .mute-button:active {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Chess Mobile - Grid Layout for Buttons (2 columns, 3 rows) */
@media (max-width: 767px) {
  /* Distance between title (h1) and chess screen/buttons - 4px */
  .game-container:has(.chess-root) h1 {
    margin-bottom: 4px !important;
  }
  
  /* Distance between title and buttons container - 4px */
  .game-container:has(.chess-root) h1 + .chess-root .chess-screen .chess-difficulty-buttons-inline,
  .game-container:has(.chess-root) h1 + .chess-root .chess-screen #chess-difficulty-buttons-inline,
  .game-container:has(.chess-root) h1 + .chess-root .chess-screen #chess-difficulty-buttons-select,
  .chess-root .chess-screen .chess-difficulty-buttons-inline:first-child,
  .chess-root .chess-screen #chess-difficulty-buttons-inline:first-child,
  .chess-root .chess-screen #chess-difficulty-buttons-select:first-child {
    margin-top: 4px !important;
  }
  
  /* Chess controls container - Grid layout */
  .chess-difficulty-buttons-inline,
  #chess-difficulty-buttons-inline,
  #chess-difficulty-buttons-select {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
    padding: 1rem !important;
    width: 100% !important;
  }
  
  /* All buttons in grid - equal sizing */
  .chess-difficulty-buttons-inline .game-difficulty-btn,
  .chess-difficulty-buttons-inline .dashboard-btn-new-game,
  .chess-difficulty-buttons-inline .mute-button,
  .chess-difficulty-buttons-inline .uniform-mute-btn,
  .chess-difficulty-buttons-inline .chess-mute-btn,
  #chess-difficulty-buttons-inline .game-difficulty-btn,
  #chess-difficulty-buttons-inline .dashboard-btn-new-game,
  #chess-difficulty-buttons-inline .mute-button,
  #chess-difficulty-buttons-inline .uniform-mute-btn,
  #chess-difficulty-buttons-inline .chess-mute-btn,
  #chess-difficulty-buttons-select .game-difficulty-btn,
  #chess-difficulty-buttons-select .dashboard-btn-new-game,
  #chess-difficulty-buttons-select .mute-button,
  #chess-difficulty-buttons-select .uniform-mute-btn,
  #chess-difficulty-buttons-select .chess-mute-btn {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Row 1: Easy (left), Medium (right) */
  .chess-difficulty-buttons-inline .game-difficulty-btn[data-level="1"],
  #chess-difficulty-buttons-inline .game-difficulty-btn[data-level="1"],
  #chess-difficulty-buttons-select .game-difficulty-btn[data-level="1"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  .chess-difficulty-buttons-inline .game-difficulty-btn[data-level="2"],
  #chess-difficulty-buttons-inline .game-difficulty-btn[data-level="2"],
  #chess-difficulty-buttons-select .game-difficulty-btn[data-level="2"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  
  /* Row 2: Hard (left), Impossible (right) */
  .chess-difficulty-buttons-inline .game-difficulty-btn[data-level="3"],
  #chess-difficulty-buttons-inline .game-difficulty-btn[data-level="3"],
  #chess-difficulty-buttons-select .game-difficulty-btn[data-level="3"] {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  
  .chess-difficulty-buttons-inline .game-difficulty-btn[data-level="4"],
  #chess-difficulty-buttons-inline .game-difficulty-btn[data-level="4"],
  #chess-difficulty-buttons-select .game-difficulty-btn[data-level="4"] {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  
  /* Row 3: New Game (left), Mute (right) */
  .chess-difficulty-buttons-inline #chess-new-game-inline,
  #chess-difficulty-buttons-inline #chess-new-game-inline,
  #chess-difficulty-buttons-select #chess-new-game-inline,
  .chess-difficulty-buttons-inline .game-difficulty-btn#chess-new-game-inline,
  #chess-difficulty-buttons-inline .game-difficulty-btn#chess-new-game-inline {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  
  .chess-difficulty-buttons-inline .mute-button,
  .chess-difficulty-buttons-inline .uniform-mute-btn,
  .chess-difficulty-buttons-inline .chess-mute-btn,
  #chess-difficulty-buttons-inline .mute-button,
  #chess-difficulty-buttons-inline .uniform-mute-btn,
  #chess-difficulty-buttons-inline .chess-mute-btn,
  #chess-difficulty-buttons-select .mute-button,
  #chess-difficulty-buttons-select .uniform-mute-btn,
  #chess-difficulty-buttons-select .chess-mute-btn {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 24px !important;
    max-width: none !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
  }
  
  /* Ensure buttons don't wrap or overflow */
  .chess-difficulty-buttons-inline .game-difficulty-btn,
  .chess-difficulty-buttons-inline .dashboard-btn-new-game {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Remove hover/active effects on mobile */
  .chess-difficulty-buttons-inline .game-difficulty-btn:hover,
  .chess-difficulty-buttons-inline .game-difficulty-btn:active,
  .chess-difficulty-buttons-inline .dashboard-btn-new-game:hover,
  .chess-difficulty-buttons-inline .dashboard-btn-new-game:active,
  .chess-difficulty-buttons-inline .mute-button:hover,
  .chess-difficulty-buttons-inline .mute-button:active {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Landscape Optimizations for Games */
@media (max-width: 915px) and (orientation: landscape) {
  .solitaire-board {
    padding: var(--spacing-xs);
  }
  
  .solitaire-card {
    width: calc((100vw - 2rem - 20px) / 7) !important;
    height: calc((100vw - 2rem - 20px) / 7 * 1.4) !important;
    font-size: 0.7rem !important;
  }
  
  .grid-2048-container {
    max-width: 100% !important;
    transform: scale(1.14) !important;
    transform-origin: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .minesweeper-grid {
    transform: scale(1.0);
  }
  
  .minesweeper-cell {
    width: 38px !important;
    height: 38px !important;
  }
  
  .solitaire-dashboard,
  #game-2048-dashboard,
  .minesweeper-dashboard {
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
  }
}

/* ============================================ */
/* CHESS SETTINGS BUTTON */
/* ============================================ */
.dashboard-btn-settings {
  background: #CCCCCC !important;
  color: #333333 !important;
  border: 2px solid #B3B3B3 !important;
  border-radius: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

.dashboard-btn-settings:hover {
  background: #B8B8B8 !important;
  border: 2px solid #A8A8A8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.dashboard-btn-settings:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.dashboard-btn-settings svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* ============================================ */
/* CHESS SETTINGS MENU STYLES */
/* ============================================ */

.chess-settings-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100vh;
  background: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  overflow-y: auto;
  animation: slideIn 0.3s ease-out;
  flex-direction: column;
}

.chess-settings-menu.active {
  display: flex;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.chess-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-primary);
}

.chess-settings-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.chess-settings-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-primary);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chess-settings-close:hover {
  background: var(--color-border);
}

.chess-settings-content {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.chess-settings-section {
  margin-bottom: 2rem;
}

.chess-settings-section-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chess-settings-option {
  margin-bottom: 1rem;
}

.chess-settings-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.chess-settings-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.chess-settings-button {
  padding: 0.75rem;
  background: var(--color-card-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.chess-settings-button:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: white;
}

.chess-settings-button.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
  font-weight: 600;
}

.chess-settings-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chess-toggle-switch {
  width: 48px;
  height: 28px;
  background: var(--color-border);
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.chess-toggle-switch.active {
  background: var(--color-accent);
}

.chess-toggle-switch::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left var(--transition-fast);
}

.chess-toggle-switch.active::after {
  left: 22px;
}

/* Gear Icon */
.chess-settings-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.chess-settings-icon:hover {
  transform: rotate(20deg);
}

/* Settings overlay backdrop */
.chess-settings-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.chess-settings-backdrop.active {
  display: block;
}

/* Board Theme Styles */

/* Blue & White Theme */
.chess-root.theme-blue-white .chess-light {
  background: #E0E0E0;
}

.chess-root.theme-blue-white .chess-dark {
  background: #4A90E2;
}

/* Classic Wood Theme */
.chess-root.theme-wood .chess-light {
  background: #D2B48C;
}

.chess-root.theme-wood .chess-dark {
  background: #8B4513;
}

/* Drag & Drop Visual Feedback */
.chess-square.chess-selected {
  border: 3px solid yellow !important;
  background-color: inherit !important;
}

/* Legal move indicator - green circle in center */
.chess-square.chess-legal::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(46, 213, 115, 0.8) 0%, rgba(46, 213, 115, 0.4) 100%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Capture move indicator - red square */
.chess-square.chess-capture {
  background: #ff4444 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .chess-settings-menu {
    width: 100%;
  }

  .chess-settings-buttons {
    grid-template-columns: 1fr;
  }
}