/* =============================================
   CUMULATIVE LAYOUT SHIFT (CLS) FIXES
   Target: CLS < 0.1 for better Core Web Vitals
   ============================================= */

/* ============================================= 
   1. IMAGE DIMENSION RESERVATIONS
   ============================================= */

/* Main logo with explicit dimensions */
.finals-logo,
.finals-logo-mobile {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.finals-logo {
  width: 240px;
  height: 240px;
}

.finals-logo-mobile {
  width: 144px;
  height: 144px;
}

/* Weapon and gadget images */
.weapon-image,
.gadget-image,
.item-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Class icons */
.class-icon {
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
}

/* ============================================= 
   2. DYNAMIC CONTENT SPACE RESERVATION
   ============================================= */

/* Main spin button container */
.main-spin-button,
.spin-button,
.hero-button {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Output container for results */
#output,
.loadout-output {
  min-height: 400px;
  transition: min-height 0.3s ease;
}

/* Selection display areas */
.selection-display,
.class-selector,
.weapon-selector {
  min-height: 60px;
}

/* Slot machine container */
.slot-machine,
.slot-container {
  min-height: 500px;
  position: relative;
}

/* History items */
.history-item {
  min-height: 120px;
}

/* Filter panel */
.filter-panel {
  min-height: 100vh;
  width: 320px;
}

/* ============================================= 
   3. FONT LOADING OPTIMIZATION
   ============================================= */

/* Force all fonts to display immediately with fallbacks */
* {
  font-display: swap !important;
}

/* Fallback font stacks to prevent layout shift */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  font-display: swap;
}

.subTitle-mobile,
.subTitle {
  font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  font-display: swap;
}

/* Prevent FOIT (Flash of Invisible Text) */
@font-face {
  font-family: 'Bebas Neue';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Inter';
  font-display: swap;
  font-style: normal;
  font-weight: 400 800;
}

@font-face {
  font-family: 'Orbitron';
  font-display: swap;
  font-style: normal;
  font-weight: 400 900;
}

/* ============================================= 
   4. SKELETON SCREENS FOR LOADING STATES
   ============================================= */

/* Skeleton loading placeholder */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Loading placeholders for dynamic content */
.loading-placeholder {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================= 
   5. BUTTON AND INTERACTIVE ELEMENT STABILITY
   ============================================= */

/* All buttons should have consistent sizing */
button {
  min-height: 40px;
  padding: 0.5rem 1rem;
  vertical-align: middle;
}

/* Navigation buttons */
.nav-button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon buttons */
.icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Copy buttons */
.copy-button,
.copy-btn {
  min-height: 36px;
  min-width: 80px;
}

/* ============================================= 
   6. LAYOUT CONTAINERS
   ============================================= */

/* Main navigation */
.main-nav {
  min-height: 72px;
  position: sticky;
  top: 0;
}

/* Header section */
.headerSection {
  min-height: 320px;
}

/* Hero section */
.hero {
  min-height: 400px;
}

/* Content sections */
.content-section {
  min-height: 200px;
}

/* Footer */
footer {
  min-height: 120px;
}

/* ============================================= 
   7. MODAL AND OVERLAY STABILITY
   ============================================= */

/* Overlay containers */
.overlay,
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Modal content */
.modal,
.popup {
  position: fixed;
  min-width: 300px;
  min-height: 200px;
}

/* ============================================= 
   8. RESPONSIVE BREAKPOINT STABILITY
   ============================================= */

/* Mobile-specific reservations */
@media (max-width: 768px) {
  .finals-logo-mobile {
    width: 120px;
    height: 120px;
  }
  
  #output {
    min-height: 300px;
  }
  
  .slot-machine {
    min-height: 400px;
  }
  
  .main-nav {
    min-height: 60px;
  }
  
  .headerSection {
    min-height: 250px;
  }
}

/* ============================================= 
   9. ANIMATION PERFORMANCE
   ============================================= */

/* Use transform instead of position changes */
.animated-element {
  will-change: transform;
  transform: translateZ(0);
}

/* Prevent layout thrashing during animations */
.animating * {
  pointer-events: none;
}

/* ============================================= 
   10. LAZY LOADING PLACEHOLDERS
   ============================================= */

/* Images that will lazy load */
img[loading="lazy"] {
  background: rgba(255, 255, 255, 0.05);
  min-height: 100px;
}

/* Content that loads dynamically */
[data-lazy-load] {
  min-height: 200px;
  position: relative;
}

/* ============================================= 
   11. FORM ELEMENT STABILITY
   ============================================= */

/* Input fields */
input,
select,
textarea {
  min-height: 40px;
  padding: 0.5rem;
  font-size: 1rem;
}

/* Checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: auto;
}

/* ============================================= 
   12. TABLE AND GRID STABILITY
   ============================================= */

/* Tables should have fixed layout when possible */
table {
  table-layout: fixed;
  width: 100%;
}

/* Grid containers */
.grid-container {
  display: grid;
  grid-template-rows: minmax(100px, auto);
}

/* ============================================= 
   13. BADGE AND LABEL DIMENSIONS
   ============================================= */

.badge,
.class-badge,
.label {
  min-height: 24px;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ============================================= 
   14. PREVENT SCROLLBAR LAYOUT SHIFT
   ============================================= */

/* Always show scrollbar space */
html {
  overflow-y: scroll;
}

/* Or use scrollbar-gutter for modern browsers */
@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
  }
}