/* 
 * Fluid & Fun Theme - Figma-inspired mobile design
 * 
 * SECURITY NOTE: This CSS file is ONLY loaded when:
 * 1. theme_customization feature is enabled for the tenant
 * 2. theme_name is explicitly set to 'fluid_fun' in setup
 * 3. All styles are scoped to .fluid-theme class to prevent leaking
 * 
 * This ensures the Fluid & Fun theme ONLY shows when enabled in /setup
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* Scoped CSS variables - only apply when fluid theme is active */
.fluid-theme,
body.fluid-theme,
html.fluid-theme {
  --theme-primary: #ec4899;
  --theme-secondary: #f59e0b;
  --theme-accent: #8b5cf6;
  --theme-background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
  --theme-surface: #ffffff;
  
  /* Figma color palette */
  --font-family-montserrat: 'Montserrat', sans-serif;
  --text-rgb-16-8-11: rgba(16, 8, 11, 1);
  --text-rgb-255-250-252: rgba(255, 250, 252, 1);
  --text-white: rgba(255, 255, 255, 1);
  --text-rgb-88-89-91: rgba(88, 89, 91, 1);
  --fill-yellow: rgba(255, 195, 39, 1);
  --fill-purple: rgba(104, 72, 157, 1);
  --fill-light-purple: rgba(220, 169, 206, 1);
  --border-purple: rgba(152, 77, 146, 1);
}

/* Ensure no white backgrounds interfere */
body.fluid-theme,
html.fluid-theme {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%) !important;
  margin: 0;
  padding: 0;
}

/* Only apply fluid theme styles when fluid-theme class is present */
body.fluid-theme .theme-game-container,
.fluid-theme .theme-game-container {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%) !important;
  color: var(--text-white);
  min-height: 100vh;
  width: 100vw;
  font-family: var(--font-family-montserrat);
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Remove any potential white backgrounds from parent containers */
.theme-game-container,
.theme-game-container * {
  background-color: transparent;
}

/* Override DaisyUI and other framework backgrounds */
body.fluid-theme,
body.fluid-theme #app,
body.fluid-theme main,
body.fluid-theme .container,
body.fluid-theme .max-w-md,
body.fluid-theme .mx-auto,
body.fluid-theme .bg-base-100,
body.fluid-theme [data-theme],
html.fluid-theme,
html.fluid-theme [data-theme] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Force override DaisyUI root styles */
:root.fluid-theme,
[data-theme].fluid-theme,
body.fluid-theme :root,
body.fluid-theme [data-theme] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure the main game page container takes full space */
body.fluid-theme {
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%) !important;
}

/* Override any DaisyUI theme backgrounds specifically */
.fluid-theme .bg-base-100,
.fluid-theme .bg-base-200,
.fluid-theme .bg-base-300,
.fluid-theme .container,
.fluid-theme .max-w-md,
.fluid-theme .mx-auto,
.fluid-theme main {
  background: transparent !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Scope theme components to fluid theme only */
body.fluid-theme .theme-card,
.fluid-theme .theme-card {
  background: var(--theme-surface);
  border: none;
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.fluid-theme .theme-btn-primary,
.fluid-theme .theme-btn-primary {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: white;
  border: none;
  border-radius: 2rem;
  padding: 1.25rem 3rem;
  font-weight: 700;
  font-size: 1.25rem;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.fluid-theme .theme-btn-primary:hover,
.fluid-theme .theme-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
}

/* Fluid layout - show mobile-first interface ONLY when fluid theme is active */
body.fluid-theme .theme-game-container .standard-layout,
.fluid-theme .theme-game-container .standard-layout {
  display: none;
}

body.fluid-theme .theme-game-container .fluid-layout,
.fluid-theme .theme-game-container .fluid-layout {
  display: block;
}

/* Fluid & Fun specific styles */
.hole-info-header {
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.hole-info-dots {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
}

.hole-info-dots:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.hole-info-dot {
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
}

.current-player-section {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  color: white;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.current-player-title {
  font-family: var(--font-family-montserrat);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-rgb-255-250-252);
  margin-bottom: 0.5rem;
  text-transform: none;
  text-decoration: none;
}

.current-player-name {
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 40px;
  color: var(--text-rgb-16-8-11);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  text-decoration: none;
}

.youre-up-text {
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 48px;
  color: var(--text-white);
  margin-bottom: 2rem;
  text-transform: none;
  text-decoration: none;
}

.player-avatar {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: var(--fill-yellow);
  margin: 0 auto 2rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  border: 8px solid var(--fill-yellow);
  animation: avatar-pulse 4s ease-in-out infinite;
}

@keyframes avatar-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  }
}

/* Game page avatar - no border */
.theme-game-container .player-avatar {
  border: none;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Ensure all avatar images fit properly in circles */
.theme-game-container img.w-full.h-full.object-cover.rounded-full,
.fluid-summary-container img.w-full.h-full.object-cover.rounded-full {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Mobile-optimized score input section - Centered */
.score-input-section {
  padding: 0 1rem 1.5rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.input-your-score-text {
  text-align: center;
  font-family: var(--font-family-montserrat);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-rgb-255-250-252);
  margin-bottom: 1.5rem;
  text-transform: none;
  text-decoration: none;
  width: 100%;
}

/* Enhanced styling for input your score text */
div.score-input-section > div.input-your-score-text {
  background-color: transparent;
  border: 0 solid #e5e7eb;
  box-sizing: border-box;
  color: #FFFAFC;
  cursor: grab;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  order: 1;
  padding: 0;
  scrollbar-color: color-mix(in oklch, currentcolor 35%, transparent) transparent;
  tab-size: 4;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  width: 100%;
  height: auto;
  margin: 10px 0 0;
}

/* Current player name styling */
div.current-player-section > div.current-player-name {
  height: 25px;
  margin: 50px 0 0;
}

/* Score input section layout */
div.fluid-layout > div.score-input-section {
  height: 0px;
}

/* Score controls positioning */
div.score-input-section > div.score-controls {
  z-index: 3;
  height: 100px;
  margin: -2rem 0 0;
}

/* Other players section general positioning */
div.fluid-layout > div.other-players-section {
  margin: 0 auto;
}

/* Hole info header styling */
div.fluid-layout > div.hole-info-header {
  background-color: transparent;
  border: 0 solid #e5e7eb;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  justify-content: flex-end;
  margin: 0;
  position: absolute;
  right: 0;
  scrollbar-color: color-mix(in oklch, currentcolor 35%, transparent) transparent;
  tab-size: 4;
  top: 0;
  z-index: 10;
  padding: 15px;
}

/* Next player button styling */
div.mt-8.text-center > button.theme-btn-primary.action-button.svelte-1z1bc4 {
  padding: 10px 25px;
}

/* Other player row styling */
div.other-player-row > div.other-player-avatar {
  height: 60px;
  width: 60px;
}

div.other-player-row > div.other-player-name {
  margin: 0 0px 0 0;
  padding: 0 0 0 10px;
}

.score-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.score-btn {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--text-white);
  border: none;
  color: var(--text-rgb-88-89-91);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  position: relative;
}

.score-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.score-display {
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 56px;
  color: var(--text-rgb-16-8-11);
  min-width: 100px;
  height: 100px;
  width: 100px;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  background: var(--text-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.other-players-section {
  background: rgba(255, 255, 255, 0.1);
  margin: 2rem 1rem 3rem;
  border-radius: 2rem;
  padding: 2rem 1.5rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: calc(100% - 2rem);
  max-width: 400px;
  align-self: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: section-fade-in 1s ease-out 0.5s both;
}

@keyframes section-fade-in {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile-optimized player rows - Center aligned */
.other-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-rgb-255-250-252);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  transition: all 0.2s ease;
}

.other-player-row:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.other-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fill-yellow);
  margin-right: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.other-player-name {
  background-color: transparent;
  border: 0 solid #e5e7eb;
  box-sizing: border-box;
  color: #FFFAFC;
  cursor: pointer;
  flex: 1 1 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  scrollbar-color: color-mix(in oklch, currentcolor 35%, transparent) transparent;
  tab-size: 4;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  padding: 0 0 0 10px;
}

.other-player-score {
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 32px;
  color: var(--text-rgb-88-89-91);
  text-transform: none;
  text-decoration: none;
  background: var(--text-white);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.par-score {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.8);
  min-width: 24px;
  text-align: left;
  flex-shrink: 0;
}

/* Hide standard layout completely when using Fluid & Fun theme */
.standard-layout {
  display: none !important;
}

/* Score background elements matching Figma design */
.score-bg {
  background: var(--fill-purple);
  border-radius: 50%;
  opacity: 0.15;
  position: absolute;
  z-index: -1;
}

.score-circle {
  background: var(--text-white);
  border-radius: 50%;
  opacity: 0.6;
  position: absolute;
  z-index: -1;
}

/* CSS Reset for Fluid theme */
.theme-game-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.theme-game-container img {
  max-width: 100%;
  height: auto;
}

/* Enhanced mobile responsive typography and layout */
@media (max-width: 768px) {
  div.fluid-layout > div.other-players-section {
    width: 70%;
  }
  .current-player-name {
    font-size: 32px;
  }
  
  .youre-up-text {
    font-size: 36px;
  }
  
  .score-display {
    font-size: 48px;
    padding: 0.75rem 1.5rem;
  }

  .theme-game-container {
    padding: 0;
  }
  
  .current-player-section {
    padding: 2rem 1rem 1.5rem;
  }
  
  .player-avatar {
    width: 280px;
    height: 280px;
    margin-bottom: 1.5rem;
  }
  
  .score-btn {
    width: 80px;
    height: 80px;
  }
  
  .other-players-section {
    margin: 1.5rem 1rem 0.5rem;
    padding: 1rem;
  }

  /* Specific mobile styling for enhanced layout */
  div.current-player-section > div.player-avatar {
    height: 320px;
    width: 320px;
  }

  div.current-player-section > div.current-player-name {
    font-size: 32px;
    height: 25px;
    margin-top: 0px;
  }

  div.fluid-layout > div.current-player-section {
    padding: 1.5rem 1rem;
  }

  .game-container div.fluid-layout > div.other-players-section {
    margin: 4rem auto .5rem;
    width: 100%;
    padding: 1rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .current-player-name {
    font-size: 28px;
  }
  
  .youre-up-text {
    font-size: 32px;
  }
  
  .score-display {
    font-size: 42px;
    padding: 0.5rem 1rem;
  }
  
  .player-avatar {
    width: 240px;
    height: 240px;
  }
  
  .score-btn {
    width: 70px;
    height: 70px;
  }
  
  .current-player-section {
    padding: 1.5rem 0.5rem 1rem;
  }
  
  .other-players-section {
    margin: 1rem 0.5rem 0.5rem;
  }
}

@media (max-width: 1440px) {
  .theme-game-container {
    padding: 0 !important;
  }
}



/* Fix the main container to be full height and centered */
.fluid-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: center;
  justify-content: flex-start;
}

/* Mobile-optimized button container - Centered */
.mt-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
}

/* Mobile-optimized score controls - Centered with proper spacing */
.score-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 350px;
  padding: 0 1rem;
}

/* Mobile responsive adjustments for score controls */
@media (max-width: 480px) {
  .score-controls {
    gap: 1.5rem;
    max-width: 320px;
  }
}

/* Clickable player button styling */
.other-player-button {
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 1rem;
  transform: scale(1);
  width: 100%;
  text-align: left;
}

.other-player-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.other-player-button:active {
  transform: scale(0.98);
}

.other-player-button:focus {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* Specific styling for other player elements */
button.other-player-row.other-player-button > div.other-player-name {
  padding: 0 0 0 10px;
}

button.other-player-row.other-player-button > div.other-player-avatar {
  height: 60px;
  width: 60px;
}

/* Ensure footer appears correctly in Fluid theme */
body.fluid-theme footer {
  position: relative !important;
  background: transparent !important;
  margin-top: auto;
  z-index: 1;
}

/* Ensure the overall layout works with footer */
body.fluid-theme .flex.flex-col.min-h-screen {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%) !important;
  min-height: 100vh;
}

/* Ensure main content doesn't interfere with footer */
body.fluid-theme main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Prevent zoom and fix mobile scrolling issues */
body.fluid-theme {
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html.fluid-theme {
  touch-action: manipulation;
  overscroll-behavior: contain;
}

/* Prevent zoom on input focus and double-tap */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  
  * {
    touch-action: manipulation;
  }
  
  div.other-player-row.result-row > div.score-container > span.par-score {
    font-size: 14px;
    letter-spacing: 2px;
    margin-left: 0px;
    margin-right: -95px;
    color: #735E69;
    border-width: 0px;
    border-style: none;
    padding: 2px 5px;
    border-radius: 50px;
    opacity: 100%;
    background-color: #FAE2EC;
  }
}

/* Player opacity styling for active/inactive states */
.other-player-button.active-player {
  opacity: 1;
}

.other-player-button.inactive-player {
  opacity: 0.5;
}

.other-player-button.inactive-player:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* Summary page styling for fluid theme */
.fluid-summary-container {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%) !important;
  color: var(--text-white);
  min-height: 100vh;
  width: 100vw;
  font-family: var(--font-family-montserrat);
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Standard summary layout styling */
.standard-summary-container {
  background: transparent;
}

/* Winner display styling */
.winner-display {
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 32px;
  color: var(--text-rgb-16-8-11);
  text-align: center;
  text-transform: uppercase;
  background: var(--text-white);
  border-radius: 2rem;
  padding: 1rem 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}

/* Result row styling for summary */
.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-rgb-255-250-252);
  width: 90%;
  max-width: 90vw;
  margin: 0 auto;
  transition: all 0.2s ease;
}

.score-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.result-row:first-child {
  background: rgba(255, 195, 39, 0.2);
  border: 2px solid var(--fill-yellow);
  animation: winner-row-pulse 2s ease-in-out infinite 1s;
}

@keyframes winner-row-pulse {
  0%, 100% {
    background: rgba(255, 195, 39, 0.2);
    transform: scale(1);
  }
  50% {
    background: rgba(255, 195, 39, 0.3);
    transform: scale(1.02);
  }
}

.rank-number {
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-white);
  background: var(--fill-yellow);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.rank-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rank-overlay {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--fill-yellow);
  color: var(--text-white);
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 12px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

/* Celebration Animations */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.confetti-star {
  position: absolute;
  width: 20px;
  height: 20px;
  left: var(--start-x, 50%);
  top: var(--start-y, 20%);
  transform: translateX(-50%);
  animation: confetti-fall var(--duration, 4s) var(--delay, 0s) ease-out infinite;
}

.confetti-star:nth-child(odd) {
  animation-name: confetti-fall-left;
}

.confetti-star:nth-child(even) {
  animation-name: confetti-fall-right;
}

.confetti-star:nth-child(3n) {
  animation-name: confetti-fall-center;
}

.confetti-star:nth-child(4n) {
  animation-name: confetti-fall-wide;
}

.confetti-star:nth-child(5n) {
  animation-name: confetti-fall-spin;
}

.confetti-star:nth-child(6n) {
  animation-name: confetti-fall-diagonal-left;
}

.confetti-star:nth-child(7n) {
  animation-name: confetti-fall-diagonal-right;
}

.confetti-star:nth-child(8n) {
  animation-name: confetti-fall-zigzag;
}

.confetti-star:nth-child(9n) {
  animation-name: confetti-fall-spiral;
}

.confetti-star:nth-child(10n) {
  animation-name: confetti-fall-bounce;
}

.confetti-star img {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  animation: star-twinkle 2s ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes confetti-fall-left {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  25% {
    transform: translateX(-30px) translateY(25vh) rotate(90deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-60px) translateY(50vh) rotate(180deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateX(-90px) translateY(75vh) rotate(270deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-120px) translateY(110vh) rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-right {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  25% {
    transform: translateX(30px) translateY(25vh) rotate(-90deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(60px) translateY(50vh) rotate(-180deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateX(90px) translateY(75vh) rotate(-270deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(120px) translateY(110vh) rotate(-360deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-center {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  25% {
    transform: translateX(-20px) translateY(25vh) rotate(45deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-10px) translateY(50vh) rotate(90deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateX(10px) translateY(75vh) rotate(135deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(20px) translateY(110vh) rotate(180deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-wide {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  25% {
    transform: translateX(-100px) translateY(25vh) rotate(120deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(50px) translateY(50vh) rotate(240deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateX(-80px) translateY(75vh) rotate(360deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(100px) translateY(100vh) rotate(480deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-spin {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  20% {
    transform: translateX(-60px) translateY(20vh) rotate(180deg) scale(1);
    opacity: 0.9;
  }
  40% {
    transform: translateX(40px) translateY(40vh) rotate(360deg) scale(0.9);
    opacity: 0.8;
  }
  60% {
    transform: translateX(-40px) translateY(60vh) rotate(540deg) scale(1.1);
    opacity: 0.7;
  }
  80% {
    transform: translateX(60px) translateY(80vh) rotate(720deg) scale(0.9);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-80px) translateY(100vh) rotate(900deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-diagonal-left {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  25% {
    transform: translateX(-120px) translateY(25vh) rotate(45deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-200px) translateY(50vh) rotate(90deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateX(-280px) translateY(75vh) rotate(135deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-350px) translateY(100vh) rotate(180deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-diagonal-right {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  25% {
    transform: translateX(80px) translateY(25vh) rotate(-45deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(160px) translateY(50vh) rotate(-90deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateX(240px) translateY(75vh) rotate(-135deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(320px) translateY(100vh) rotate(-180deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-zigzag {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  20% {
    transform: translateX(-80px) translateY(20vh) rotate(60deg) scale(1);
    opacity: 0.9;
  }
  40% {
    transform: translateX(60px) translateY(40vh) rotate(-60deg) scale(0.9);
    opacity: 0.8;
  }
  60% {
    transform: translateX(-40px) translateY(60vh) rotate(60deg) scale(1.1);
    opacity: 0.7;
  }
  80% {
    transform: translateX(80px) translateY(80vh) rotate(-60deg) scale(0.9);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-60px) translateY(100vh) rotate(0deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-spiral {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  16% {
    transform: translateX(-30px) translateY(16vh) rotate(90deg) scale(1);
    opacity: 0.9;
  }
  32% {
    transform: translateX(20px) translateY(32vh) rotate(180deg) scale(0.9);
    opacity: 0.8;
  }
  48% {
    transform: translateX(-10px) translateY(48vh) rotate(270deg) scale(1.1);
    opacity: 0.7;
  }
  64% {
    transform: translateX(40px) translateY(64vh) rotate(360deg) scale(0.9);
    opacity: 0.6;
  }
  80% {
    transform: translateX(-20px) translateY(80vh) rotate(450deg) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translateX(30px) translateY(100vh) rotate(540deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes confetti-fall-bounce {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  25% {
    transform: translateX(-50%) translateY(25vh) rotate(90deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) translateY(50vh) rotate(180deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateX(-50%) translateY(75vh) rotate(270deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-50%) translateY(110vh) rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

.trophy-drop {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  z-index: 10;
  animation: trophy-drop-bounce 1.5s ease-out 0.5s both;
}

.trophy-drop img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: trophy-light 3s ease-in-out infinite;
}

@keyframes trophy-light {
  0%, 100% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1.3) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
  }
}

@keyframes trophy-drop-bounce {
  0% {
    transform: translateX(-50%) translateY(-180px) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) translateY(30px) scale(1.1);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%) translateY(-15px) scale(0.95);
  }
  85% {
    transform: translateX(-50%) translateY(6px) scale(1.02);
  }
  100% {
    transform: translateX(-50%) translateY(0px) scale(1);
    opacity: 1;
  }
}

.winner-display {
  position: relative;
  animation: winner-glow 3s ease-in-out infinite;
}

@keyframes winner-glow {
  0%, 100% {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1);
  }
  50% {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  }
}

@keyframes title-bounce {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
  50% {
    transform: translateY(10px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes name-slide-in {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes text-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Elaborate entrance animations */
@keyframes player-slide-up {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  60% {
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes winner-grand-entrance {
  0% {
    opacity: 0;
    transform: translateY(-200px) scale(0.5) rotate(-180deg);
  }
  50% {
    opacity: 0.8;
    transform: translateY(20px) scale(1.1) rotate(0deg);
  }
  70% {
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes winner-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.6);
  }
}

@keyframes confetti-burst {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) rotate(360deg) translateY(100vh);
  }
}

@keyframes trophy-grand-drop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-300px) scale(0.3) rotate(-720deg);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) translateY(10px) scale(1.3) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-5px) scale(1.1);
  }
  70% {
    transform: translateX(-50%) translateY(5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Entrance animation classes */
.player-entrance {
  animation: player-slide-up 0.8s ease-out both;
}

.winner-entrance {
  animation: winner-grand-entrance 1.5s ease-out both;
}

.winner-glow {
  animation: winner-glow-pulse 2s ease-in-out infinite;
}

.confetti-burst {
  animation: confetti-burst 2s ease-out both;
}

.trophy-grand {
  animation: trophy-grand-drop 2s ease-out both;
}

/* One-shot confetti burst */
.confetti-burst-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.burst-confetti {
  position: absolute;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  border-radius: 50%;
}

.burst-confetti:nth-child(odd) {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
}

.burst-confetti:nth-child(even) {
  background: linear-gradient(45deg, #48dbfb, #0abde3);
}

.burst-confetti:nth-child(3n) {
  background: linear-gradient(45deg, #ff9ff3, #f368e0);
}

@keyframes burst-explosion {
  0% {
    opacity: 1;
    transform: scale(0) rotate(0deg);
  }
  15% {
    transform: scale(1.5) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(720deg) translateY(100vh) translateX(var(--random-x, 0px));
  }
}

/* Mobile responsive adjustments for summary */
@media (max-width: 768px) {
  .winner-display {
    font-size: 24px;
    padding: 0.75rem 1.5rem;
    min-width: 150px;
  }
  
  .rank-number {
    font-size: 18px;
    width: 35px;
    height: 35px;
  }
  
  .rank-avatar {
    width: 35px;
    height: 35px;
  }
  
  .rank-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .rank-overlay {
    font-size: 10px;
    width: 18px;
    height: 18px;
    bottom: -1px;
    right: -1px;
    z-index: 10;
  }
  
  .result-row {
    padding: 0.75rem 1rem;
  }
  
  .confetti-star {
    width: 16px;
    height: 16px;
  }
  
  .trophy-drop {
    width: 90px;
    height: 90px;
    top: -75px;
  }
  
  .burst-confetti {
    width: 18px;
    height: 18px;
  }
  
  .player-entrance {
    animation-duration: 0.6s;
  }
  
  .winner-entrance {
    animation-duration: 1.2s;
  }
}

/* Registration Page Styling */
.fluid-theme .fluid-registration-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #8B5CF6 0%, #EC4899 100%);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.fluid-theme .registration-form-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.fluid-theme .registration-card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

.fluid-theme .registration-progress {
  margin-bottom: 25px;
  text-align: center;
}

.fluid-theme .progress-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.fluid-theme .progress-bar {
  width: 100%;
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
}

.fluid-theme .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.fluid-theme .fluid-alert {
  background: #FEE2E2;
  color: #DC2626;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid #FECACA;
}

.fluid-theme .registration-step {
  width: 100%;
}

.fluid-theme .step-title {
  font-size: 24px;
  font-weight: bold;
  color: #1F2937;
  margin-bottom: 20px;
  text-align: center;
}

.fluid-theme .fluid-input {
  width: 100%;
  padding: 16px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  font-size: 16px;
  color: #1F2937;
  background: white;
  transition: border-color 0.2s ease;
  margin-bottom: 20px;
}

.fluid-theme .fluid-input:focus {
  outline: none;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.fluid-theme .step-buttons {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 25px;
}

.fluid-theme .fluid-button {
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fluid-theme .fluid-button.primary {
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
  color: white;
}

.fluid-theme .fluid-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.fluid-theme .fluid-button.secondary {
  background: #F3F4F6;
  color: #6B7280;
  border: 2px solid #E5E7EB;
}

.fluid-theme .fluid-button.secondary:hover {
  background: #E5E7EB;
  color: #374151;
}

.fluid-theme .fluid-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.fluid-theme .course-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.fluid-theme .course-card {
  background: #F9FAFB;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fluid-theme .course-card:hover {
  border-color: #8B5CF6;
  background: #F3F4F6;
}

.fluid-theme .course-card.selected {
  border-color: #8B5CF6;
  background: #EDE9FE;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.fluid-theme .course-name {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 8px;
}

.fluid-theme .course-description {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 12px;
}

.fluid-theme .course-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fluid-theme .course-holes,
.fluid-theme .course-par {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.fluid-theme .course-holes {
  background: #E5E7EB;
  color: #374151;
}

.fluid-theme .course-par {
  background: #8B5CF6;
  color: white;
}

.fluid-theme .player-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 20px auto;
  display: block;
  border: 3px solid #8B5CF6;
}

.fluid-theme .full-width {
  width: 100%;
}

.fluid-theme .final-step-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fluid-theme .player-input-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.fluid-theme .remove-player-button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #FEE2E2;
  color: #DC2626;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.fluid-theme .remove-player-button:hover {
  background: #FECACA;
}

.fluid-theme .remove-player-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fluid-theme .add-player-button {
  width: 100%;
  padding: 12px;
  background: #F3F4F6;
  color: #6B7280;
  border: 2px dashed #D1D5DB;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.fluid-theme .add-player-button:hover {
  border-color: #8B5CF6;
  color: #8B5CF6;
  background: #F3F4F6;
}

.fluid-theme .loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.fluid-theme .camera-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  gap: 20px;
}

.fluid-theme .camera-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.fluid-theme .camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.fluid-theme .camera-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid #8B5CF6;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 2;
}

.fluid-theme .camera-switch {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
  font-size: 20px;
}

.fluid-theme .camera-switch:hover {
  background: white;
  transform: scale(1.1);
}

.fluid-theme .camera-switch.switching {
  animation: cameraFlip 0.6s ease-in-out;
}

@keyframes cameraFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg) scale(1.1); }
  100% { transform: rotateY(0deg); }
}

.fluid-theme .camera-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.fluid-theme .camera-button {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fluid-theme .camera-button.primary {
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
  color: white;
}

.fluid-theme .camera-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.fluid-theme .camera-button.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.fluid-theme .camera-button.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile optimizations for registration */
@media (max-width: 768px) {
  .fluid-theme .registration-card {
    margin: 10px;
    padding: 20px;
    border-radius: 16px;
  }
  
  .fluid-theme .step-title {
    font-size: 20px;
  }
  
  .fluid-theme .fluid-input {
    padding: 14px;
    font-size: 16px;
  }
  
  .fluid-theme .fluid-button {
    padding: 14px 20px;
    font-size: 15px;
  }
  
  .fluid-theme .camera-container {
    width: 260px;
    height: 260px;
  }
  
  .fluid-theme .camera-switch {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .fluid-theme .camera-button {
    padding: 10px 20px;
    font-size: 14px;
    min-height: 45px;
  }
}

/* Pregame Page Styling */
.fluid-theme .fluid-pregame-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #8B5CF6 0%, #EC4899 100%);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.fluid-theme .pregame-content {
  background: #F9FAFB;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  min-height: 200px;
  border: 2px solid #E5E7EB;
}

.fluid-theme .pregame-content p {
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

.fluid-theme .pregame-content b {
  color: #1F2937;
  font-weight: 600;
}

/* Standard pregame layout */
.standard-pregame-container {
  background: transparent;
}

/* Mobile pregame optimizations */
@media (max-width: 768px) {
  .fluid-theme .pregame-content {
    padding: 16px;
    min-height: 150px;
  }
}

/* Custom Fluid & Fun display modifications */
/* Hide youre-up-text and current-player-name on registration pages */
.fluid-registration-container div.current-player-section > div.youre-up-text {
  display: none;
}

.fluid-registration-container div.current-player-section > div.current-player-name {
  display: none;
}

/* Show youre-up-text and current-player-name on game pages */
.game-container div.current-player-section > div.youre-up-text {
  display: block;
}

.game-container div.current-player-section > div.current-player-name {
  display: block;
}

/* Conditional player avatar sizing */
/* Game pages: 200px x 200px */
.game-container div.current-player-section > div.player-avatar {
  width: 200px !important;
  height: 200px !important;
}

/* Summary pages: 320px x 320px */
.fluid-summary-container div.current-player-section > div.player-avatar {
  width: 320px !important;
  height: 320px !important;
}

/* Mobile overrides for conditional sizing */
@media (max-width: 768px) {
  .game-container div.current-player-section > div.player-avatar {
    width: 200px !important;
    height: 200px !important;
  }
  
  .fluid-summary-container div.current-player-section > div.player-avatar {
    width: 320px !important;
    height: 320px !important;
  }
}

@media (max-width: 480px) {
  .game-container div.current-player-section > div.player-avatar {
    width: 200px !important;
    height: 200px !important;
  }
  
  .fluid-summary-container div.current-player-section > div.player-avatar {
    width: 320px !important;
    height: 320px !important;
  }
}

/* Additional mobile styling for other-players-section and player rows */
@media (max-width: 768px) {
  div.fluid-layout > div.other-players-section {
    width: 100%;
  }
}

@media (max-width: 768px) {
  div.other-players-section > div.other-player-row.result-row.player-entrance:nth-child(1) {
    width: 100%;
  }
}

@media (max-width: 768px) {
  div.other-players-section > div.other-player-row.result-row.player-entrance:nth-child(2) {
    width: 100%;
  }
}

@media (max-width: 768px) {
  div.other-players-section > div.other-player-row.result-row.player-entrance:nth-child(3) {
    width: 100%;
  }
}

/* Summary page specific mobile styling */
@media (max-width: 768px) {
  .fluid-summary-container div.score-controls > div.winner-display {
    font-size: 24px;
    min-width: 150px;
    padding: .75rem 1.5rem;
    margin-top: -30px;
  }
}

/* Stats Page Styling - Fluid & Fun Theme */
.fluid-stats-container {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%) !important;
  color: var(--text-white);
  min-height: 100vh;
  width: 100vw;
  font-family: var(--font-family-montserrat);
}

.fluid-stats-container .stats-header {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  color: white;
}

.fluid-stats-container .stats-trophy {
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: trophy-bounce 2s ease-in-out infinite;
}

.fluid-stats-container .stats-trophy img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

@keyframes trophy-bounce {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.stats-content {
  padding: 0 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.stat-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.stat-header {
  font-family: var(--font-family-montserrat);
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-main-value {
  font-family: var(--font-family-montserrat);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--text-white);
  margin: 0.5rem 0;
  line-height: 1;
}

.stat-subtitle {
  font-family: var(--font-family-montserrat);
  font-weight: 500;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.25rem;
}

.stat-detail {
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.team-score-card .stat-main-value {
  font-size: 3.5rem;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mvp-avatar {
  width: 80px;
  height: 80px;
  margin: 1rem auto;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.mvp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.achievement-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.achievement-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.achievement-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.achievement-number {
  font-family: var(--font-family-montserrat);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-white);
  margin-bottom: 0.25rem;
}

.achievement-text {
  font-family: var(--font-family-montserrat);
  font-weight: 500;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fun-facts-section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.fun-fact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fun-fact:last-child {
  border-bottom: none;
}

.fact-icon {
  font-size: 1.25rem;
  min-width: 1.5rem;
}

.fact-text {
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

/* Standard stats container */
.standard-stats-container {
  display: block;
}

/* Mobile responsive adjustments for stats */
@media (max-width: 768px) {
  .stats-content {
    padding: 0 0.5rem 2rem;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-main-value {
    font-size: 2rem;
  }
  
  .team-score-card .stat-main-value {
    font-size: 2.5rem;
  }
  
  .achievements-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
  }
  
  .achievement-card {
    padding: 0.75rem;
  }
  
  .achievement-icon {
    font-size: 1.5rem;
  }
  
  .achievement-number {
    font-size: 1.25rem;
  }
  
  .achievement-text {
    font-size: 0.7rem;
  }
  
  .mvp-avatar {
    width: 60px;
    height: 60px;
  }
}

/* Sunray animation for summary page winner avatar */
.fluid-summary-container .fluid-layout .current-player-section .player-avatar {
  position: relative;
  z-index: 10;
  overflow: visible;
}

.fluid-summary-container .fluid-layout .current-player-section .player-avatar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg 11.25deg,
    rgba(255, 255, 255, 0.1) 11.25deg 22.5deg,
    transparent 22.5deg 33.75deg,
    rgba(255, 255, 255, 0.1) 33.75deg 45deg,
    transparent 45deg 56.25deg,
    rgba(255, 255, 255, 0.1) 56.25deg 67.5deg,
    transparent 67.5deg 78.75deg,
    rgba(255, 255, 255, 0.1) 78.75deg 90deg,
    transparent 90deg 101.25deg,
    rgba(255, 255, 255, 0.1) 101.25deg 112.5deg,
    transparent 112.5deg 123.75deg,
    rgba(255, 255, 255, 0.1) 123.75deg 135deg,
    transparent 135deg 146.25deg,
    rgba(255, 255, 255, 0.1) 146.25deg 157.5deg,
    transparent 157.5deg 168.75deg,
    rgba(255, 255, 255, 0.1) 168.75deg 180deg,
    transparent 180deg 191.25deg,
    rgba(255, 255, 255, 0.1) 191.25deg 202.5deg,
    transparent 202.5deg 213.75deg,
    rgba(255, 255, 255, 0.1) 213.75deg 225deg,
    transparent 225deg 236.25deg,
    rgba(255, 255, 255, 0.1) 236.25deg 247.5deg,
    transparent 247.5deg 258.75deg,
    rgba(255, 255, 255, 0.1) 258.75deg 270deg,
    transparent 270deg 281.25deg,
    rgba(255, 255, 255, 0.1) 281.25deg 292.5deg,
    transparent 292.5deg 303.75deg,
    rgba(255, 255, 255, 0.1) 303.75deg 315deg,
    transparent 315deg 326.25deg,
    rgba(255, 255, 255, 0.1) 326.25deg 337.5deg,
    transparent 337.5deg 348.75deg,
    rgba(255, 255, 255, 0.1) 348.75deg 360deg
);

/* Add this mask for feathered edges */
mask: radial-gradient(
  circle at center,
  black 20%,
  black 0%,
  transparent 90%
);
-webkit-mask: radial-gradient(
  circle at center,
  black 20%,
  black 0%,
  transparent 90%
);

  border-radius: 50%;
  z-index: -10;
  animation: sunray-rotate 12s linear infinite;
}

/* Ensure avatar image stays on top */
.fluid-summary-container .fluid-layout .current-player-section .player-avatar img {
  position: relative;
  z-index: 5;
}

@keyframes sunray-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

div.registration-progress > div.progress-text {
  display: none;
}

div.registration-form-container > div.registration-card {
  padding: 0px 30px 30px;
}

div.registration-progress > div.progress-bar {
  display: none;
}

/* Registration card transition animations */
.fluid-theme .registration-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.fluid-theme .card-exit-right {
  animation: slideOutRight 0.4s ease-in-out forwards;
}

.fluid-theme .card-enter-left {
  animation: slideInLeft 0.4s ease-in-out forwards;
}

.fluid-theme .card-exit-left {
  animation: slideOutLeft 0.4s ease-in-out forwards;
}

.fluid-theme .card-enter-right {
  animation: slideInRight 0.4s ease-in-out forwards;
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

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

/* Container for smooth transitions */
.fluid-theme .registration-form-container {
  position: relative;
  overflow: hidden;
}

/* Stacked card positioning for transitions */
.fluid-theme .registration-card.transitioning {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
}