/* Mobile-First Responsive Design for Hex AI */

/* CSS Variables for Light/Dark Theme */
:root {
  /* Light theme (default) */
  --bg-primary: #f8f8fa;
  --bg-secondary: #fff;
  --bg-tertiary: #f8f8fa;
  --bg-quaternary: #f4f8ff;
  --text-primary: #2a3a4a;
  --text-secondary: #666;
  --text-tertiary: #888;
  --border-primary: #e0e0e0;
  --border-secondary: #dde6f7;
  --border-tertiary: #ccc;
  --button-bg: #bbeeee;
  --button-bg-hover: #8bd6d6;
  --button-primary-bg: #0099ff;
  --button-primary-bg-hover: #0077cc;
  --button-secondary-bg: #6c757d;
  --button-secondary-bg-hover: #5a6268;
  --input-bg: #fff;
  --input-border: #ccc;
  --modal-bg: #fff;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --debug-bg: #fff;
  --status-bg: #f4f4f4;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-quaternary: #2a3a4a;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-tertiary: #888;
  --border-primary: #4a4a4a;
  --border-secondary: #5a5a5a;
  --border-tertiary: #666;
  --button-bg: #4a4a4a;
  --button-bg-hover: #5a5a5a;
  --button-primary-bg: #0066cc;
  --button-primary-bg-hover: #004499;
  --button-secondary-bg: #555;
  --button-secondary-bg-hover: #666;
  --input-bg: #3a3a3a;
  --input-border: #666;
  --modal-bg: #2d2d2d;
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --debug-bg: #3a3a3a;
  --status-bg: #4a4a4a;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

#app-container {
  max-width: 100vw;
  margin: 0;
  background: var(--bg-secondary);
  min-height: 100vh;
  padding: 10px;
  transition: background-color 0.3s ease;
}

/* Board Section - Mobile Optimized */
#board-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-primary);
  transition: border-color 0.3s ease;
}

h1 {
  text-align: center;
  margin: 0 0 10px 0;
  color: var(--text-primary);
  font-size: 1.5em;
  transition: color 0.3s ease;
}

#instruction-text {
  text-align: center;
  font-size: 0.9em;
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-style: italic;
}

#status-line {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 0px;
  min-height: 1.5em;
  color: var(--text-secondary);
}

/* Board Container - Mobile-first sizing (overridden by landscape media query) */
#board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
  height: auto;
  /* Default mobile sizing - will be overridden in landscape */
  max-width: min(100vw - 20px, 85vh - 150px);
  max-height: min(85vh - 150px, 100vw - 20px);
  min-height: 250px;
  min-width: 250px;
  overflow: hidden;
  transform-origin: center;
}

/* Removed redundant landscape fallback - handled by main landscape media query */

/* SVG Board Sizing - Critical for Mobile Hexagonal Board */
#board-container svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* Ensure SVG scales properly and maintains aspect ratio */
  object-fit: contain;
  /* Hexagonal boards are wider than they are tall due to diamond shape */
  aspect-ratio: 1.4; /* Reduced from 1.2 to make board 95% as tall */
  /* Smooth scaling for better mobile experience */
  transition: transform 0.2s ease;
}

/* Removed redundant SVG landscape rules - handled by main landscape media query */

/* Allow native touch gestures (pinch-zoom, pan) */
#board-container, #board-container svg {
  touch-action: auto;
  -ms-touch-action: auto;
}

/* Hexagonal board specific styles */
#board-container svg polygon {
  transition: fill 0.2s ease, stroke 0.2s ease;
}

#board-container svg polygon:hover {
  stroke-width: 2;
  stroke: #666;
}

#board-container svg polygon.clickable {
  cursor: pointer;
}

#board-container svg polygon.clickable:hover {
  fill-opacity: 0.8;
  stroke-width: 3;
  stroke: #333;
}

/* Dark mode hover effects */
[data-theme="dark"] #board-container svg polygon:hover {
  stroke-width: 2;
  stroke: #999; /* Lighter gray for dark mode */
}

[data-theme="dark"] #board-container svg polygon.clickable:hover {
  fill-opacity: 0.8;
  stroke-width: 3;
  stroke: #ccc; /* Light gray for dark mode */
}

/* Purple shading for central hexes on empty board */
#board-container svg polygon.purple-shaded {
  fill: #d4d4ff !important; /* More visible purple tint - increased from #e6e6ff */
  stroke: #c0c0ff; /* Slightly darker purple border */
}

#board-container svg polygon.purple-shaded:hover {
  fill: #c4c4ff !important; /* More visible purple on hover - increased from #d6d6ff */
  stroke-width: 2;
  stroke: #a0a0ff; /* Darker purple border on hover */
}

/* Dark mode purple shading */
[data-theme="dark"] #board-container svg polygon.purple-shaded {
  fill: rgba(255, 0, 255, 0.25) !important; /* Lighter magenta - increased from 0.15 to 0.25 */
  stroke: #d0d0ff; /* Light purple/violet border - same as light mode */
}

[data-theme="dark"] #board-container svg polygon.purple-shaded:hover {
  fill: rgba(255, 0, 255, 0.35) !important; /* Even lighter magenta on hover - increased from 0.25 to 0.35 */
  stroke-width: 2;
  stroke: #b0b0ff; /* Slightly darker purple/violet border on hover */
}

/* Controls - Touch Friendly */
#controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

button {
  background: var(--button-bg);
  border: none;
  border-radius: 6px;
  padding: 12px 16px; /* Increased for touch targets */
  font-size: 1em;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 44px; /* Touch-friendly minimum */
  min-width: 44px;
}

button:hover {
  background: var(--button-bg-hover);
}

.btn-primary {
  background: var(--button-primary-bg) !important;
  color: white !important;
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--button-primary-bg-hover) !important;
}

.btn-primary:disabled {
  background: #ccc !important;
  cursor: not-allowed;
}

.rules-button {
  background: #8b5cf6 !important; /* Purple shade */
  color: white !important;
  font-weight: 500;
}

.rules-button:hover {
  background: #7c3aed !important; /* Darker purple on hover */
}

/* Settings Section */
#settings-section {
  margin-top: 0;
}

.control-panel {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

h3 {
  margin: 0 0 12px 0;
  color: var(--text-primary);
  font-size: 1.1em;
  transition: color 0.3s ease;
}

/* Form Controls */
.difficulty-row, .player-row, .trmph-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.difficulty-row:last-child, .player-row:last-child, .trmph-row:last-child {
  margin-bottom: 0;
}

.difficulty-row label, .player-row label, .trmph-row label {
  min-width: 80px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

select, input[type="range"], input[type="checkbox"], input[type="text"] {
  padding: 8px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 1em;
  background: var(--input-bg);
  color: var(--text-primary);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  min-height: 44px; /* Touch-friendly */
}

input[type="text"] {
  flex: 1;
  min-width: 200px;
}

input[readonly] {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

select:focus, input:focus {
  outline: none;
  border-color: #8bd6d6;
  box-shadow: 0 0 0 2px rgba(139, 214, 214, 0.2);
}

input[type="range"] {
  flex: 1;
  min-width: 150px;
  padding: 0;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  min-height: auto;
}

#elo-display {
  font-weight: bold;
  color: var(--button-primary-bg);
  min-width: 50px;
  text-align: center;
}

/* Game Info */
#game-info {
  text-align: center;
}

#game-status, #move-count {
  margin: 5px 0;
  font-size: 1em;
  color: var(--text-secondary);
}

/* Responsive Design */
@media (min-width: 768px) {
  /* Tablet and Desktop */
  #app-container {
    max-width: 600px; /* Reduced from 800px to better fit board + margins */
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 20px 24px 28px 24px;
  }
  
  h1 {
    font-size: 1.8em;
  }
  
  #board-container {
    max-width: min(100vw - 80px, 600px);
    max-height: min(100vh - 300px, 600px);
  }
  
  .difficulty-row, .player-row {
    flex-wrap: nowrap;
  }
  
  .difficulty-row label, .player-row label {
    min-width: 120px;
  }
}

/* Large screens - give board more space */
@media (min-width: 1200px) {
  #app-container {
    max-width: 700px; /* Slightly wider for large screens */
  }
  
  #board-container {
    max-width: min(100vw - 100px, 650px);
    max-height: min(100vh - 300px, 650px);
  }
}

/* Mobile Landscape - Use viewport dimensions for more reliable targeting */
@media (max-width: 1024px) and (min-aspect-ratio: 4/3) {
  /* Mobile/Tablet Landscape - Critical for board visibility with better zoom control */
  #app-container {
    padding: 5px;
    max-width: 100vw; /* Allow full width in landscape */
  }
  
  #board-container {
    /* In landscape, prioritize width constraint over height */
    max-height: none !important; /* Remove height constraint to prevent clipping */
    max-width: 70% !important; /* Leave some padding on sides - this takes priority */
    margin: 0 auto; /* Center the board */
    /* Ensure container can grow to fit SVG */
    min-height: 200px;
    min-width: 200px;
    /* Ensure width constraint is respected */
    width: 70% !important;
  }
  
  .control-panel {
    padding: 8px;
    margin-bottom: 8px;
  }
  
  h3 {
    font-size: 0.9em;
    margin-bottom: 6px;
  }
  
  .difficulty-row, .player-row {
    margin-bottom: 6px;
  }
  
  /* Make controls more compact in landscape */
  button {
    padding: 8px 12px;
    font-size: 0.9em;
  }
  
  select, input[type="range"] {
    padding: 6px;
    font-size: 0.9em;
  }
}

/* Removed redundant very small screen rules - handled by main landscape media query */

/* Touch Interactions */
@media (hover: none) and (pointer: coarse) {
  /* Touch devices */
  button {
    padding: 14px 18px;
    font-size: 1.1em;
  }
  
  select, input[type="range"] {
    padding: 12px;
    font-size: 1.1em;
  }
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Error States */
.error {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

.error-message {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 8px;
  border-radius: 4px;
  margin-top: 5px;
  font-size: 0.9em;
}

/* Success States */
.success {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}