/**
 * ================================================================
 * STYLESHEET README
 * ================================================================
 *
 * Purpose:
 * This stylesheet provides all visual styling for the Fantasy Idle Adventure game,
 * with a mobile-first approach to ensure optimal experience on all devices.
 *
 * Components styled:
 * - Responsive main layout and containers
 * - Touch-friendly resource displays
 * - Enhanced click button and animations for mobile
 * - Mobile-optimized job buttons and sections
 * - Mobile-optimized upgrade buttons and sections
 * - Notification elements
 * - Developer overlay and reset button
 * - Mobile-friendly tab navigation
 * - Number format toggle
 * - Prestige elements (button, bonus display, points display)
 *
 * Changelog:
 * v1.0.0 - Initial implementation with basic fantasy styling
 * v1.0.1 - Added animations for gold particles and button feedback
 * v1.0.2 - Added styles for developer overlay and reset button
 * v1.0.3 - Added styles for new "Upgrades" section and buttons.  Renamed "Upgrades" to "Jobs" in UI.
 * v1.0.4 - Added styles for tab bar and tab content; implemented tab switching.
 * v1.0.5 - Added styles for quantity buttons (x1, x10, Max) for jobs and upgrades.
 * v1.0.6 - Adjusted layout to place quantity buttons on the same line as job/upgrade info.
 * v1.0.7 - Added styles for the number format toggle in the developer overlay.
 * v1.0.8 - Added styles for prestige elements (button, points display, bonus display).
 * v2.0.0 - Complete redesign with mobile-first approach:
 *          - Added responsive layouts for all screen sizes
 *          - Optimized UI elements for touch interaction
 *          - Improved button spacing for mobile devices
 *          - Implemented mobile-friendly tab navigation
 *          - Enhanced click area for mobile users
 *          - Added media queries for progressive enhancement on larger screens
 * ================================================================
 */

/* ===== Mobile-First Base Styles ===== */

/* Reset and Base */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
}

html {
  touch-action: manipulation; /* Improves touch responsiveness */
}

body {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  background-color: #f5e9d0; /* Light parchment color */
  color: #4a2c0f; /* Dark brown text */
  margin: 0;
  padding: 10px; /* Reduced padding for mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f5e9d0"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23e8d7b0" stroke-width="1"/></svg>');
  text-align: center;
  font-size: 16px; /* Base font size for better mobile readability */
}

/* Sound toggle button */
.sound-toggle-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.sound-toggle-button:active {
  transform: scale(0.9);
}

@media (hover: hover) {
  .sound-toggle-button:hover {
    transform: scale(1.1);
  }
}

/* Main container for the game - Mobile First */
.game-container {
  background-color: #f9f2e1;
  border: 2px solid #8b6b3d;
  border-radius: 8px;
  padding: 15px; /* Reduced padding for mobile */
  width: 100%; /* Full width on mobile */
  max-width: 100%; /* Ensures it doesn't overflow on small screens */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

/* Game title styling - Mobile First */
h1 {
  color: #7d4924;
  margin-top: 0;
  font-size: 1.8rem; /* Slightly smaller for mobile */
  text-shadow: 1px 1px 2px #d9c7a9;
  border-bottom: 2px solid #d9b679;
  padding-bottom: 8px;
}

/* Resource counter display - Mobile First */
.resources {
  font-size: 1.3rem; /* Smaller for mobile */
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  gap: 8px;
}

/* Prestige info display - Mobile First */
.prestige-info {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #6b4423;
}

/* Game statistics display area - Mobile First */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  background-color: #f0e4c9;
  border-radius: 8px;
}

.stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 65px;
  height: 65px;
  padding: 8px;
  background-color: #e6d8b7;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.stat-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 0.9rem;
  font-weight: bold;
  color: #6b4423;
}

.stat-label {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(74, 44, 15, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 10;
}

/* Show label on hover, focus or active state (for touch) */
.stat-item:hover .stat-label,
.stat-item:focus .stat-label,
.stat-item:active .stat-label {
  opacity: 1;
  visibility: visible;
}

.stat-item:active {
  transform: scale(0.95);
  background-color: #d9c9a3;
}

/* Container for the clickable area - Mobile First */
.click-area {
  margin: 15px auto;
  position: relative;
  cursor: pointer;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  background-color: rgba(255, 215, 0, 0.1); /* Very subtle gold background to make the hit area visible */
  z-index: 5; /* Ensure it's above other elements */
  touch-action: manipulation; /* Improve touch responsiveness */
  user-select: none; /* Prevent selection issues */
}

/* Main clickable button styling - Mobile First */
.click-button {
  background-color: #ffd700;
  border: 3px solid #ba8c00;
  border-radius: 50%;
  width: 150px; /* Larger for touch targets */
  height: 150px; /* Larger for touch targets */
  font-size: 3rem; /* Larger for visibility */
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
  user-select: none; /* Prevent text selection */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Active/clicked state for click button - Adapted for touch */
.click-button:active, .click-button.clicked,
.click-area:active .click-button {
  transform: translate(-50%, -50%) scale(0.95);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

/* Mobile Tab Navigation - Bottom Navigation Style */
.tab {
  overflow: hidden;
  display: flex;
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #e6d8b7;
  border-top: 1px solid #c9b28f;
  border-bottom: none;
  z-index: 10;
  margin-top: 15px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.tab button {
  flex: 1;
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 16px 5px; /* Taller for better touch targets */
  transition: 0.3s;
  font-size: 1rem;
  font-weight: bold;
  color: #6b4423;
}

.tab button:active {
  background-color: #d6c8a7; /* Feedback on touch */
}

.tab button.active {
  background-color: #c9b28f;
  color: #4a2c0f;
}

/* Tab content - Mobile First */
.tabcontent {
  display: none;
  padding: 10px 5px;
  border: 1px solid #c9b28f;
  border-radius: 5px;
  margin-top: 5px;
}

/* Jobs section - Mobile First */
.jobs, .upgrades, .artifacts {
  margin-top: 15px;
  padding: 12px 8px; /* Reduced padding */
  background-color: #eadec1;
  border-radius: 8px;
  border: 1px solid #c9b28f;
}

/* Job and upgrade containers - Mobile First */
.job-container, .upgrade-container, .artifact-container {
  margin-bottom: 12px;
  padding: 12px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Job and upgrade info layout - Mobile First */
.job-info, .upgrade-info {
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
  align-items: flex-start;
  width: 100%;
  gap: 8px;
}

/* Quantity button container */
.quantity-buttons {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 8px;
}

/* Base button styling - Mobile First, Touch Optimized */
.job-button, .upgrade-button, .quantity-button {
  background-color: #8e764c;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 12px 15px; /* Larger for touch */
  margin: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem; /* Larger for readability */
  min-height: 48px; /* Minimum touch target size */
  min-width: 48px; /* Minimum touch target size */
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-button {
  background-color: #758e4c;
}

/* Specific job/upgrade button styling */
.job-button.soldier, .upgrade-button.soldier {
  background-color: #8e4c4c;
}

.job-button.wizard, .upgrade-button.wizard {
  background-color: #4c568e;
}

/* Active/pressed state for buttons - Mobile optimized */
.job-button:active, .upgrade-button:active, .quantity-button:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* Disabled state for buttons */
.job-button:disabled, .upgrade-button:disabled, .quantity-button:disabled {
  background-color: #b5a990;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Quantity button specific styling */
.quantity-button {
  flex: 1;
  background-color: #e0d5bc;
  color: #4a2c0f;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 10px 0;
}

/* Gold particle animation */
.gold-particle {
  position: absolute;
  font-size: 1.5rem;
  pointer-events: none;
  animation: float-up 1s ease-out forwards;
  z-index: 50; /* Ensure visible above other elements */
}

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

/* Autosave notification - Mobile Friendly */
.autosave-notification {
  position: fixed;
  bottom: 70px; /* Above bottom tab navigation */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 100;
}

.autosave-notification.show {
  opacity: 1;
}

/* Prestige button - Mobile Friendly */
.prestige-button {
  background-color: #a88734;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 15px 20px; /* Larger for touch */
  width: 100%; /* Full width on mobile */
  font-size: 1.1rem;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: 15px;
  min-height: 50px; /* Good touch target */
}

.prestige-button:active {
  background-color: #8d7130;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.prestige-button:disabled {
  background-color: #776544;
  cursor: not-allowed;
  box-shadow: none;
}

/* Mobile-friendly developer overlay */
.dev-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  overflow-y: auto;
}

.dev-overlay > div {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.dev-overlay label {
  color: white;
  margin-bottom: 5px;
  display: block;
}

.dev-overlay input {
  padding: 12px;
  font-size: 16px;
  width: 100%;
  border-radius: 5px;
  border: none;
  margin-bottom: 10px;
}

.dev-overlay button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  margin: 10px 0;
  width: 100%;
  max-width: 300px;
}

#reset-button {
  background-color: #f44336;
}

#reset-button:active {
  background-color: #d32f2f;
}

#dev-set-values:active {
  background-color: #3e8e41;
}

#manual-save-button {
  background-color: #2196F3;
}

#manual-save-button:active {
  background-color: #0b7dda;
}

/* Artifact-specific styling */
.artifacts {
  background-color: #e6d8b7; /* Slightly different background for distinction */
}

.artifact-header {
  text-align: center;
  margin-bottom: 15px;
}

.artifact-title {
  color: #7d4924;
  margin-top: 0;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px #d9c7a9;
}

.artifact-description {
  color: #6b4423;
  font-size: 0.9rem;
  margin-top: 5px;
}

.artifact-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

#artifacts-container {
  display: contents; /* Makes the container's children become direct children of the grid */
}

.artifact-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(247, 237, 213, 0.7);
  border: 1px solid #c9b28f;
  border-radius: 8px;
  padding: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  height: 180px; /* Fixed height instead of max-height */
  width: 100%; /* Ensure it takes full column width */
  margin: 0; /* Remove any margins */
}

.artifact-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
  text-align: center;
}

.artifact-name {
  font-weight: bold;
  font-size: 0.95rem;
  color: #7d4924;
  margin-bottom: 3px;
  text-align: center;
}

.artifact-effect {
  color: #6b4423;
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 4px;
}

.artifact-flavor {
  font-style: italic;
  color: #8a7b5c;
  font-size: 0.75rem;
  text-align: center;
  border-top: 1px dashed #c9b28f;
  padding-top: 3px;
  margin-top: auto;
}

.artifact-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(234, 222, 193, 0.5);
  border: 2px dashed #c9b28f;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  min-height: 150px;
  grid-column: span 2;
}

.placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
  opacity: 0.7;
}

.artifact-placeholder p {
  color: #8a7b5c;
  font-style: italic;
}

/* Artifact rarity indicators */
.artifact-container.common {
  box-shadow: 0 2px 8px rgba(139, 107, 61, 0.3);
}

.artifact-container.uncommon {
  box-shadow: 0 2px 8px rgba(67, 139, 98, 0.3);
  border-color: #75b590;
}

.artifact-container.rare {
  box-shadow: 0 2px 8px rgba(65, 105, 225, 0.3);
  border-color: #6495ed;
}

.artifact-container.epic {
  box-shadow: 0 2px 8px rgba(147, 112, 219, 0.4);
  border-color: #9370db;
}

.artifact-container.legendary {
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.5);
  border-color: #daa520;
  background: linear-gradient(to bottom, rgba(253, 241, 196, 0.7), rgba(247, 237, 213, 0.7));
}

.artifact-container.mythic {
  box-shadow: 0 2px 12px rgba(255, 0, 128, 0.4);
  border-color: #ff3399;
  background: linear-gradient(to bottom, rgba(255, 230, 240, 0.7), rgba(247, 237, 213, 0.7));
}

/* Artifact locked/unlocked states */
.artifact-container.locked {
  filter: grayscale(100%);
  opacity: 0.7;
  cursor: default;
}

.artifact-container.locked .artifact-icon:after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
}

/* Media query adjustments for artifacts */
@media screen and (min-width: 768px) {
  .artifact-section {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  .artifact-placeholder {
    grid-column: span 3;
  }
}

@media screen and (min-width: 992px) {
  .artifact-section {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .artifact-placeholder {
    grid-column: span 4;
  }
  
  .artifact-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .artifact-container.locked:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Dark mode adjustments for artifacts */
@media (prefers-color-scheme: dark) {
  .artifacts {
    background-color: #352e1f;
  }
  
  .artifact-title {
    color: #e0c088;
    text-shadow: 1px 1px 2px #1a1610;
  }
  
  .artifact-description, .artifact-effect {
    color: #e8d7b0;
  }
  
  .artifact-container {
    background-color: rgba(58, 49, 34, 0.7);
    border-color: #5a4a2e;
  }
  
  .artifact-name {
    color: #e0c088;
  }
  
  .artifact-flavor {
    color: #b3a684;
    border-top-color: #5a4a2e;
  }
  
  .artifact-placeholder {
    background-color: rgba(53, 46, 31, 0.5);
    border-color: #5a4a2e;
  }
  
  .artifact-placeholder p {
    color: #b3a684;
  }
  
  /* Artifact rarity in dark mode */
  .artifact-container.uncommon {
    border-color: #5a8c71;
  }
  
  .artifact-container.rare {
    border-color: #4c71b3;
  }
  
  .artifact-container.epic {
    border-color: #7658a8;
  }
  
  .artifact-container.legendary {
    border-color: #a88734;
    background: linear-gradient(to bottom, rgba(90, 74, 46, 0.7), rgba(58, 49, 34, 0.7));
  }
  
  .artifact-container.mythic {
    border-color: #b34775;
    background: linear-gradient(to bottom, rgba(90, 46, 61, 0.7), rgba(58, 49, 34, 0.7));
  }
}

/* ===== Media Queries for Larger Screens ===== */

/* Tablets (portrait) and larger */
@media screen and (min-width: 600px) {
  body {
    padding: 15px;
  }
  
  .game-container {
    padding: 20px;
    max-width: 550px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  .stats {
    justify-content: space-around;
    padding: 15px;
  }
  
  .stat-item {
    width: 75px;
    height: 75px;
  }
  
  .stat-icon {
    font-size: 2rem;
  }
  
  .stat-value {
    font-size: 1rem;
  }
  
  .job-info, .upgrade-info {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .quantity-buttons {
    width: auto;
  }
  
  .tab {
    position: static;
    margin-bottom: 10px;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  .tabcontent {
    border-top: none;
  }
  
  .prestige-button {
    width: auto;
    min-width: 250px;
  }
}

/* Laptops and larger */
@media screen and (min-width: 992px) {
  .game-container {
    max-width: 600px;
    padding: 25px;
  }
  
  .click-button {
    width: 120px;
    height: 120px;
  }
  
  .click-button:hover {
    background-color: #ffdf33;
    transform: scale(1.05);
  }
  
  .job-button:hover, .upgrade-button:hover {
    opacity: 0.9;
  }
  
  .job-button.soldier:hover {
    background-color: #a65757;
  }
  
  .job-button.wizard:hover {
    background-color: #5763a6;
  }
  
  .upgrade-button:hover {
    background-color: #8fb35d;
  }
  
  .upgrade-button.soldier:hover {
    background-color: #a65757;
  }
  
  .upgrade-button.wizard:hover {
    background-color: #5763a6;
  }
  
  .quantity-button:hover {
    background-color: #d6c8a7;
  }
  
  .prestige-button:hover {
    background-color: #b99a4f;
  }
  
  /* Restore hover states for larger screens with pointer devices */
  @media (hover: hover) {
    .tab button:hover {
      background-color: #d6c8a7;
    }
  }
}

/* Dark mode support (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #2d2518;
    color: #e8d7b0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232d2518"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23352e1f" stroke-width="1"/></svg>');
  }
  
  .game-container {
    background-color: #3a3122;
    border-color: #5a4a2e;
  }
  
  h1 {
    color: #e0c088;
    text-shadow: 1px 1px 2px #1a1610;
    border-bottom-color: #5a4a2e;
  }
  
  .stats, .jobs, .upgrades {
    background-color: #352e1f;
    border-color: #5a4a2e;
  }
  
  .tab {
    background-color: #2d2518;
    border-color: #5a4a2e;
  }
  
  .tab button {
    color: #e0c088;
  }
  
  .tab button.active {
    background-color: #5a4a2e;
    color: #e8d7b0;
  }
  
  .job-container, .upgrade-container {
    border-color: #5a4a2e;
  }
  
  .quantity-button {
    background-color: #4a3e27;
    color: #e8d7b0;
  }
  
  .prestige-button {
    background-color: #8d7130;
  }
  
  .prestige-button:disabled {
    background-color: #4a3e27;
  }
  
  .stat-item {
    background-color: #3d3423;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .stat-value {
    color: #e0c088;
  }
  
  .stat-label {
    background-color: rgba(224, 192, 136, 0.9);
    color: #2d2518;
  }
  
  .stat-item:active {
    background-color: #4a3e27;
  }
}