/* ========================================
   GAME MODALS - SHARED COMPONENT SYSTEM
   ========================================

   Centralized modal styling for all Pairagrams games.
   Follows BEM naming convention with modifier classes.

   Games using this system:
   - Hangagrams (guess, definition, clue, puzzle-info, giveup, better-luck)
   - Findagrams (score, definition, clue, onboarding, secret-word)
   - Laddergrams (score, collection, collection-detail, definition, onboarding)
   - Speed Ladder (score, definition)

   Pattern: game-modal-[component]--[modifier]
   ======================================== */

/* ========== BASE OVERLAY ========== */
/* Dark semi-transparent background that covers the full viewport */
.game-modal-overlay {
  display: none; /* Hidden by default, shown via JS */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000;
  /* Add centering properties to base class to prevent layout shift */
  align-items: center !important;
  justify-content: center !important;
}

/* When modal is shown (via JS inline style), enable flexbox display */
.game-modal-overlay[style*="display: flex"],
.game-modal-overlay[style*="display:flex"] {
  display: flex !important;
}

/* ========== BASE MODAL CONTENT BOX ========== */
/* White background modal - default variant */
.game-modal-content {
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  max-width: 400px !important;
  width: 90% !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  /* Use fixed positioning for immediate centering - prevents layout shift */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  /* CRITICAL: Base transform keeps modal centered after animation completes */
  transform: translate(-50%, -50%);
  animation: slideUp 0.3s ease-out;
}

/* Grey background variant (used for onboarding, some score modals) */
.game-modal-content--grey {
  background: #e8e8e8 !important;
}

/* Larger modal variant (for detailed content like collections) */
.game-modal-content--large {
  max-width: 500px !important;
  padding: 30px !important;
}

/* Compact modal variant (for simple confirmations) */
.game-modal-content--compact {
  max-width: 320px !important;
  padding: 16px !important;
  width: 90% !important;
}

/* ========== DEFINITION MODAL VARIANT ========== */
/* Purple border style (Option 5) - shared across Hangagrams, Findagrams, Laddergrams */
.game-modal-content--purple-border {
  background: rgb(241, 239, 249) !important; /* Light lavender */
  color: rgb(40, 50, 80) !important; /* Dark navy text */
  border: 2px solid rgb(100, 90, 230) !important; /* Vibrant indigo border */
  border-radius: 8px !important;
  padding: 16px !important;
  max-width: 90% !important;
  width: 280px !important;
  min-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* ========== MODAL SECTIONS ========== */
/* Semantic header/body/footer sections for structured modals */

.game-modal-header {
  margin: 0 0 16px 0;
  padding: 0 0 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.game-modal-header h2,
.game-modal-header h3 {
  margin: 0 0 8px 0 !important;
  color: #333 !important;
  font-size: 20px;
  font-weight: 600;
}

.game-modal-body {
  margin: 16px 0;
  text-align: left;
}

.game-modal-body p {
  margin: 12px 0;
  line-height: 1.5;
  color: #555;
}

.game-modal-footer {
  margin: 20px 0 0 0;
  padding: 12px 0 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ========== DEFINITION MODAL SPECIFIC STYLES ========== */
/* Used across Hangagrams, Findagrams, Laddergrams for word definitions */

.game-definition-header {
  margin: 0 0 12px 0;
  padding: 0;
  text-align: center;
}

.game-definition-word {
  margin: 0 0 4px 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: rgb(100, 90, 230) !important; /* Indigo */
  text-transform: uppercase;
}

.game-definition-pos {
  margin: 0 !important;
  font-size: 12px !important;
  color: rgb(100, 100, 100) !important;
  font-style: italic;
}

.game-definition-body {
  margin: 12px 0;
  text-align: left;
}

.game-definition-text {
  margin: 0 0 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: rgb(40, 50, 80) !important;
}

.game-definition-phonetic {
  margin: 8px 0 0 0 !important;
  font-size: 12px !important;
  color: rgb(120, 120, 120) !important;
  font-style: italic;
}

.game-definition-footer {
  margin: 16px 0 0 0;
  text-align: center;
}

.game-definition-close {
  background: rgb(100, 90, 230) !important;
  color: white !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.2s;
}

.game-definition-close:hover {
  opacity: 0.9;
}

/* ========== SCORE MODAL STYLES ========== */
/* Used across Findagrams, Laddergrams, Speed Ladder */

.game-score-title {
  margin: 0 0 16px 0 !important;
  color: #333 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

.game-score-items {
  text-align: left;
  margin: 16px 0;
}

.game-score-item {
  margin: 8px 0;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
}

.game-score-item strong {
  font-weight: 600;
  color: #333;
}

.game-score-item small {
  display: block;
  color: #777;
  font-size: 12px;
  margin-top: 4px;
}

/* Color-coded score values */
.game-score-green { color: rgb(120, 200, 90) !important; }
.game-score-yellow { color: rgb(255, 205, 60) !important; }
.game-score-red { color: rgb(230, 90, 100) !important; }
.game-score-blue { color: rgb(100, 150, 230) !important; }

/* ========== ANIMATIONS ========== */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
  }
}

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

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .game-modal-content,
  .game-modal-overlay {
    animation: none !important;
  }
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Mobile devices */
@media (max-width: 600px) {
  .game-modal-content {
    width: 95% !important;
    padding: 20px !important;
  }

  .game-modal-content--large {
    width: 95% !important;
    padding: 20px !important;
    max-width: 95% !important;
  }

  .game-modal-content--compact {
    width: 95% !important;
  }

  .game-modal-header h2,
  .game-modal-header h3 {
    font-size: 18px;
  }

  .game-definition-word {
    font-size: 20px !important;
  }
}

/* Very small devices */
@media (max-width: 380px) {
  .game-modal-content--purple-border {
    width: 260px !important;
    min-width: 260px !important;
  }
}

/* ========== ACCESSIBILITY ========== */

/* Focus states for keyboard navigation */
.game-modal-overlay:focus {
  outline: none;
}

.game-definition-close:focus,
.game-modal-content button:focus {
  outline: 2px solid rgb(100, 90, 230);
  outline-offset: 2px;
}

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

/* ========== LEGACY SUPPORT ========== */
/* Aliases for game-specific class names to support gradual migration */

/* Hangagrams Guess Modal */
.pairagrams-guess-modal-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.pairagrams-guess-modal-overlay.is-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pairagrams-guess-modal-content {
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  max-width: 450px !important; /* Increased from 320px to accommodate long words like "APPOINTMENTS" */
  width: 95% !important; /* Increased from 90% for better mobile coverage */
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
}

.pairagrams-definition-modal {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(241, 239, 249) !important;
  color: rgb(40, 50, 80) !important;
  border: 2px solid rgb(100, 90, 230) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  max-width: 90% !important;
  width: 280px !important;
  min-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 10000;
}

.pairagrams-definition-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999;
}

/* Enable display when JavaScript sets inline styles */
.pairagrams-definition-modal[style*="display: block"],
.pairagrams-definition-modal[style*="display:block"] {
  display: block !important;
}

.pairagrams-definition-overlay[style*="display: block"],
.pairagrams-definition-overlay[style*="display:block"] {
  display: block !important;
}

.pairagrams-definition-header { /* Use game-definition-header */ }
.pairagrams-definition-word { /* Use game-definition-word */ }
.pairagrams-definition-pos { /* Use game-definition-pos */ }
.pairagrams-definition-body { /* Use game-definition-body */ }
.pairagrams-definition-text { /* Use game-definition-text */ }
.pairagrams-definition-phonetic { /* Use game-definition-phonetic */ }
.pairagrams-definition-footer { /* Use game-definition-footer */ }
.pairagrams-definition-close { /* Use game-definition-close */ }

/* ========== FINDAGRAMS MODALS ========== */

/* Secret Word Modal */
.findagrams-secret-modal {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #d4edda !important;
  border: 2px solid #c3e6cb !important;
  padding: 2rem !important;
  border-radius: 12px !important;
  text-align: center !important;
  z-index: 1001;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

.findagrams-secret-text {
  color: #155724 !important;
  font-size: 1.3rem !important;
  font-weight: bold !important;
  margin: 0 !important;
}

/* Score Breakdown Modal */
.findagrams-score-modal-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5) !important;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* When modal is shown (via JS), enable flexbox centering */
.findagrams-score-modal-overlay[style*="display: flex"],
.findagrams-score-modal-overlay[style*="display:flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.findagrams-score-modal-content {
  background: white !important;
  padding: 2rem !important;
  border-radius: 12px !important;
  max-width: 450px !important;
  text-align: left !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.findagrams-score-modal-title {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

.findagrams-score-modal-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem 0 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.findagrams-score-modal-subtitle {
  text-align: center !important;
  margin: 1rem 0 0.5rem !important;
}

.findagrams-score-modal-subtitle-speed {
  color: #28a745 !important;
}

.findagrams-score-modal-subtitle-ranking {
  color: #007bff !important;
}

.findagrams-score-modal-note {
  font-style: italic !important;
  color: #666 !important;
  font-size: 0.9rem !important;
}

.findagrams-score-modal-rankings {
  display: grid !important;
  gap: 4px !important;
  font-size: 0.9rem !important;
}

.findagrams-score-modal-rank {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.findagrams-score-modal-badge {
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-weight: bold !important;
  min-width: 90px !important;
  text-align: center !important;
  font-size: 0.8rem !important;
}

.findagrams-score-modal-badge-novice {
  background: #6c757d !important;
}

.findagrams-score-modal-badge-apprentice {
  background: #17a2b8 !important;
}

.findagrams-score-modal-badge-explorer {
  background: #28a745 !important;
}

.findagrams-score-modal-badge-sleuth {
  background: #ffc107 !important;
  color: #212529 !important;
}

.findagrams-score-modal-badge-detective {
  background: #fd7e14 !important;
}

.findagrams-score-modal-badge-investigator {
  background: #dc3545 !important;
}

.findagrams-score-modal-badge-master {
  background: #6f42c1 !important;
}

.findagrams-score-modal-badge-legend {
  background: linear-gradient(45deg, #ffd700, #ffed4e) !important;
  color: #212529 !important;
}

.findagrams-score-modal-button-container {
  text-align: center !important;
  margin-top: 1rem !important;
}

/* Onboarding Modal */
.findagrams-onboarding-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1004;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.findagrams-onboarding-overlay.show {
  display: flex !important;
  opacity: 1 !important;
}

.findagrams-onboarding-modal {
  background: #e8e8e8 !important;
  border-radius: 12px !important;
  padding: 40px !important;
  max-width: 500px !important;
  width: 90% !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 1005;
}

.findagrams-onboarding-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: 2px solid #666 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #666 !important;
  transition: all 0.2s ease;
}

.findagrams-onboarding-close:hover {
  background: #666 !important;
  color: white !important;
}

/* Clue Modal */
.findagrams-clue-modal {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white !important;
  border: 2px solid #007bff !important;
  padding: 2rem !important;
  border-radius: 12px !important;
  text-align: center !important;
  z-index: 1001;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
  max-width: 400px !important;
}

.findagrams-clue-message {
  color: #333 !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.4 !important;
}

.findagrams-clue-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5) !important;
  z-index: 1000;
}

/* Definition Modal (Purple Border Style) */
.findagrams-definition-modal {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(241, 239, 249) !important;
  color: rgb(40, 50, 80) !important;
  border: 2px solid rgb(100, 90, 230) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  max-width: 90% !important;
  width: 280px !important;
  min-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 10000;
}

.findagrams-definition-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba( 0, 0, 0, 0.5) !important;
  z-index: 9999;
}

/* Enable display when JavaScript sets inline styles */
.findagrams-definition-modal[style*="display: block"],
.findagrams-definition-modal[style*="display:block"] {
  display: block !important;
}

.findagrams-definition-overlay[style*="display: block"],
.findagrams-definition-overlay[style*="display:block"] {
  display: block !important;
}

/* Findagrams uses shared definition component classes */
.findagrams-definition-header { /* Uses game-definition-header */ }
.findagrams-definition-word { /* Uses game-definition-word */ }
.findagrams-definition-pos { /* Uses game-definition-pos */ }
.findagrams-definition-body { /* Uses game-definition-body */ }
.findagrams-definition-text { /* Uses game-definition-text */ }
.findagrams-definition-phonetic { /* Uses game-definition-phonetic */ }
.findagrams-definition-footer { /* Uses game-definition-footer */ }
.findagrams-definition-close { /* Uses game-definition-close */ }

/* ========== LADDERGRAMS MODALS ========== */

/* .laddergrams-score-modal-overlay - Partial Tailwind conversion */
/* Converted to Tailwind: position (fixed), positioning (inset-0), flexbox alignment (items-center, justify-center) */
.laddergrams-score-modal-overlay {
  display: none !important;
  /* position: fixed; - NOW: Tailwind 'fixed' */
  /* top: 0; left: 0; width: 100%; height: 100%; - NOW: Tailwind 'inset-0' */
  background: rgba(0, 0, 0, 0.5) !important;
  /* align-items: center; - NOW: Tailwind 'items-center' */
  /* justify-content: center; - NOW: Tailwind 'justify-center' */
  z-index: 1000;
}

.laddergrams-score-modal-overlay[style*="display: flex"],
.laddergrams-score-modal-overlay[style*="display:flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* .laddergrams-score-modal-content - Partial Tailwind conversion */
/* Converted to Tailwind: padding (p-8), text-align (text-left), overflow-y (overflow-y-auto) */
.laddergrams-score-modal-content {
  background: white !important;
  /* padding: 2rem !important; - NOW: Tailwind 'p-8' */
  border-radius: 12px !important;
  max-width: 450px !important;
  /* text-align: left !important; - NOW: Tailwind 'text-left' */
  max-height: 90vh !important;
  /* overflow-y: auto !important; - NOW: Tailwind 'overflow-y-auto' */
}

/* .laddergrams-definition-modal - Partial Tailwind conversion */
/* Converted to Tailwind: position (fixed), border-radius (rounded-board), padding (p-4) */
.laddergrams-definition-modal {
  display: none !important;
  /* position: fixed; - NOW: Tailwind 'fixed' */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(241, 239, 249) !important;
  color: rgb(40, 50, 80) !important;
  border: 2px solid rgb(100, 90, 230) !important;
  /* border-radius: 8px !important; - NOW: Tailwind 'rounded-board' */
  /* padding: 16px !important; - NOW: Tailwind 'p-4' */
  max-width: 90% !important;
  width: 280px !important;
  min-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 10000;
}

/* .laddergrams-definition-overlay - Partial Tailwind conversion */
/* Converted to Tailwind: position (fixed), positioning (inset-0) */
.laddergrams-definition-overlay {
  display: none !important;
  /* position: fixed; - NOW: Tailwind 'fixed' */
  /* top: 0; left: 0; width: 100%; height: 100%; - NOW: Tailwind 'inset-0' */
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999;
}

/* Enable display when JavaScript sets inline styles */
.laddergrams-definition-modal[style*="display: block"],
.laddergrams-definition-modal[style*="display:block"] {
  display: block !important;
}

.laddergrams-definition-overlay[style*="display: block"],
.laddergrams-definition-overlay[style*="display:block"] {
  display: block !important;
}

/* Laddergrams uses shared definition component classes */
.laddergrams-definition-header { /* Uses game-definition-header */ }
.laddergrams-definition-word { /* Uses game-definition-word */ }
.laddergrams-definition-pos { /* Uses game-definition-pos */ }
.laddergrams-definition-body { /* Uses game-definition-body */ }
.laddergrams-definition-text { /* Uses game-definition-text */ }
.laddergrams-definition-phonetic { /* Uses game-definition-phonetic */ }
.laddergrams-definition-footer { /* Uses game-definition-footer */ }
.laddergrams-definition-close { /* Uses game-definition-close */ }

/* ========== SPEED LADDER MODALS ========== */

.speed-score-modal-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.speed-score-modal-overlay[style*="display: flex"],
.speed-score-modal-overlay[style*="display:flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.speed-score-modal-content {
  position: relative !important;
  background: white !important;
  padding: 2rem !important;
  border-radius: 12px !important;
  max-width: 450px !important;
  text-align: left !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.speed-definition-modal {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(241, 239, 249) !important;
  color: rgb(40, 50, 80) !important;
  border: 2px solid rgb(100, 90, 230) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  max-width: 90% !important;
  width: 280px !important;
  min-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 10000;
}

.speed-definition-modal-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999;
}

/* Enable display when JavaScript sets inline styles */
.speed-definition-modal[style*="display: block"],
.speed-definition-modal[style*="display:block"] {
  display: block !important;
}

.speed-definition-modal-overlay[style*="display: block"],
.speed-definition-modal-overlay[style*="display:block"] {
  display: block !important;
}

/* Speed Ladder uses shared definition component classes */
.speed-definition-header { /* Uses game-definition-header */ }
.speed-definition-word { /* Uses game-definition-word */ }
.speed-definition-pos { /* Uses game-definition-pos */ }
.speed-definition-body { /* Uses game-definition-body */ }
.speed-definition-text { /* Uses game-definition-text */ }
.speed-definition-phonetic { /* Uses game-definition-phonetic */ }
.speed-definition-footer { /* Uses game-definition-footer */ }
.speed-definition-close { /* Uses game-definition-close */ }

/* ========== NEW FINDAGRAMS MODALS ========== */

.newfindagrams-definition-modal {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(241, 239, 249) !important;
  color: rgb(40, 50, 80) !important;
  border: 2px solid rgb(100, 90, 230) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  max-width: 90% !important;
  width: 280px !important;
  min-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 10000;
}

.newfindagrams-definition-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999;
}

/* Enable display when JavaScript sets inline styles */
.newfindagrams-definition-modal[style*="display: block"],
.newfindagrams-definition-modal[style*="display:block"] {
  display: block !important;
}

.newfindagrams-definition-overlay[style*="display: block"],
.newfindagrams-definition-overlay[style*="display:block"] {
  display: block !important;
}

/* New Findagrams uses shared definition component classes */
.newfindagrams-definition-header { /* Uses game-definition-header */ }
.newfindagrams-definition-word { /* Uses game-definition-word */ }
.newfindagrams-definition-pos { /* Uses game-definition-pos */ }
.newfindagrams-definition-body { /* Uses game-definition-body */ }
.newfindagrams-definition-text { /* Uses game-definition-text */ }
.newfindagrams-definition-phonetic { /* Uses game-definition-phonetic */ }
.newfindagrams-definition-footer { /* Uses game-definition-footer */ }
.newfindagrams-definition-close { /* Uses game-definition-close */ }

/* ========== HANGAGRAMS PUZZLE INFO MODAL ========== */
/* Initial modal shown on page load with puzzle stats */

.pairagrams-puzzle-info-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000;
}

.pairagrams-puzzle-info-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  max-width: 400px !important;
  width: 90% !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 1001;
}

.pairagrams-puzzle-info-title {
  margin: 0 0 16px 0 !important;
  color: rgb(100, 90, 230) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

.pairagrams-puzzle-info-message {
  margin: 16px 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgb(40, 50, 80) !important;
  font-weight: 500;
}

.pairagrams-puzzle-info-ok-button {
  background: rgb(100, 90, 230) !important;
  color: white !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  transition: opacity 0.2s;
}

.pairagrams-puzzle-info-ok-button:hover {
  opacity: 0.9;
}

/* ========== HANGAGRAMS CLUE MODAL ========== */
.pairagrams-clue-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000;
}

.pairagrams-clue-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  max-width: 400px !important;
  width: 90% !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 1001;
}

.pairagrams-clue-message {
  margin: 16px 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgb(40, 50, 80) !important;
  font-weight: 500;
}

.pairagrams-clue-ok-button {
  background: rgb(100, 90, 230) !important;
  color: white !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  transition: opacity 0.2s;
}

.pairagrams-clue-ok-button:hover {
  opacity: 0.9;
}

/* ========== HANGAGRAMS ONBOARDING MODAL ========== */
.pairagrams-onboarding-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1002;
  opacity: 0;
  transition: opacity 0.3s;
}

.pairagrams-onboarding-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #e8e8e8 !important;
  padding: 30px !important;
  border-radius: 12px !important;
  max-width: 500px !important;
  width: 90% !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 1003;
}

.pairagrams-onboarding-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: none !important;
  color: #666 !important;
  font-size: 28px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

.pairagrams-onboarding-line {
  opacity: 0;
  transform: translateY(10px);
  margin: 12px 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(40, 50, 80);
}

.pairagrams-onboarding-pair-yellow {
  display: inline-block;
  background: rgb(255, 205, 60);
  color: rgb(40, 50, 80);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  margin: 0 4px;
}

.pairagrams-onboarding-plus {
  font-weight: 700;
  margin: 0 4px;
}

.pairagrams-onboarding-letter-wrapper {
  display: inline-block;
  margin: 0 4px;
}

.pairagrams-onboarding-letter-green {
  background: rgb(120, 200, 90);
  color: white;
  padding: 4px 8px;
  border-radius: 4px 0 0 4px;
  font-weight: 700;
}

.pairagrams-onboarding-letter-yellow {
  background: rgb(255, 205, 60);
  color: rgb(40, 50, 80);
  padding: 4px 8px;
  font-weight: 700;
}

.pairagrams-onboarding-letter-yellow-end {
  background: rgb(255, 205, 60);
  color: rgb(40, 50, 80);
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  font-weight: 700;
}

.pairagrams-onboarding-monospace {
  font-family: monospace;
  font-size: 20px;
  font-weight: 700;
  color: rgb(100, 90, 230);
  letter-spacing: 2px;
}

.pairagrams-onboarding-checkbox {
  margin-right: 8px;
  cursor: pointer;
}

.pairagrams-onboarding-label {
  cursor: pointer;
  font-size: 14px;
}

/* ========== HANGAGRAMS GIVE UP MODAL ========== */
.pairagrams-giveup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000;
}

.pairagrams-giveup-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  max-width: 320px !important;
  width: 90% !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 1001;
}

.pairagrams-giveup-title {
  margin: 0 0 12px 0 !important;
  color: #333 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.pairagrams-giveup-message {
  margin: 12px 0 20px 0 !important;
  font-size: 14px !important;
  color: #555 !important;
  line-height: 1.5;
}

.pairagrams-giveup-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pairagrams-giveup-yes,
.pairagrams-giveup-no {
  flex: 1;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.2s;
}

.pairagrams-giveup-yes {
  background: rgb(230, 90, 100) !important;
  color: white !important;
}

.pairagrams-giveup-no {
  background: rgb(100, 90, 230) !important;
  color: white !important;
}

.pairagrams-giveup-yes:hover,
.pairagrams-giveup-no:hover {
  opacity: 0.9;
}

/* ========== HANGAGRAMS BETTER LUCK MODAL ========== */
.pairagrams-betterluck-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000;
}

.pairagrams-betterluck-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  max-width: 320px !important;
  width: 90% !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 1001;
}

.pairagrams-betterluck-title {
  margin: 0 0 20px 0 !important;
  color: #333 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.pairagrams-betterluck-ok {
  background: rgb(100, 90, 230) !important;
  color: white !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.2s;
}

.pairagrams-betterluck-ok:hover {
  opacity: 0.9;
}

/* ========== HANGAGRAMS ARCHIVE MODAL ========== */
.pairagrams-archive-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000;
}

.pairagrams-register-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white !important;
  padding: 25px !important;
  border-radius: 12px !important;
  max-width: 400px !important;
  width: 90% !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 1001;
}

/* ========== HANGAGRAMS DEFINITION MODAL OVERLAY ========== */
.pairagrams-definition-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

/* ========== END OF SHARED MODAL SYSTEM ========== */

/* ========================================
   ROUND SELECTION MODAL
   ======================================== */

/* Overlay */
.round-selection-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  animation: fadeIn 0.3s ease;
}

.round-selection-overlay.show {
  display: block;
}

/* Modal Container */
.round-selection-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  padding: 24px 20px;
  max-width: 520px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.round-selection-modal.show {
  display: block;
}

/* Header */
.round-selection-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 6px 0;
  text-align: center;
}

.round-selection-subtitle {
  font-size: 13px;
  color: #7f8c8d;
  margin: 0 0 20px 0;
  text-align: center;
}

/* Tutorial Button */
.tutorial-button-container {
  text-align: left;
  margin-bottom: 16px;
}

.tutorial-button {
  display: inline-block;
  background: #9b59b6; /* Purple color */
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tutorial-button:hover {
  background: #8e44ad; /* Darker purple on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
}

.tutorial-button:active {
  transform: translateY(0);
}

/* Rounds Container */
.rounds-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Explicit 3 columns for desktop */
  gap: 12px;
  margin-bottom: 20px;
}

/* Tablet optimization */
@media (max-width: 768px) and (min-width: 601px) {
  .rounds-container {
    grid-template-columns: repeat(3, 1fr); /* Keep 3 columns on tablets */
    gap: 10px;
  }
}

/* Mobile: Compact 3-column layout (most phones) */
@media (max-width: 600px) and (min-width: 376px) {
  .rounds-container {
    grid-template-columns: repeat(3, 1fr); /* Keep 3 columns */
    gap: 8px; /* Tighter gap for mobile */
  }

  .round-selection-modal {
    max-width: 95%;
    width: 95%;
    padding: 20px 16px; /* Reduce padding */
  }

  .round-button {
    padding: 12px 8px; /* Compact padding for mobile */
    min-height: 87px; /* Reduced by 33% from 130px */
  }

  .round-label {
    font-size: 13px; /* Smaller "ROUND 1" text */
    letter-spacing: 0.3px;
  }

  .difficulty-badge {
    font-size: 9px; /* Smaller badge text */
    padding: 4px 8px; /* Tighter padding */
  }

  .letter-count {
    font-size: 11px; /* Smaller letter count */
  }
}

/* Very small phones: Stack vertically */
@media (max-width: 375px) {
  .rounds-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .round-selection-modal {
    max-width: 95%;
    width: 95%;
  }

  .round-button {
    padding: 16px 20px; /* More horizontal padding when stacked */
    min-height: auto; /* Remove fixed height when stacked */
  }

  .round-label {
    font-size: 16px; /* Restore normal size when stacked */
  }

  .difficulty-badge {
    font-size: 11px; /* Restore normal size when stacked */
    padding: 5px 12px;
  }

  .letter-count {
    font-size: 12px; /* Restore normal size when stacked */
  }
}

/* Round Button */
.round-button {
  position: relative;
  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 16px 12px;
  min-height: 100px; /* Reduced by 33% from 140px */
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.round-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: #9b59b6;
  background: white;
}

.round-button:active {
  transform: translateY(-2px);
}

.round-button:focus {
  outline: 3px solid rgba(155, 89, 182, 0.3);
  outline-offset: 2px;
}

/* Round Content */
.round-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

/* Round Header */
.round-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.round-label {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Difficulty Badges */
.difficulty-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
}

.easy-badge {
  background: #27ae60;
  color: white;
}

.medium-badge {
  background: #f39c12;
  color: white;
}

.hard-badge {
  background: #9b59b6;
  color: white;
}

/* Round Info */
.round-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #6c757d;
  width: 100%;
}

.letter-count,
.word-count {
  display: block;
  text-align: center;
}

/* Completion Stamp */
.completion-stamp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/asset_new/completed_transparent.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  animation: stampAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none; /* Allow clicking through the stamp to the button */
}

.stamp-icon {
  display: none; /* Hidden - replaced by image */
}

.stamp-text {
  display: none; /* Hidden - replaced by image */
}

/* IN PROGRESS Indicator (orange/yellow theme) */
.in-progress-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  animation: progressPulse 2s ease-in-out infinite;
}

.progress-icon {
  font-size: 48px;
  color: white;
  font-weight: 700;
  animation: playIcon 1.5s ease-in-out infinite;
}

.progress-text {
  font-size: 16px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Animation for progress indicator - subtle pulse */
@keyframes progressPulse {
  0%, 100% {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}

/* Animation for play icon - subtle bounce */
@keyframes playIcon {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
}

/* Ensure completion stamp takes priority over in-progress */
.round-button.completed .in-progress-indicator {
  display: none !important;
}

/* Completed Button State */
.round-button.completed {
  border-color: #27ae60;
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}

.round-button.completed:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

/* Footer */
.round-selection-footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #dee2e6;
}

/* Navigation Buttons */
.round-nav-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.round-nav-btn {
  flex: 1;
  padding: 10px 16px;
  background: #9b59b6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.round-nav-btn:hover {
  background: #7d3c98;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

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

/* Mobile: Keep navigation buttons on one line with smaller text */
@media (max-width: 600px) {
  .round-nav-buttons {
    gap: 6px;
  }

  .round-nav-btn {
    padding: 10px 8px;
    font-size: 11px;
    letter-spacing: 0.3px;
  }
}

/* Archives Link Section (shown when rounds not all complete) */
.archives-link-section {
  text-align: center;
  padding: 16px 0;
}

.not-ready-text {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.archives-link {
  display: inline-block;
  color: #9b59b6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 8px 12px;
  border-radius: 6px;
}

.archives-link:hover {
  color: #7d3c98;
  background: rgba(155, 89, 182, 0.1);
  transform: translateX(4px);
}

/* Victory Message */
.victory-message {
  text-align: center;
  padding: 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border: 2px solid #27ae60;
  border-radius: 12px;
}

.victory-text {
  font-size: 15px;
  font-weight: 600;
  color: #155724;
  margin: 0 0 12px 0;
}

.victory-home-btn {
  padding: 12px 24px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.victory-home-btn:hover {
  background: #1e8449;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

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

/* ========================================
   CONGRATS MODAL
======================================== */

/* Congrats Modal Container */
.congrats-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.congrats-modal.show {
  display: block;
}

/* Congrats Close Button */
.congrats-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #6c757d;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.congrats-close:hover {
  background: #f8f9fa;
  color: #2c3e50;
}

/* Congrats Content */
.congrats-content {
  text-align: center;
}

.congrats-title {
  font-size: 26px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 16px 0;
}

.congrats-message {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
}

/* Congrats Modal Overlay */
.congrats-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

.congrats-overlay.show {
  display: block;
}

/* ========== PHASE 4: GAME OVER MODAL (FAILURE STATE) ========== */
.game-over-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 16px;
  border: 3px solid #e74c3c; /* Red border for failure state */
  padding: 32px 24px;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(231, 76, 60, 0.3);
  z-index: 10000;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-over-modal.show {
  display: block;
}

/* Game Over Close Button */
.game-over-modal .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #6c757d;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.game-over-modal .close-btn:hover {
  background: #f8f9fa;
  color: #2c3e50;
}

/* Game Over Content */
.game-over-content {
  text-align: center;
}

.game-over-message {
  margin-bottom: 24px;
}

.game-over-message h2 {
  font-size: 26px;
  font-weight: 700;
  color: #e74c3c; /* Red for failure */
  margin: 0 0 12px 0;
}

.game-over-message p {
  font-size: 14px;
  color: #6c757d;
  margin: 8px 0;
  line-height: 1.6;
}

.game-over-message strong {
  font-size: 18px;
  color: #2c3e50;
  display: block;
  margin-top: 8px;
}

/* Game Over Stats */
.game-over-stats {
  background: #fff5f5; /* Light red background */
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid #f9dada;
}

.game-over-stat {
  font-size: 14px;
  color: #2c3e50;
  margin: 8px 0;
  padding: 4px 0;
}

.game-over-stat strong {
  color: #e74c3c; /* Red for emphasis */
  font-weight: 700;
}

.leaderboard-ineligible {
  font-size: 13px;
  color: #e74c3c;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f9dada;
  font-weight: 600;
}

/* Game Over Buttons */
.game-over-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.game-over-buttons .btn {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.btn-game-over-home {
  background: #3498db; /* Blue for HOME */
  color: white;
}

.btn-game-over-home:hover {
  background: #2980b9;
  transform: translateY(-1px);
}

.btn-game-over-archives {
  background: #9b59b6; /* Purple for ARCHIVES */
  color: white;
}

.btn-game-over-archives:hover {
  background: #8e44ad;
  transform: translateY(-1px);
}

.btn-game-over-other {
  background: #f39c12; /* Orange for TRY OTHER */
  color: white;
}

.btn-game-over-other:hover {
  background: #e67e22;
  transform: translateY(-1px);
}

.btn-game-over-leaderboard {
  background: #27ae60; /* Green for LEADERBOARD */
  color: white;
}

.btn-game-over-leaderboard:hover {
  background: #229954;
  transform: translateY(-1px);
}

/* Game Over Modal Overlay */
.game-over-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Slightly darker for failure */
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

.game-over-overlay.show {
  display: block;
}

/* Responsive Design for Game Over Modal */
@media (max-width: 480px) {
  .game-over-modal {
    padding: 24px 16px;
    max-width: 95%;
  }

  .game-over-message h2 {
    font-size: 22px;
  }

  .game-over-buttons {
    grid-template-columns: 1fr; /* Stack buttons on small screens */
    gap: 8px;
  }
}

/* ========== ACCESSIBILITY: REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  .game-over-modal,
  .game-over-overlay {
    animation: none !important;
    transition: none;
  }

  .game-over-modal.show {
    opacity: 1;
    transform: translate(-50%, -50%); /* Final position immediately */
  }

  .game-over-overlay.show {
    opacity: 1;
  }
}

@keyframes stampAppear {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
  }
  60% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ========== END ROUND SELECTION MODAL ========== */