/* style.css - Stylesheet for the Minesweeper game UI and layout
   This file defines all visual styling organized into logical sections.

   STYLE REFERENCE:

   GLOBAL STYLES:
   - body: Sets font family, weight, alignment for overall page and background image support

   THEMING SYSTEM:
   - Uses CSS custom properties (variables) for all colors and themed elements
   - Two themes: Dark (default) and Light Mode
   - Theme colors loaded from gameTheme.json at runtime via config.js and script.js
   - Theme preference saved to localStorage and persists between sessions
   - Theme toggle button (#theme-toggle) switches between Dark/Light with sun/moon emojis
   - All UI elements use CSS variables for seamless theme switching
   - To customize themes, edit gameTheme.json (no CSS changes needed)

   BACKGROUND SYSTEM:
   - Uses CSS custom properties for dynamic background image loading
   - --background-image: Set by script.js based on config.js background.url
   - --background-fallback-color: Fallback color when no image or loading fails
   - --background-size, --background-position, --background-repeat, --background-attachment: 
     All configurable via config.js background section
   - Automatic fallback to solid color if image fails to load

   BOARD STYLES:
   - #board: Defines board container dimensions, border, background, layout
   - #board div: Styles individual tiles with size, border, text alignment, flex centering
   - #board div img: Styles images in tiles for proper sizing and positioning

   TILE STATES:
   - .tile-clicked: Changes background for revealed tiles
   - .x1 to .x8: Color classes for number tiles based on adjacent mines

   UI ELEMENTS:
   - #flag-button: Styles the flag toggle button
   - #flag-button img: Styles image in flag button

   MENUS:
   - #start-menu: Positions and styles start screen
   - #start-button, #restart-button, #back-to-menu-button: Button styling

   VISIBILITY:
   - #mines-header, #board, #flag-button, #game-over-menu: Initially hidden elements

   The stylesheet uses CSS custom properties (--tile-size, --font-size, etc.) set by script.js.
   Colors and sizes are configurable via config.js. Classes are applied dynamically by script.js.
   Background images are handled by setBackgroundImage() function in script.js.

   To modify layout: change #board and #board div properties
   To modify colors: update config.js colors
   To modify sizes: update config.js sizes or CONSTANTS.TILE_SIZE in constants.js
   To modify background: update config.js background section
   AI Note: This stylesheet controls all visual aspects. Uses CSS custom properties set by script.js (e.g., --tile-size, --background-image). Classes like .tile-clicked are applied dynamically by script.js. Background images are loaded and tested by setBackgroundImage() function. Do not remove or rename selectors without updating script.js. Ensure changes don't break layout or responsiveness. Always test by opening index.html in a browser after changes to verify styling and layout.
*/
:root {
  /* Theme Colors - Loaded from gameTheme.json at runtime */
  /* These are default fallback values if JSON fails to load */

  /* Main Colors */
  --bg-primary: #f0f0f0;
  --bg-secondary: #c0c0c0;
  --tile-default: #bdbdbd;
  --tile-revealed: #c0c0c0;
  --tile-border-light: #fff;
  --tile-border-dark: #666;
  --tile-border-revealed: #999;
  --board-border-light: #fff;
  --board-border-dark: #808080;
  --text-primary: #333;
  --text-secondary: #666;
  --display-bg: #000;
  --display-text: #ff0000;
  --button-bg: #c0c0c0;
  --button-border-light: #fff;
  --button-border-dark: #808080;
  --mine-bg: red;
  --info-bar-bg: #c0c0c0;

  /* Number Colors (1-8) */
  --color-x1: #0000ff;
  --color-x2: #008000;
  --color-x3: #ff0000;
  --color-x4: #000080;
  --color-x5: #800000;
  --color-x6: #008080;
  --color-x7: #000000;
  --color-x8: #808080;

  /* UI Colors */
  --ui-menuBackground: rgba(0, 0, 0, 0.85);
  --ui-menuButtonHover: brightness(1.1);
  --ui-winGradientStart: #51cf66;
  --ui-winGradientMid: #37b24d;
  --ui-winGradientEnd: #ffd43b;
  --ui-loseGradientStart: #ff6b6b;
  --ui-loseGradientEnd: #ee5a6f;

  /* Effects */
  --effect-tileHoverScale: 0.98;
  --effect-tileActiveScale: 0.95;
  --effect-shadowLight: rgba(0, 0, 0, 0.1);
  --effect-shadowMedium: rgba(0, 0, 0, 0.2);
  --effect-shadowDark: rgba(0, 0, 0, 0.3);
}

/* Note: body.dark-theme is no longer needed as themes are loaded from JSON */
/* The loadGameTheme() function in config.js will override these values */

body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: var(--bg-primary);
  background-image: var(--background-image, none);
  background-size: var(--background-size, cover);
  background-position: var(--background-position, center);
  background-repeat: var(--background-repeat, no-repeat);
  background-attachment: var(--background-attachment, fixed);
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

#game-container {
  width: 100%;
  max-width: min(600px, 95vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 40px);
  justify-content: center;
}

@media (max-width: 768px) {
  #game-container {
    padding: 10px;
    gap: 12px;
    max-width: 100vw;
    min-height: calc(100vh - 20px);
  }

  body {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  #game-container {
    padding: 5px;
    gap: 8px;
    min-height: calc(100vh - 10px);
  }

  body {
    padding: 5px;
  }
}

#theme-toggle {
  position: fixed;
  top: 15px;
  right: 15px;
  width: clamp(40px, 8vw, 50px);
  height: clamp(40px, 8vw, 50px);
  font-size: clamp(20px, 4vw, 24px);
  background-color: var(--button-bg);
  border: 3px solid;
  border-color: var(--button-border-light) var(--button-border-dark) var(--button-border-dark) var(--button-border-light);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 2px 2px 5px var(--effect-shadowDark);
  border-radius: 4px;
}

#theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
}

#theme-toggle:active {
  border-color: var(--button-border-dark) var(--button-border-light) var(--button-border-light) var(--button-border-dark);
  transform: translateY(2px);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  #theme-toggle {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  #theme-toggle {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-width: 2px;
  }
}

#info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px;
  background-color: var(--info-bar-bg);
  border: 3px solid;
  border-color: var(--button-border-light) var(--button-border-dark) var(--button-border-dark) var(--button-border-light);
  box-sizing: border-box;
  gap: 10px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#mines-display,
#timer-display {
  background-color: var(--display-bg);
  color: var(--display-text);
  padding: 8px 12px;
  border: 2px inset var(--button-border-dark);
  font-family: 'Courier New', monospace;
  font-size: clamp(1.2em, 3vw, 1.8em);
  font-weight: bold;
  min-width: clamp(50px, 10vw, 60px);
  text-align: center;
  letter-spacing: 2px;
  flex-shrink: 0;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Animation classes for info bar displays */
.bounce-animation {
  animation: bounce 0.5s ease-out;
}

.pulse-animation {
  animation: pulse-quick 0.4s ease-out;
}

.fade-in-animation {
  animation: fadeInDisplay 0.6s ease-in;
}

#reset-button {
  font-size: clamp(1.5em, 3.5vw, 2em);
  background-color: var(--button-bg);
  border: 3px solid;
  border-color: var(--button-border-light) var(--button-border-dark) var(--button-border-dark) var(--button-border-light);
  width: clamp(40px, 8vw, 50px);
  height: clamp(40px, 8vw, 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.1s, transform 0.2s ease;
  flex-shrink: 0;
}

#reset-button:hover {
  filter: brightness(1.1);
}

#reset-button:active {
  border-color: var(--button-border-dark) var(--button-border-light) var(--button-border-light) var(--button-border-dark);
  transform: translateY(1px);
}

@media (max-width: 768px) {
  #info-bar {
    padding: 6px;
    gap: 6px;
  }

  #mines-display,
  #timer-display {
    padding: 4px 8px;
    letter-spacing: 1px;
  }
}

#board {
  width: 100%;
  aspect-ratio: var(--board-columns) / var(--board-rows);
  max-width: min(500px, 85vw);
  border: 8px solid;
  border-color: var(--board-border-light) var(--board-border-dark) var(--board-border-dark) var(--board-border-light);
  background-color: var(--tile-revealed);
  display: grid;
  grid-template-columns: repeat(var(--board-columns), 1fr);
  grid-template-rows: repeat(var(--board-rows), 1fr);
  gap: 0;
  box-sizing: border-box;
  padding: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@media (max-width: 768px) {
  #board {
    border-width: 6px;
    max-width: 90vw;
  }
}

@media (max-width: 480px) {
  #board {
    border-width: 4px;
    max-width: 95vw;
  }
}

#board div {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 3px solid;
  border-color: var(--tile-border-light) var(--tile-border-dark) var(--tile-border-dark) var(--tile-border-light);
  background-color: var(--tile-default);
  font-size: clamp(16px, 4vw, 24px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: all 0.1s ease, background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  #board div {
    font-size: clamp(14px, 4.5vw, 20px);
    border-width: 2px;
  }
}

#board div:not(.tile-clicked):not([data-flagged]):hover {
  background-color: #c8c8c8;
  transform: scale(var(--effect-tileHoverScale));
  box-shadow: inset 0 0 3px var(--effect-shadowMedium);
}

#board div:not(.tile-clicked):active {
  border-color: var(--tile-border-dark) var(--tile-border-light) var(--tile-border-light) var(--tile-border-dark);
  filter: brightness(0.85);
  transform: scale(var(--effect-tileActiveScale));
}

#board div[data-flagged] {
  animation: placeFlag 0.2s ease-out;
}

#board div[data-flagged]:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

@keyframes placeFlag {
  0% {
    transform: scale(0.5) rotate(-180deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.1) rotate(10deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

#board div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 10;
  animation: fadeIn 0.3s ease-in;
}

.tile-clicked {
  background-color: var(--tile-revealed) !important;
  border: 1px solid var(--tile-border-revealed) !important;
  animation: revealTile 0.2s ease-out;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.15) !important;
}

.tile-clicked:hover {
  transform: none !important;
  box-shadow: none !important;
  cursor: default;
}

@keyframes revealTile {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.x1 {
  color: var(--color-x1);
  font-weight: bold;
}

.x2 {
  color: var(--color-x2);
  font-weight: bold;
}

.x3 {
  color: var(--color-x3);
  font-weight: bold;
}

.x4 {
  color: var(--color-x4);
  font-weight: bold;
}

.x5 {
  color: var(--color-x5);
  font-weight: bold;
}

.x6 {
  color: var(--color-x6);
  font-weight: bold;
}

.x7 {
  color: var(--color-x7);
  font-weight: bold;
}

.x8 {
  color: var(--color-x8);
  font-weight: bold;
}

.mine-tile {
  background-color: var(--mine-bg) !important;
  position: relative;
  animation: explodeMine 0.3s ease-out;
}

.mine-tile img {
  position: relative;
  z-index: 20;
  width: 80%;
  height: 80%;
  object-fit: contain;
  animation: shakeMine 0.5s ease-in-out;
}

@keyframes explodeMine {
  0% {
    transform: scale(1);
  }

  50% {
    background-color: #ff6b6b;
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes shakeMine {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg) scale(1.1);
  }

  75% {
    transform: rotate(10deg) scale(1.1);
  }
}

#flag-button {
  width: 100%;
  max-width: min(140px, 30vw);
  min-height: 50px;
  height: auto;
  aspect-ratio: 2 / 1;
  font-size: clamp(14px, 3vw, 18px);
  background-color: var(--button-bg);
  border: 4px solid;
  border-color: var(--button-border-light) var(--button-border-dark) var(--button-border-dark) var(--button-border-light);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
}

#flag-button:hover {
  background-color: #d4d4d4;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6);
}

#flag-button:active,
#flag-button.active {
  border-color: var(--button-border-dark) var(--button-border-light) var(--button-border-light) var(--button-border-dark);
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(0.85);
  transform: translateY(1px);
}

#flag-button img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}

#flag-button::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

@media (max-width: 768px) {
  #flag-button {
    max-width: 35vw;
    min-height: 45px;
    padding: 6px 10px;
    border-width: 3px;
  }
}

@media (max-width: 480px) {
  #flag-button {
    min-height: 40px;
    max-width: 100px;
    border-width: 3px;
    padding: 5px 8px;
  }
}

#start-menu {
  text-align: center;
  margin-top: 100px;
  animation: fadeIn 0.5s ease-in;
}

#start-menu h1 {
  font-size: clamp(2em, 8vw, 3.5em);
  color: var(--text-primary);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  animation: slideDown 0.6s ease-out;
  font-weight: bold;
  transition: color 0.3s ease;
}

#game-over-menu {
  text-align: center;
  padding: 40px 20px;
  animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#game-over-menu h1 {
  font-size: clamp(2em, 8vw, 3em);
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  animation: pulse 2s ease-in-out infinite;
  font-weight: bold;
}

#game-over-title {
  background: linear-gradient(45deg, var(--ui-loseGradientStart), var(--ui-loseGradientEnd));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#game-over-menu.won #game-over-title {
  background: linear-gradient(45deg, var(--ui-winGradientStart), var(--ui-winGradientMid), var(--ui-winGradientEnd));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: celebrateWin 1s ease-in-out infinite;
}

@keyframes celebrateWin {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  25% {
    transform: scale(1.1) rotate(-2deg);
  }

  75% {
    transform: scale(1.1) rotate(2deg);
  }
}

#start-button,
#restart-button,
#back-to-menu-button {
  font-size: clamp(18px, 4vw, 22px);
  padding: 12px 30px;
  background-color: var(--button-bg);
  border: 3px solid;
  border-color: var(--button-border-light) var(--button-border-dark) var(--button-border-dark) var(--button-border-light);
  cursor: pointer;
  margin: 10px;
  color: var(--text-primary);
  font-weight: bold;
  transition: all 0.15s ease;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  font-family: Arial, Helvetica, sans-serif;
}

#start-button:hover,
#restart-button:hover,
#back-to-menu-button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}

#start-button:active,
#restart-button:active,
#back-to-menu-button:active {
  border-color: var(--button-border-dark) var(--button-border-light) var(--button-border-light) var(--button-border-dark);
  filter: brightness(0.85);
  transform: translateY(1px);
  box-shadow: none;
}

/* Loading Indicator Styles */
#loading-indicator {
  margin: 20px auto;
  text-align: center;
  animation: fadeIn 0.3s ease-in;
}

#loading-indicator p {
  color: var(--text-primary);
  font-size: clamp(14px, 3vw, 18px);
  margin: 10px 0;
}

.loading-bar {
  width: clamp(200px, 60vw, 300px);
  height: 20px;
  background-color: var(--tile-revealed);
  border: 2px solid var(--button-border-dark);
  margin: 15px auto;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.loading-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--display-text), var(--display-text));
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--display-text);
}

#loading-text {
  font-weight: bold;
  font-size: clamp(16px, 3.5vw, 20px);
  color: var(--display-text);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  25% {
    transform: translateY(-8px) scale(1.05);
  }

  50% {
    transform: translateY(-4px) scale(1.02);
  }

  75% {
    transform: translateY(-2px) scale(1.01);
  }
}

@keyframes pulse-quick {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
    box-shadow: 0 0 10px currentColor;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fadeInDisplay {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#mobile-hint {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--text-secondary);
  margin: 5px 0 0 0;
  font-style: italic;
  opacity: 0.8;
  transition: color 0.3s ease;
}

@media (min-width: 769px) {
  #mobile-hint {
    display: none;
  }
}

#game-container,
#game-over-menu {
  display: none;
}