/**
 * Global Positioning System for Game UI Components
 * 
 * DESIGN PRINCIPLES:
 * - Modular: Each section can be imported independently
 * - Future-proof: CSS custom properties for easy theme switching
 * - Component-agnostic: Works with any UI framework or vanilla JS
 * - Responsive-first: Mobile-first design with progressive enhancement
 * - Extensible: Easy to add new positioning patterns
 * 
 * VERSION: 1.0.0
 * COMPATIBILITY: All modern browsers (CSS custom properties required)
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   Future-proof theming and consistent spacing system
   ============================================================================ */

:root {
  /* Z-index hierarchy - Modular layer system */
  --z-background: 1;
  --z-game-canvas: 10;
  --z-ui-overlay: 20;
  --z-ui-overlay-high: 25;   /* For priority UI elements */
  --z-modals: 30;
  --z-modal-backdrop: 30;
  --z-modal-content: 31;
  --z-notifications: 40;
  --z-loading: 50;
  --z-debug: 9999;           /* For development/debugging */
  
  /* Spacing system - Mobile-first with progressive enhancement */
  --spacing-xs: 0.25rem;     /* 4px - Minimal spacing */
  --spacing-sm: 0.5rem;      /* 8px - Small spacing */
  --spacing-md: 1rem;        /* 16px - Standard spacing */
  --spacing-lg: 1.5rem;      /* 24px - Large spacing */
  --spacing-xl: 2rem;        /* 32px - Extra large spacing */
  --spacing-xxl: 3rem;       /* 48px - Maximum spacing */
  
  /* Component dimensions - Consistent sizing */
  --ui-border-radius: 8px;
  --ui-border-radius-large: 12px;
  --ui-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --ui-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --ui-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);
  
  /* Animation timing - Consistent motion */
  --animation-fast: 0.15s;
  --animation-normal: 0.3s;
  --animation-slow: 0.5s;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   CORE POSITIONING CLASSES
   Base positioning utilities for all UI components
   ============================================================================ */

/* Position types - Choose appropriate positioning context */
.ui-relative {
  position: relative;
  z-index: var(--z-ui-overlay);
}

.ui-absolute {
  position: absolute;
  z-index: var(--z-ui-overlay);
}

.ui-fixed {
  position: fixed;
  z-index: var(--z-ui-overlay);
}

.ui-sticky {
  position: sticky;
  z-index: var(--z-ui-overlay);
}

/* High priority UI elements */
.ui-priority {
  z-index: var(--z-ui-overlay-high) !important;
}

/* ============================================================================
   STANDARD POSITION UTILITIES
   Common positioning patterns for UI components
   ============================================================================ */

/* Corner positions */
.pos-top-left { 
  top: var(--spacing-sm); 
  left: var(--spacing-sm); 
}

.pos-top-right { 
  top: var(--spacing-sm); 
  right: var(--spacing-sm); 
}

.pos-bottom-left { 
  bottom: var(--spacing-sm); 
  left: var(--spacing-sm); 
}

.pos-bottom-right { 
  bottom: var(--spacing-sm); 
  right: var(--spacing-sm); 
}

/* Center positions */
.pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos-center-x {
  left: 50%;
  transform: translateX(-50%);
}

.pos-center-y {
  top: 50%;
  transform: translateY(-50%);
}

/* Edge centers */
.pos-top-center { 
  top: var(--spacing-sm); 
  left: 50%; 
  transform: translateX(-50%); 
}

.pos-bottom-center { 
  bottom: var(--spacing-md); 
  left: 50%; 
  transform: translateX(-50%); 
}

.pos-left-center { 
  left: var(--spacing-sm); 
  top: 50%; 
  transform: translateY(-50%); 
}

.pos-right-center { 
  right: var(--spacing-sm); 
  top: 50%; 
  transform: translateY(-50%); 
}

/* Full coverage */
.pos-full {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pos-full-width {
  left: 0;
  right: 0;
}

.pos-full-height {
  top: 0;
  bottom: 0;
}

/* ============================================================================
   MODAL SYSTEM
   Standardized modal positioning and backdrop
   ============================================================================ */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal-backdrop);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: fadeIn var(--animation-normal) var(--animation-easing);
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal-content);
  max-width: calc(100vw - var(--spacing-lg));
  max-height: calc(100vh - var(--spacing-lg));
  overflow: auto;
  animation: slideIn var(--animation-normal) var(--animation-easing);
}

/* Modal size variants */
.modal-small {
  width: min(400px, calc(100vw - var(--spacing-lg)));
}

.modal-medium {
  width: min(600px, calc(100vw - var(--spacing-lg)));
}

.modal-large {
  width: min(800px, calc(100vw - var(--spacing-lg)));
}

.modal-fullscreen {
  width: calc(100vw - var(--spacing-sm));
  height: calc(100vh - var(--spacing-sm));
  max-width: none;
  max-height: none;
}

/* ============================================================================
   NOTIFICATION SYSTEM
   Standardized notification positioning and stacking
   ============================================================================ */

.notification-container {
  position: fixed;
  z-index: var(--z-notifications);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Notification position variants */
.notification-top-right {
  top: var(--spacing-md);
  right: var(--spacing-md);
}

.notification-top-left {
  top: var(--spacing-md);
  left: var(--spacing-md);
}

.notification-top-center {
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
}

.notification-bottom-right {
  bottom: var(--spacing-md);
  right: var(--spacing-md);
}

.notification-bottom-left {
  bottom: var(--spacing-md);
  left: var(--spacing-md);
}

.notification-bottom-center {
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
}

/* Individual notification */
.notification-item {
  pointer-events: auto;
  animation: slideInRight var(--animation-normal) var(--animation-easing);
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first responsive positioning
   ============================================================================ */

/* Tablet adjustments */
@media (max-width: 1024px) {
  :root {
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.75rem;
    --spacing-xxl: 2.5rem;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  :root {
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-xxl: 2rem;
  }
  
  /* Tighter positioning on mobile */
  .pos-top-left,
  .pos-top-right,
  .pos-top-center {
    top: var(--spacing-xs);
  }
  
  .pos-bottom-left,
  .pos-bottom-right,
  .pos-bottom-center {
    bottom: var(--spacing-sm);
  }
  
  .pos-top-left,
  .pos-bottom-left { 
    left: var(--spacing-xs); 
  }
  
  .pos-top-right,
  .pos-bottom-right { 
    right: var(--spacing-xs); 
  }
  
  /* Mobile notification adjustments */
  .notification-container {
    left: var(--spacing-xs);
    right: var(--spacing-xs);
  }
  
  .notification-top-right,
  .notification-top-left {
    top: var(--spacing-sm);
  }
  
  .notification-bottom-right,
  .notification-bottom-left {
    bottom: var(--spacing-sm);
  }
  
  /* Mobile modal adjustments */
  .modal-content {
    max-width: calc(100vw - var(--spacing-sm));
    max-height: calc(100vh - var(--spacing-sm));
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  :root {
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.375rem;
    --spacing-md: 0.5rem;
  }
  
  /* Minimal spacing on very small screens */
  .modal-fullscreen {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* ============================================================================
   ANIMATION KEYFRAMES
   Smooth, accessible animations
   ============================================================================ */

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

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to { 
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes slideInRight {
  from { 
    opacity: 0;
    transform: translateX(100%);
  }
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================================
   UTILITY CLASSES
   Additional positioning helpers
   ============================================================================ */

/* Spacing utilities */
.m-0 { margin: 0; }
.p-0 { padding: 0; }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   GAME LEADERBOARD OVERLAY
   HTML-based leaderboard with perfect mobile compatibility
   ============================================================================ */

.game-leaderboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modals);
  background: rgba(45, 55, 72, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--animation-normal) var(--animation-easing);
}

.game-leaderboard-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.leaderboard-content {
  background: #2d3748;
  border: 2px solid #4a5568;
  border-radius: 16px;
  padding: var(--spacing-lg);
  width: min(400px, calc(100vw - var(--spacing-lg)));
  max-height: calc(100vh - 80px);
  overflow: auto;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transform: scale(0.9) translateY(20px);
  transition: all var(--animation-normal) var(--animation-easing);
  display: flex;
  flex-direction: column;
}

.game-leaderboard-overlay.visible .leaderboard-content {
  transform: scale(1) translateY(0);
}

.leaderboard-title {
  color: #ffffff;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--spacing-lg) 0;
  letter-spacing: 0.05em;
}

.btn-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all var(--animation-fast) ease;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.scores-container {
  margin-bottom: var(--spacing-lg);
  min-height: 200px;
  flex: 1;
  overflow-y: auto;
}

.empty-scores {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  padding: var(--spacing-xl) 0;
  font-size: 1rem;
}

.score-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(74, 85, 104, 0.5);
  transition: all var(--animation-fast) ease;
}

.score-row:last-child {
  border-bottom: none;
}

.score-row:hover {
  background: rgba(74, 85, 104, 0.3);
  margin: 0 calc(-1 * var(--spacing-sm));
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  border-radius: 8px;
}

.score-rank {
  font-weight: 600;
  font-size: 1rem;
  min-width: 24px;
}

.score-name {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-value {
  font-weight: 600;
  font-size: 1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Rank-specific styling */
.rank-gold {
  color: #fbbf24;
}

.rank-silver {
  color: #d1d5db;
}

.rank-bronze {
  color: #f59e0b;
}

.rank-normal {
  color: #e5e7eb;
}

.leaderboard-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
  margin-top: auto;
}

.btn-play-again {
  background: #16a34a;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: var(--spacing-sm) var(--spacing-xl);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--animation-fast) ease;
  min-height: 44px;
  min-width: 120px;
  letter-spacing: 0.025em;
}

.btn-play-again:hover {
  background: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.btn-play-again:active {
  transform: translateY(0);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .leaderboard-content {
    width: calc(100vw - 60px);
    max-height: calc(100vh - 60px);
    padding: 16px;
    border-radius: 12px;
  }
  
  .leaderboard-title {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }
  
  .scores-container {
    margin-bottom: 16px;
    min-height: 150px;
    max-height: calc(100vh - 200px);
  }
  
  .score-row {
    gap: 8px;
    font-size: 0.9rem;
    padding: 8px 0;
  }
  
  .score-rank {
    min-width: 20px;
    font-size: 0.9rem;
  }
  
  .score-name,
  .score-value {
    font-size: 0.9rem;
  }
  
  .btn-play-again {
    padding: 12px 24px;
    font-size: 0.9rem;
    min-width: 100px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .leaderboard-content {
    width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    padding: 12px;
  }
  
  .leaderboard-title {
    font-size: 1.25rem;
    margin-bottom: 12px;
  }
  
  .scores-container {
    margin-bottom: 12px;
    min-height: 120px;
    max-height: calc(100vh - 160px);
  }
  
  .score-row {
    font-size: 0.85rem;
    padding: 6px 0;
  }
  
  .score-rank {
    min-width: 18px;
    font-size: 0.85rem;
  }
  
  .score-name,
  .score-value {
    font-size: 0.85rem;
  }
  
  .btn-play-again {
    padding: 10px 20px;
    font-size: 0.85rem;
    width: 100%;
  }
}

/* ============================================================================
   COMPONENT-SPECIFIC POSITIONING
   Ready-to-use patterns for common UI components
   ============================================================================ */

/* Game UI overlay patterns */
.game-ui-overlay {
  position: fixed;
  z-index: var(--z-ui-overlay);
  pointer-events: none;
}

.game-ui-overlay > * {
  pointer-events: auto;
}

/* Dashboard positioning */
.dashboard-compact {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: var(--z-ui-overlay);
}

.dashboard-full {
  position: fixed;
  top: var(--spacing-md);
  left: var(--spacing-md);
  right: var(--spacing-md);
  z-index: var(--z-ui-overlay);
  max-width: 400px;
}

/* Jackpot counter positioning */
.jackpot-display {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: var(--z-ui-overlay);
}

/* Leaderboard positioning */
.leaderboard-trigger {
  position: fixed;
  bottom: var(--spacing-md);
  right: var(--spacing-md);
  z-index: var(--z-ui-overlay);
}

/* ============================================================================
   END OF POSITIONING SYSTEM
   
   USAGE EXAMPLES:
   
   <!-- Modal -->
   <div class="modal-backdrop">
     <div class="modal-content modal-medium">
       Content here
     </div>
   </div>
   
   <!-- Notification -->
   <div class="notification-container notification-top-right">
     <div class="notification-item">Notification content</div>
   </div>
   
   <!-- Dashboard -->
   <div class="ui-fixed dashboard-compact">
     Dashboard content
   </div>
   
   CUSTOMIZATION:
   Override CSS custom properties in your own CSS:
   
   :root {
     --z-ui-overlay: 50;  // Custom z-index
     --spacing-md: 2rem;  // Custom spacing
   }
   
   ============================================================================ */