/* js/styles.css */

/* Global Styles */
:root {
  /* Base Theme - Adjusted for better contrast */
  --background-color: #121212;
  --text-color: #FFFFFF;
  --tile-color: #FFFFFF;
  --tile-text: #000000;
  --highlight-green: #00C853; /* Darker green for better contrast */
  --highlight-yellow: #FFD600; /* Slightly darker yellow */
  --button-color: #424242;
  --button-hover: #616161;
  --focus-outline: #3498db;

  /* Control Item Dimensions */
  --control-item-width-desktop: 160px;
  --control-item-height-desktop: 40px;
  --control-item-width-mobile: 140px;
  --control-item-height-mobile: 36px;


  /* High Contrast Theme Variables */
  --hc-background-color: #000000;
  --hc-text-color: #FFFFFF;
  --hc-tile-color: #FFFFFF;
  --hc-tile-text: #000000;
  --hc-highlight-green: #00E676; /* Brighter green */
  --hc-highlight-yellow: #FFEA00; /* Brighter yellow */
  --hc-button-color: #0056B3;
  --hc-button-hover: #003D82;
  --hc-focus-outline: #FF4081;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* UPDATED: Body no longer needs to be the main flex container */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  min-height: 100vh; /* Still ensure body *can* be full height */
  line-height: 1.5;
  padding-top: 0;
  display: flex; /* Keep flex for centering .game-container */
  justify-content: center; /* Center .game-container horizontally */
  align-items: flex-start; /* Align .game-container to the top */
}

/* Accessibility classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Utility class to hide elements */
.hidden {
  display: none !important; /* Use !important to ensure it overrides other display styles */
}


/* High contrast mode */
.high-contrast-mode {
  --background-color: var(--hc-background-color);
  --text-color: var(--hc-text-color);
  --tile-color: var(--hc-tile-color);
  --tile-text: var(--hc-tile-text);
  --highlight-green: var(--hc-highlight-green);
  --highlight-yellow: var(--hc-highlight-yellow);
  --button-color: var(--hc-button-color);
  --button-hover: var(--hc-button-hover);
  --focus-outline: var(--hc-focus-outline);
}

/* Larger text mode */
.larger-text {
  font-size: 120%;
}

.larger-text .tile {
  font-size: 2.8rem; /* Further increase for larger text mode */
}

/* Reduce motion */
.reduce-motion * {
  transition: none !important;
  animation: none !important;
}

/* --- Score Display Styles --- */
/* Now sized by common control styles */
.score-display {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  padding: 5px 10px; /* Adjust padding */
  background-color: rgba(51, 51, 51, 0.7);
  border-radius: 5px;
  transition: background-color 0.3s;
  /* Sizing and display handled by common rule below */
}

/* Hard mode indicator styles */
.score-display.hard-mode {
  background-color: rgba(231, 76, 60, 0.7);
  position: relative;
}
/* .score-display.hard-mode::after {
  content: "HARD"; font-size: 0.7rem; position: absolute; top: -8px; right: -8px;
  background-color: #c0392b; color: white; padding: 2px 5px; border-radius: 3px; font-weight: bold;
} */

/* --- Game Container & Header/Main --- */
.game-container {
  max-width: 800px;
  width: 95%;
  margin: 0 auto; /* Center horizontally */
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

header {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 10px;
  max-width: 100%;
  width: 100%;
  position: relative;
  flex-shrink: 0;
}

.game-logo {
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-top: 0px;
  /* margin-bottom: 20px; removed */
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;
}

/* --- Game Info (Instructions) --- */
.game-info {
  text-align: center;
  margin-bottom: 20px;
  max-width: 500px;
  width: 100%;
  transition: opacity 0.3s ease-out, height 0.3s ease-out, margin-bottom 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
  overflow: hidden;
  opacity: 1;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: content-box;
}
.game-info p { margin-bottom: 5px; font-size: 0.95rem; color: #ccc; }
.highlight-green { color: var(--highlight-green); font-weight: bold; }
.highlight-yellow { color: var(--highlight-yellow); font-weight: bold; }
.highlight-white-text {
  color: var(--text-color);
  font-weight: bold;
}

/* --- Grid Styles --- */
#grid-container {
  display: grid;
  gap: 8px;
  margin: 0 auto 0;
  max-width: 500px;
  width: 100%;
  margin-top: 0;
  transition: margin-top 0.3s ease-out;
}
.grid-row-wrapper { display: contents; }
.tile {
  background-color: var(--tile-color);
  color: var(--tile-text);
  /* --- START MODIFICATION: Increase base font size --- */
  font-size: 2.5rem; /* Increased font size for larger tiles */
  /* --- END MODIFICATION --- */
  font-weight: bold;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.3s;
  aspect-ratio: 1 / 1;
  position: relative;
  border: 2px solid transparent;
  user-select: none;
}
.tile:active { cursor: grabbing; }
.tile:hover { transform: scale(1.05); }
.tile:focus { outline: 3px solid var(--focus-outline); outline-offset: 2px; z-index: 2; }
.tile.keyboard-focus { box-shadow: 0 0 0 3px var(--focus-outline), 0 0 10px rgba(52, 152, 219, 0.7); z-index: 5; position: relative; outline: none; }
.tile:focus:not(.keyboard-focus) { outline: none; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3); z-index: 1; }
.tile.selected { box-shadow: 0 0 0 4px #3498db; }
.tile.highlight-yellow { background-color: var(--highlight-yellow) !important; color: #000000; border: 2px solid #B39500 !important; }
.tile.highlight-green { background-color: var(--highlight-green) !important; color: #000000 !important; cursor: not-allowed !important; z-index: 10 !important; border: 2px solid #008B39 !important; }
.tile.highlight-green::after { content: '🔒'; position: absolute; top: 2px; right: 2px; font-size: 0.8rem; opacity: 0.7; }
.high-contrast-mode .tile.highlight-green::after { content: 'LOCKED'; font-size: 0.5rem; background-color: #000; color: #fff; padding: 1px 2px; border-radius: 3px; opacity: 0.9; }
.tile.dragging { opacity: 0.5; }
.tile.drop-target { box-shadow: 0 0 0 4px #f39c12; transform: scale(1.05); }

.skeleton-tile {
  background-color: #e0e0e0;
  border-radius: 4px;
}

.high-contrast-mode .skeleton-tile {
  background-color: #c0c0c0;
}

.skeleton-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.retry-button {
  display: block;
  margin: 16px auto;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #4a90d9;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.retry-button:hover {
  background-color: #3a7bc8;
  transform: translateY(-1px);
}
.retry-button:focus {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}
.retry-button:focus:not(:focus-visible) { outline: none; }
.retry-button:active {
  transform: translateY(0px);
}
#drag-clone { cursor: grabbing; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
@keyframes green-tile-flash { 0% { transform: scale(1); } 50% { transform: scale(1.2); background-color: #00FF00 !important; box-shadow: 0 0 20px #00FF00; } 100% { transform: scale(1); } }
.green-tile-flash { animation: green-tile-flash 0.6s ease-in-out; position: relative; z-index: 100; }


/* --- Container for Grid Selector, Score, Hint Button --- */
.grid-options-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center; /* Center items as a block */
  align-items: center;
  gap: 15px; /* Gap between items */
  margin: 50px auto 20px auto; /* Increased top margin */
  width: fit-content; /* Size to content */
  max-width: 100%; /* Prevent overflow */
  transition: margin-top 0.3s ease-out;
}

/* --- Common Styles for Control Items --- */
.grid-options-container > .grid-size-selector-container,
.grid-options-container > .score-display,
.grid-options-container > #hint-button,
.hard-mode-container,
.swap-counter-container { /* Include hard mode and swap counter containers */
  width: var(--control-item-width-desktop);
  height: var(--control-item-height-desktop);
  display: flex; /* Use flex for internal alignment */
  align-items: center;
  justify-content: center; /* Center content within item */
  flex-shrink: 0;
  border-radius: 5px; /* Consistent rounding */
  box-sizing: border-box; /* Include padding/border in size */
  transition: background-color 0.3s, opacity 0.3s, width 0.3s, height 0.3s; /* Add width/height */
  overflow: hidden; /* Hide overflow if content is too large */
}


/* --- Grid Size Selector Specific Styles --- */
.grid-size-selector-container {
  /* Width/Height/Display handled by common rule */
  border: 1px solid var(--button-hover); /* Move border here */
  padding: 0; /* Remove container padding */
}
.grid-size-label { /* Hidden visually using sr-only class */ }
.grid-size-selector {
  display: flex;
  width: 100%; /* Fill container */
  height: 100%; /* Fill container */
  border: none; /* Remove inner border */
  overflow: hidden; /* Still needed */
}
.grid-size-button {
  flex-grow: 1; /* Allow buttons to share width */
  flex-basis: 0; /* Start from zero basis */
  background-color: transparent;
  color: var(--text-color);
  border: none;
  padding: 0 10px; /* Adjust padding */
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  min-height: unset;
  min-width: unset; /* Remove min-width */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  position: relative;
  height: 100%;
}
.grid-size-button:not(:last-child) { border-right: 1px solid var(--button-hover); }
.grid-size-button:hover { background-color: var(--button-hover); }
.grid-size-button.active { background-color: var(--focus-outline); color: var(--background-color); font-weight: bold; cursor: default; }
.grid-size-button:focus { outline: none; z-index: 1; box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--focus-outline); }
.grid-size-button:focus:not(:focus-visible) { box-shadow: none; }
.grid-size-button.active:focus { box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px rgba(255, 255, 255, 0.7); }


/* --- Hint Button Specific Styles --- */
#hint-button {
  background-color: var(--button-color);
  color: var(--text-color);
  border: none;
  padding: 8px 10px; /* Adjust padding */
  border-radius: 6px; /* Keep slightly different radius if desired */
  cursor: pointer;
  font-size: 0.9rem;
  gap: 8px;
  /* Width/Height/Display handled by common rule */
  /* Transitions updated in common rule */
}

#hint-button i {
  font-size: 1em;
  opacity: 0.9;
  line-height: 1;
}

#hint-button:hover {
  background-color: var(--button-hover);
  transform: translateY(-1px);
}

#hint-button:active {
  transform: translateY(0px);
}

#hint-button:focus {
  outline: 2px solid var(--focus-outline);
  outline-offset: 1px;
}
#hint-button:focus:not(:focus-visible) { outline: none; }
#hint-button:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 1px; }

/* Style for disabled hint button */
#hint-button.disabled {
    background-color: #333;
    color: #777;
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}
#hint-button.disabled:hover {
    background-color: #333;
}

/* --- Swap Counter Container (non-hard mode) --- */
.swap-counter-container {
  margin: 0 auto 20px auto;
  padding: 0 15px;
  background-color: rgba(40, 40, 40, 0.8);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-color);
}
.swap-counter-container.hidden { display: none !important; }

/* --- Hard Mode Container --- */
/* Width/Height/Display handled by common rule */
.hard-mode-container {
  margin: 0 auto 20px auto; /* Center below options, provide bottom margin */
  padding: 0 15px; /* Adjusted internal padding */
  background-color: rgba(40, 40, 40, 0.8); /* Match label bg */
}
.hard-mode-label {
  display: flex; /* Keep flex for internal alignment */
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 0; /* Remove padding from label itself */
  border-radius: 0; /* Remove rounding from label */
  background-color: transparent; /* Make label transparent */
  width: 100%; /* Label fills container */
  justify-content: space-between; /* Revert to space-between for desktop */
  gap: 8px; /* Restore gap for desktop */
}
.hard-mode-label:hover {
  background-color: transparent; /* No hover on label */
}
.hard-mode-container:hover {
   background-color: rgba(60, 60, 60, 0.9); /* Apply hover to container */
}

/* Hide the actual checkbox visually but keep it accessible */
.hard-mode-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Style the custom toggle switch */
.toggle-switch {
  /* Keep original size */
  width: 44px;
  height: 24px;
  background-color: #555;
  border-radius: 12px;
  position: relative;
  transition: background-color 0.3s ease;
  flex-shrink: 0; /* Prevent switch from shrinking */
}

/* Style the inner circle (the 'slider') */
.toggle-switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ccc;
  border-radius: 50%;
  top: 3px;
  left: 4px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Style the text parts - adjust sizes/margins */
.toggle-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text left */
  text-align: left;
  overflow: hidden; /* Hide overflow */
  /* flex-grow: 1; Optional: let text take available space */
  margin-left: 8px; /* Add some margin between switch and text if not using gap */
}

.toggle-label-text {
  font-weight: bold;
  color: var(--text-color);
  transition: color 0.3s ease;
  font-size: 0.85rem; /* Slightly smaller */
  line-height: 1.1; /* Adjust line height */
  white-space: nowrap;
}

.toggle-desc {
  font-size: 0.7em; /* Smaller description */
  color: #aaa;
  transition: color 0.3s ease;
  white-space: nowrap; /* Prevent wrapping */
  line-height: 1.1;
}

/* --- Checked State --- */
.hard-mode-label input[type="checkbox"]:checked + .toggle-switch {
  background-color: var(--highlight-green);
}

.hard-mode-label input[type="checkbox"]:checked + .toggle-switch::before {
  transform: translateX(20px);
  background-color: #fff;
}

.hard-mode-label input[type="checkbox"]:checked ~ .toggle-text-wrapper .toggle-label-text {
  color: var(--highlight-green);
}

/* --- Hover State --- */
/* Applied to container now */

/* --- Focus State (Applied to the container for keyboard navigation) --- */
.hard-mode-container:focus-within {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}
.hard-mode-label input[type="checkbox"]:focus-visible + .toggle-switch {
  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--focus-outline);
}
.hard-mode-label input[type="checkbox"]:focus:not(:focus-visible) + .toggle-switch {
  box-shadow: none;
}

/* --- Disabled State --- */
.hard-mode-container.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.hard-mode-container.disabled .toggle-switch {
  background-color: #444;
}
.hard-mode-container.disabled input[type="checkbox"]:checked + .toggle-switch {
  background-color: #00642a;
}
.hard-mode-container.disabled .toggle-switch::before {
  background-color: #777;
}


/* Hide container when needed (JS adds/removes this class) */
/* Use general .hidden class */


/* --- Modals (Base Styles) --- */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 100; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.modal.active { display: flex; opacity: 1; pointer-events: auto; }
.modal-content { background-color: #1e1e1e; padding: 30px; border-radius: 10px; text-align: center; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; transform: scale(0.9); transition: transform 0.3s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.4); }
.modal.active .modal-content { transform: scale(1); }
.modal-content:focus { outline: none; }
.modal button { background-color: var(--button-color, #424242); color: var(--text-color, #FFFFFF); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s; margin: 5px; }
.modal button:hover { background-color: var(--button-hover, #616161); }
.modal button:focus { outline: 3px solid var(--focus-outline, #3498db); outline-offset: 2px; }
.modal-content { background-color: #111111; } /* Darker modal background */
.modal h2 { margin-bottom: 20px; }
.modal p { margin-bottom: 20px; }
.modal button { margin: 10px; }

/* --- Specific Modal Styles --- */
/* ... (Victory, Leaderboard, Accessibility, Stats, Share modals remain unchanged) ... */
/* Victory Modal */
#victory-modal { background-color: rgba(0, 0, 0, 0.7); }
#victory-modal .modal-content { animation: victory-appear 0.5s ease-out forwards; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); box-shadow: 0 0 30px rgba(255, 215, 0, 0.7); position: relative; z-index: 110; }
@keyframes victory-appear { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
#victory-modal h2 { color: #FFD700; font-size: 2.5rem; text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); margin-bottom: 25px; }
#victory-modal p { margin-bottom: 20px; color: white; font-size: 1.2rem; font-weight: bold; }
#victory-modal #final-swaps { font-size: 1.8rem; color: #FFD700; font-weight: bold; text-shadow: 0 0 5px rgba(255, 215, 0, 0.7); animation: highlight 1s ease-in-out infinite; }
@keyframes highlight { 0% { color: #FFD700; } 50% { color: #FFA500; } 100% { color: #FFD700; } }
#victory-modal button { margin: 10px; background: linear-gradient(to bottom, #f7dfa5, #f0c14b); border: 1px solid #a88734; color: #111; font-weight: bold; padding: 12px 24px; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
#victory-modal button:hover { background: linear-gradient(to bottom, #f5d78e, #eeb933); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
#victory-modal button:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.hard-mode-badge { background-color: #c0392b; color: white; padding: 5px 10px; border-radius: 5px; margin-top: 10px; font-weight: bold; display: inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

/* Leaderboard Modal */
.leaderboard-tabs { display: flex; justify-content: center; margin-bottom: 10px; }
.tab-button { border-radius: 0; background-color: #222222; }
.tab-button.active { background-color: #3498db; }
.tab-button:focus { outline: 3px solid var(--focus-outline); position: relative; z-index: 2; }
.leaderboard-mode-tabs { display: flex; justify-content: center; margin-bottom: 15px; gap: 4px; }
.mode-tab-button { border-radius: 0; background-color: #222222; font-size: 0.85em; padding: 4px 12px; }
.mode-tab-button.active { background-color: #3498db; }
.mode-tab-button:focus { outline: 3px solid var(--focus-outline); position: relative; z-index: 2; }
#leaderboard-content { margin-bottom: 20px; max-height: 300px; overflow-y: auto; }
.leaderboard-entry { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #333333; text-align: left; }

/* Accessibility Modal */
#accessibility-modal .modal-content { max-width: 600px; }
.accessibility-option { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.accessibility-option label { flex-grow: 1; }
.accessibility-option input[type="checkbox"] { transform: scale(1.5); margin-left: 10px; }
.accessibility-help { margin-top: 20px; padding: 15px; background-color: rgba(255, 255, 255, 0.05); border-radius: 5px; text-align: center; }
.accessibility-help h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.2rem; }
.keyboard-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.shortcut-item { display: flex; align-items: center; margin-bottom: 8px; min-width: 45%; }
kbd { background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2); color: #333; display: inline-block; font-size: 0.75em; font-weight: bold; line-height: 1; padding: 2px 4px; white-space: nowrap; min-width: 40px; text-align: center; }
.shortcut-item span { margin-left: 8px; font-size: 0.9rem; }

/* Stats Modal */
#stats-modal .modal-content { max-width: 550px; }
.stats-container { margin-bottom: 30px; }
.stat-row { display: flex; justify-content: space-between; margin-bottom: 15px; }
.stat-item { width: 48%; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 15px; text-align: center; transition: all 0.3s ease; }
.stat-item:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-3px); }
.stat-value { font-size: 2.2rem; font-weight: bold; margin-bottom: 5px; color: #3498db; }
.stat-label { font-size: 0.9rem; color: #ccc; }
.stats-calendar { margin-bottom: 25px; }
.stats-calendar h3 { margin-bottom: 15px; font-size: 1.2rem; color: #ccc; }
.calendar-grid { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.calendar-day { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); font-size: 0.8rem; position: relative; text-align: center; }
.calendar-day span { display: flex; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
.calendar-day .day-label { position: absolute; bottom: -20px; font-size: 0.7rem; color: #aaa; }
.calendar-day.completed { background-color: #2ecc71; color: white; }
.calendar-day.failed { background-color: #e74c3c; color: white; }
.calendar-day.not-played { background-color: rgba(255, 255, 255, 0.1); color: #ccc; }
.calendar-day.today { border: 2px solid #3498db; }
.danger-button { background-color: rgba(231, 76, 60, 0.3); margin-top: 10px; font-size: 0.9rem; }
.danger-button:hover { background-color: rgba(231, 76, 60, 0.6); }
.hard-mode-star { color: #f1c40f; font-size: 1.2em; text-shadow: 0 0 2px black; vertical-align: middle; }
.stats-tabs { display: flex; justify-content: center; margin-bottom: 20px; border-bottom: 1px solid var(--button-hover); }
.stats-tab-button { border: none; border-bottom: 3px solid transparent; background-color: transparent; color: var(--text-color); padding: 10px 20px; cursor: pointer; font-size: 1rem; transition: border-color 0.2s ease, color 0.2s ease; opacity: 0.7; }
.stats-tab-button:hover { color: var(--focus-outline); opacity: 1; }
.stats-tab-button.active { color: var(--text-color); font-weight: bold; border-bottom-color: var(--focus-outline); opacity: 1; }
.stats-tab-button:focus { outline: 2px solid var(--focus-outline); outline-offset: -2px; }

/* Share Modal */
#share-modal .share-modal-content { background: linear-gradient(145deg, #1f1f1f, #2a2a2a); border: 1px solid #333; padding: 35px; }
#share-title { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-color); font-size: 1.8rem; margin-bottom: 25px; }
#share-title i { color: var(--focus-outline); font-size: 1.5rem; }
.share-container { position: relative; margin-bottom: 20px; }
.share-text-box { background-color: #111; border: 1px dashed #555; border-radius: 8px; padding: 20px; font-family: 'Courier New', Courier, monospace; color: #e0e0e0; font-size: 0.95rem; line-height: 1.4; text-align: left; white-space: pre-wrap; word-wrap: break-word; cursor: pointer; user-select: all; transition: background-color 0.2s ease, border-color 0.2s ease; }
.share-text-box:hover { background-color: #1a1a1a; border-color: #777; }
.share-text-box:active { background-color: #0d0d0d; border-color: #999; }
.copy-instruction { display: block; text-align: center; margin-top: 8px; font-size: 0.85rem; color: #888; }
.share-rank-info p { margin: 15px 0 5px 0; font-size: 0.9em; font-style: italic; color: #aaa; }
.copy-notification { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); background-color: #2ecc71; color: white; padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
#share-modal button#close-share { margin-top: 25px; background-color: var(--button-color); color: var(--text-color); }
#share-modal button#close-share:hover { background-color: var(--button-hover); }


/* --- Footer --- */
footer {
  width: 100%;
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
  color: #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 20px;
}
footer picture { max-width: 200px; margin-bottom: 10px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
footer img { max-width: 100%; height: auto; }
footer a { color: #3498db; text-decoration: none; font-weight: bold; transition: color 0.2s ease; }
footer a:hover { color: #5dade2; text-decoration: underline; }
footer i.fab, footer i.fas { margin-right: 5px; }

/* --- Misc --- */
#fireworks-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 120; overflow: hidden; }
.word-tracking-container { display: none; } /* Kept hidden for now */
#daily-reset-timer-container { margin-top: 10px; font-size: 0.9em; color: #cccccc; text-align: center; }
#daily-reset-timer { font-weight: bold; color: var(--text-color); }

.buttons button#reset-button {
  display: none !important; /* Permanently hide the reset button */
}

/* --- Slideout Menu Styles --- */
#menu-toggle-button {
  position: absolute;
  top: 35px;
  left: 15px;
  background: rgba(66, 66, 66, 0.7);
  border: 1px solid rgba(100, 100, 100, 0.5);
  color: var(--text-color);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 5px;
  z-index: 210;
  transition: background-color 0.2s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#menu-toggle-button:hover {
  background-color: var(--button-hover);
}

#menu-toggle-button:focus {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}
#menu-toggle-button:focus:not(:focus-visible) {
   outline: none;
}


#slideout-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 250px;
  background-color: #1e1e1e; /* Menu background */
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 200;
  padding: 60px 0 20px 0; /* Top padding for toggle button space */
  box-shadow: 4px 0 15px rgba(0,0,0,0.5);
  display: flex; /* Flex container for nav */
  flex-direction: column; /* Stack children vertically */
}

#slideout-menu.open {
  transform: translateX(0%); /* Slide in */
}

#slideout-menu .menu-nav {
  flex-grow: 1; /* Allow nav to fill available space */
  overflow-y: auto; /* Add scroll if needed */
  display: flex; /* Use flex */
  flex-direction: column; /* Stack UL vertically */
  height: 100%; /* Occupy full height of parent */
}

#slideout-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Use flex */
  flex-direction: column; /* Stack LIs vertically */
  height: 100%; /* Occupy full height of parent */
}

#slideout-menu li {
  margin: 0;
  width: 100%; /* LI takes full width */
  flex-shrink: 0; /* Prevent LI from shrinking */
}

/* Style buttons inside the menu */
#slideout-menu button[role="menuitem"] { /* Target only menu item buttons */
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px 25px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #333; /* Separator */
  color: var(--text-color);
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Close button styling */
#slideout-menu button.menu-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto; /* Override full width */
    padding: 8px 12px;
    font-size: 1.4rem;
    border: none; /* No border for close button */
    background: none;
    color: #aaa;
}
#slideout-menu button.menu-close-button:hover {
    color: var(--text-color);
    background: none;
}

#slideout-menu li:last-child button[role="menuitem"], /* Target last button */
#slideout-menu li:last-child .menu-checkbox-item { /* Target last checkbox item */
  border-bottom: none; /* Remove border from last item */
}


#slideout-menu button[role="menuitem"]:hover {
  background-color: var(--button-color); /* Use button color for hover */
}

#slideout-menu button[role="menuitem"] i {
  width: 20px; /* Fixed width for icon alignment */
  text-align: center;
  font-size: 1.1em;
  opacity: 0.8;
}

#slideout-menu button[role="menuitem"]:focus {
  outline: none;
  background-color: var(--button-hover);
  color: var(--focus-outline); /* Highlight text on focus */
}
#slideout-menu button[role="menuitem"]:focus i {
   color: var(--focus-outline); /* Highlight icon on focus */
}
#slideout-menu button[role="menuitem"]:focus:not(:focus-visible) {
  background-color: transparent; /* Reset if not keyboard focus */
  color: var(--text-color);
}
#slideout-menu button[role="menuitem"]:focus:not(:focus-visible) i {
   color: inherit;
}

/* --- Slideout Menu Checkbox Item --- */
#slideout-menu .menu-checkbox-item {
  display: flex;
  align-items: center;
  gap: 15px; /* Matches button gap */
  width: 100%;
  padding: 15px 25px; /* Matches button padding */
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #333; /* Separator */
  color: var(--text-color);
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative; /* For positioning the checkbox */
}

#slideout-menu .menu-checkbox-item:hover {
  background-color: var(--button-color);
}

#slideout-menu .menu-checkbox-item i {
  width: 20px; /* Fixed width for icon alignment */
  text-align: center;
  font-size: 1.1em;
  opacity: 0.8;
}

/* Visually hide the actual checkbox, but keep it accessible */
#slideout-menu .menu-checkbox-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Style the text span to take remaining space */
#slideout-menu .menu-checkbox-item span {
  flex-grow: 1;
}

/* Add a custom checkbox indicator using ::after */
#slideout-menu .menu-checkbox-item::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-color);
  border-radius: 3px;
  margin-left: auto; /* Push to the right */
  background-color: var(--background-color);
  transition: background-color 0.2s, border-color 0.2s;
}

/* Style the indicator when checked */
#slideout-menu .menu-checkbox-item[aria-checked="true"]::after {
  background-color: var(--focus-outline);
  border-color: var(--focus-outline);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.78 4.22a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06L6.5 9.94l5.0-5.0a.75.75 0 0 1 1.28.56Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Focus styles for the label itself */
#slideout-menu .menu-checkbox-item:focus-within {
  outline: none;
  background-color: var(--button-hover);
  color: var(--focus-outline); /* Highlight text on focus */
}
#slideout-menu .menu-checkbox-item:focus-within i {
   color: var(--focus-outline); /* Highlight icon on focus */
}


/* Menu Overlay */
#menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Slightly darker overlay */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Hidden by default */
  z-index: 190; /* Below menu */
}

#menu-overlay.open {
  opacity: 1;
  pointer-events: auto; /* Clickable when open */
}

/* --- Instructions Hiding Styles --- */

/* Style when instructions are hidden - REVERTED */
main.instructions-hidden .game-info {
  opacity: 0;
  height: 0; /* Collapse height */
  margin-bottom: 0; /* Collapse margin */
  padding-top: 0; /* Collapse padding */
  padding-bottom: 0; /* Collapse padding */
  pointer-events: none; /* Make non-interactive */
}

/* Responsive Styles */
@media (max-width: 600px) {
  /* UPDATED: Remove body padding adjustment, body just centers container now */
  /* body { padding-top: 0; } */
  header {
      padding-top: 10px; /* Reduced padding */
      padding-bottom: 10px;
      margin-bottom: 5px; /* Less margin */
  }
  .game-logo {
    max-width: 140px; /* Smaller logo */
    margin-top: 0; /* Align logo top with header padding */
  }
  #menu-toggle-button {
      /* MODIFIED: Slightly lower on mobile */
      top: 30px; /* Adjusted */
      left: 10px;
      padding: 6px 10px;
      font-size: 1.5rem;
  }
  .game-info { margin-bottom: 15px; }
  /* --- NEW: Adjust font size for game info on mobile --- */
  .game-info p {
    font-size: 0.85rem; /* Reduced size to prevent wrapping */
    margin-bottom: 3px; /* Slightly less margin between lines */
  }
  /* --- END NEW STYLE --- */
  #grid-container { gap: 5px; margin-bottom: 0;}
  .tile {
    font-size: 1.5rem; /* Mobile tile font size override */
  }

  /* --- START Responsive Grid Options Container --- */
  .grid-options-container {
    flex-wrap: wrap; /* Allow wrapping on mobile */
    justify-content: center; /* Center when wrapped */
    gap: 10px; /* Keep small gap */
    width: 100%; /* Take full width on mobile */
    margin-top: 35px;
    margin-bottom: 20px;
    width: 100%; /* Override fit-content */
  }

  /* --- Common Styles for Control Items (MOBILE) --- */
  .grid-options-container > .grid-size-selector-container,
  .grid-options-container > .score-display,
  .grid-options-container > #hint-button,
  .hard-mode-container,
  .swap-counter-container { /* Include hard mode and swap counter */
    width: var(--control-item-width-mobile);
    height: var(--control-item-height-mobile);
  }

  /* Adjust hint button specifically on mobile within the container */
  #hint-button {
     padding: 6px 12px; /* Smaller padding */
     font-size: 0.8rem; /* Smaller text */
     /* Height handled by common rule */
  }
  /* Adjust score display on mobile */
  .score-display {
    padding: 4px 10px; /* Smaller padding */
    font-size: 1.1rem; /* Smaller text */
    min-width: 100px; /* Smaller width */
    /* Height handled by common rule */
  }
  .score-display.hard-mode::after {
     font-size: 0.6rem;
     padding: 1px 3px;
     top: -6px;
     right: -6px;
  }
  /* Adjust grid size selector on mobile */
  .grid-size-button {
     padding: 0 12px; /* Adjust padding */
     min-width: 60px; /* Adjust min-width if needed */
     font-size: 0.85rem; /* Adjust font size slightly */
  }
  .grid-size-selector-container {
     /* Height handled by common rule */
  }

  /* --- END Responsive Grid Options Container --- */

  .hard-mode-container { margin: 0 auto 15px auto; } /* Adjust hard mode margin */
  .swap-counter-container { margin: 0 auto 15px auto; font-size: 1rem; }
  /* --- START: Hard Mode Mobile Single Line/Centering Fix --- */
  .hard-mode-label {
    padding: 0; /* No padding on label */
    gap: 6px; /* Slightly reduced gap */
    justify-content: center; /* Center the switch and text wrapper within the label */
  }
  .toggle-text-wrapper {
    margin-left: 0; /* Remove margin, rely on gap */
  }
  .toggle-label-text {
    font-size: 0.75rem; /* Further reduced font size */
    white-space: nowrap; /* Prevent wrapping */
  }
  .toggle-desc {
    font-size: 0.65em; /* Keep this reduced */
    white-space: nowrap; /* Prevent wrapping */
  }
  /* --- END: Hard Mode Mobile Single Line/Centering Fix --- */
  .toggle-switch {
     width: 40px;
     height: 22px;
  }
   .toggle-switch::before {
     width: 16px;
     height: 16px;
     top: 3px;
     left: 3px;
  }
   .hard-mode-label input[type="checkbox"]:checked + .toggle-switch::before {
      transform: translateX(18px); /* Adjust translation */
   }
  /* Removed .buttons responsive styles */
  footer { padding: 15px; }
  /* Responsive Stats */
  .stat-row { flex-direction: column; gap: 10px; }
  .stat-item { width: 100%; /* Full width on mobile */ }
  .calendar-grid { gap: 5px; }
  .calendar-day { width: 35px; height: 35px; }
  .calendar-day span { gap: 1px; } /* Reduce gap slightly on mobile */
  .calendar-day .day-label { bottom: -18px; font-size: 0.6rem; }
  .stats-tab-button { padding: 8px 15px; font-size: 0.9rem; }
  /* Responsive Share Modal */
  #share-modal .share-modal-content {
    padding: 25px;
  }
  #share-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  #share-title i {
    font-size: 1.3rem;
  }
  .share-text-box {
    padding: 15px;
    font-size: 0.9rem;
  }
  .copy-notification {
    bottom: -30px; /* Adjust position */
    padding: 6px 12px;
    font-size: 0.85rem;
  }
  #share-modal button#close-share {
     margin-top: 20px;
  }
  /* Responsive keyboard shortcuts in accessibility modal */
  @media (max-width: 600px) {
    .shortcut-item { flex-direction: column; width: calc(33.33% - 10px); min-width: unset; align-items: center; text-align: center; }
    .shortcut-item span { margin-left: 0; margin-top: 5px; font-size: 0.8rem; }
    kbd { margin-bottom: 2px; }
  }
}

/* Added missing import for FontAwesome CSS */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');