/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: radial-gradient(ellipse at center, #1a0033 0%, #000000 70%);
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

/* Animated background particles */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(2px 2px at 20px 30px, rgba(255,0,255,0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(0,255,255,0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,0,255,0.4), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(0,255,255,0.3), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particleFloat 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-10px) translateX(5px); }
  50% { transform: translateY(-5px) translateX(-5px); }
  75% { transform: translateY(-15px) translateX(3px); }
  100% { transform: translateY(0) translateX(0); }
}

/* Ad Zones - Kompakt dizayn */
.ad-zone {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, rgba(255,20,147,0.05), rgba(138,43,226,0.05));
  border: 1px solid rgba(255,20,147,0.15);
  backdrop-filter: blur(3px);
  position: relative;
  z-index: 10;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.ad-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,20,147,0.1), transparent);
  animation: shimmer 4s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.top-ad {
  height: 60px; /* Kiçiltilmiş */
  margin-bottom: 8px;
}

.bottom-ad {
  height: 60px; /* Kiçiltilmiş */
  margin-top: 8px;
}

/* Header - kompakt */
header {
  text-align: center;
  margin-bottom: 15px;
  flex-shrink: 0;
}

#main-title {
  font-size: 2.5rem;
  font-weight: bold;
  background: linear-gradient(45deg, #ff0080, #8000ff, #0080ff, #00ff80, #ff8000, #ff0080);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: neonPulse 3s ease-in-out infinite;
  position: relative;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
  font-weight: 300;
  letter-spacing: 1px;
}

/* Spinner Container - responsive ölçü */
.spinner-container {
  position: relative;
  width: min(80vw, 280px);
  height: min(80vw, 280px);
  margin-bottom: 15px;
  flex-shrink: 0;
}

/* Controls section */
.controls-section {
  margin: 15px 0;
  text-align: center;
  flex-shrink: 0;
}

/* Spin Button - kiçiltilmiş */
.spin-button {
  background: linear-gradient(135deg, #ff0080, #8000ff, #0080ff, #00ff80);
  background-size: 300% 300%;
  border: none;
  border-radius: 50px;
  padding: 15px 35px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 6px 25px rgba(255, 0, 128, 0.4),
    0 3px 12px rgba(128, 0, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  animation: buttonGlow 3s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* iPhone və telefon optimizasiyaları */
@media (max-height: 800px) {
  header {
    margin-bottom: 10px;
  }
  
  #main-title {
    font-size: 2.2rem;
    margin-bottom: 3px;
  }
  
  .subtitle {
    font-size: 0.8rem;
  }
  
  .spinner-container {
    width: min(70vw, 240px);
    height: min(70vw, 240px);
    margin-bottom: 10px;
  }
  
  .spin-button {
    padding: 12px 30px;
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
  
  .controls-section {
    margin: 10px 0;
  }
  
  .top-ad, .bottom-ad {
    height: 50px;
  }
}

/* iPhone 15 Pro və oxşar */
@media (max-height: 750px) and (max-width: 430px) {
  .container {
    padding: 5px;
  }
  
  header {
    margin-bottom: 8px;
  }
  
  #main-title {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 0.75rem;
  }
  
  .spinner-container {
    width: min(65vw, 200px);
    height: min(65vw, 200px);
    margin-bottom: 8px;
  }
  
  .spin-button {
    padding: 10px 25px;
    font-size: 1rem;
  }
  
  .top-ad, .bottom-ad {
    height: 45px;
    margin: 5px 0;
  }
}

/* Landscape mode - yan çevrilmiş telefon */
@media (orientation: landscape) and (max-height: 500px) {
  body {
    flex-direction: row;
    align-items: center;
  }
  
  .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
  }
  
  header {
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  
  .spinner-container {
    width: min(40vh, 200px);
    height: min(40vh, 200px);
    margin: 0;
  }
  
  .controls-section {
    margin: 0;
  }
  
  .ad-zone {
    position: fixed;
  }
  
  .top-ad {
    top: 0;
    height: 40px;
    margin: 0;
  }
  
  .bottom-ad {
    bottom: 0;
    height: 40px;
    margin: 0;
  }
}

/* Main Container */
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* Header */
header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

#main-title {
  font-size: 3.5rem;
  font-weight: bold;
  background: linear-gradient(45deg, #ff0080, #8000ff, #0080ff, #00ff80, #ff8000, #ff0080);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: neonPulse 3s ease-in-out infinite;
  position: relative;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#main-title::before {
  content: 'Lavbe';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff0080, #8000ff, #0080ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: neonFlicker 0.1s infinite alternate;
  opacity: 0.7;
  z-index: -1;
}

@keyframes neonPulse {
  0%, 100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 20px rgba(255, 0, 128, 0.8)) 
            drop-shadow(0 0 40px rgba(128, 0, 255, 0.6));
  }
  25% {
    background-position: 50% 0%;
    filter: drop-shadow(0 0 25px rgba(0, 128, 255, 0.8)) 
            drop-shadow(0 0 45px rgba(0, 255, 128, 0.6));
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 30px rgba(255, 128, 0, 0.8)) 
            drop-shadow(0 0 50px rgba(255, 0, 128, 0.6));
  }
  75% {
    background-position: 50% 100%;
    filter: drop-shadow(0 0 25px rgba(128, 0, 255, 0.8)) 
            drop-shadow(0 0 45px rgba(0, 128, 255, 0.6));
  }
}

@keyframes neonFlicker {
  0% { opacity: 0.7; transform: translateX(0); }
  50% { opacity: 0.9; transform: translateX(1px); }
  100% { opacity: 0.7; transform: translateX(-1px); }
}

/* Spinner Container - Yan məsafələr minimal */
.spinner-container {
  position: relative;
  width: calc(100vw - 40px); /* Yan tərəfdən 20px məsafə */
  max-width: 400px;
  height: calc(100vw - 40px);
  max-height: 400px;
  margin-bottom: 40px;
  aspect-ratio: 1;
}

/* Spinner Background - Multi-layered disco effect */
.spinner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 0, 128, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0, 255, 255, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(128, 0, 255, 0.3) 0%, transparent 70%);
  animation: backgroundPulse 4s ease-in-out infinite;
  filter: blur(1px);
}

.sparkle-layer {
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  border-radius: 50%;
  background: 
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255, 0, 128, 0.6) 30deg,
      transparent 60deg,
      rgba(0, 255, 255, 0.6) 90deg,
      transparent 120deg,
      rgba(255, 128, 0, 0.6) 150deg,
      transparent 180deg,
      rgba(128, 0, 255, 0.6) 210deg,
      transparent 240deg,
      rgba(0, 128, 255, 0.6) 270deg,
      transparent 300deg,
      rgba(255, 255, 0, 0.6) 330deg,
      transparent 360deg
    );
  animation: sparkleRotate 6s linear infinite;
  opacity: 0.8;
}

/* Add multiple rotating layers */
.sparkle-layer::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  border-radius: 50%;
  background: 
    conic-gradient(
      from 90deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.3) 45deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.3) 135deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.3) 225deg,
      transparent 270deg,
      rgba(255, 255, 255, 0.3) 315deg,
      transparent 360deg
    );
  animation: sparkleRotate 4s linear infinite reverse;
}

.sparkle-layer::after {
  content: '';
  position: absolute;
  top: 25px;
  left: 25px;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  border-radius: 50%;
  background: 
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 0, 255, 0.2) 1px, transparent 1px);
  background-size: 20px 20px, 30px 30px;
  background-position: 0 0, 15px 15px;
  animation: twinkle 2s ease-in-out infinite alternate;
}

@keyframes backgroundPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
    filter: blur(1px) hue-rotate(0deg);
  }
  25% {
    transform: scale(1.05) rotate(90deg);
    opacity: 1;
    filter: blur(0.5px) hue-rotate(90deg);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.9;
    filter: blur(1.5px) hue-rotate(180deg);
  }
  75% {
    transform: scale(1.05) rotate(270deg);
    opacity: 1;
    filter: blur(0.5px) hue-rotate(270deg);
  }
}

@keyframes sparkleRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes twinkle {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.1); }
}

/* Spinner */
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%; /* Container-in 75%-i */
  height: 75%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: 
    linear-gradient(135deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%),
    radial-gradient(circle at 30% 30%, rgba(255, 0, 128, 0.1), transparent),
    radial-gradient(circle at 70% 70%, rgba(0, 255, 255, 0.1), transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    inset 0 0 30px rgba(255, 0, 128, 0.2),
    inset 0 0 60px rgba(0, 255, 255, 0.1),
    0 0 40px rgba(255, 0, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.spinner::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: conic-gradient(
    from 0deg,
    #ff0080, #8000ff, #0080ff, #00ff80, #ff8000, #ff0080
  );
  border-radius: 50%;
  animation: borderRotate 4s linear infinite;
  z-index: -1;
}

.spinner::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 15px 15px;
  border-radius: 50%;
  animation: innerSparkle 3s ease-in-out infinite;
}

@keyframes borderRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes innerSparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.spinner-center {
  width: 8%; /* Spinner-in 8%-i */
  height: 8%;
  min-width: 20px;
  min-height: 20px;
  background: 
    radial-gradient(circle, #ff0080 0%, #8000ff 50%, #0080ff 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 30px rgba(255, 0, 128, 1),
    0 0 60px rgba(128, 0, 255, 0.8),
    inset 0 0 15px rgba(255, 255, 255, 0.3);
  animation: centerPulse 2s ease-in-out infinite;
  position: relative;
  z-index: 10;
}

.spinner-center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, transparent 30%, rgba(255, 0, 128, 0.3) 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: centerGlow 1.5s ease-in-out infinite alternate;
}

@keyframes centerPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 30px rgba(255, 0, 128, 1),
      0 0 60px rgba(128, 0, 255, 0.8),
      inset 0 0 15px rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 
      0 0 40px rgba(255, 0, 128, 1),
      0 0 80px rgba(128, 0, 255, 1),
      inset 0 0 20px rgba(255, 255, 255, 0.5);
  }
}

@keyframes centerGlow {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.spinner.spinning {
  animation: spin 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    filter: blur(0px) brightness(1);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg) scale(1.05);
    filter: blur(1px) brightness(1.2);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
    filter: blur(2px) brightness(1.5);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg) scale(1.05);
    filter: blur(1px) brightness(1.2);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    filter: blur(0px) brightness(1);
  }
}

/* Pose Display - Sadələşdirilmiş və görünən versiya */
.pose-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%; /* Spinner-dən böyük */
  height: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 20;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 0 40px rgba(255, 255, 255, 0.5),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.pose-display.show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  animation: poseReveal 0.8s ease;
}

.pose-display svg {
  width: 100% !important; /* SVG daha böyük */
  height: 100% !important;
  fill: #000 !important; /* SVG-ni qara rəngə çevirir */
  color: #000 !important;
  opacity: 1 !important;
  display: block !important;
}

/* SVG daxilindəki bütün elementlər */
.pose-display svg * {
  fill: #000 !important;
  stroke: #000 !important;
  color: #000 !important;
}

/* Pose display fallback text styling */
.pose-display div {
  color: #000 !important;
  font-size: 3rem !important;
  font-weight: bold !important;
  text-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

@keyframes poseReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(-180deg);
    filter: blur(10px);
  }
  25% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.5) rotate(-90deg);
    filter: blur(5px);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    filter: blur(2px);
  }
  75% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

/* Mövzuya uyğun rəngli fon variantları */
.pose-display.color-1 {
  background: radial-gradient(circle, rgba(255, 182, 193, 0.95), rgba(255, 228, 225, 0.9)) !important;
}

.pose-display.color-2 {
  background: radial-gradient(circle, rgba(221, 160, 221, 0.95), rgba(240, 230, 240, 0.9)) !important;
}

.pose-display.color-3 {
  background: radial-gradient(circle, rgba(173, 216, 230, 0.95), rgba(230, 245, 255, 0.9)) !important;
}

.pose-display.color-4 {
  background: radial-gradient(circle, rgba(255, 218, 185, 0.95), rgba(255, 245, 238, 0.9)) !important;
}

.pose-display.color-5 {
  background: radial-gradient(circle, rgba(255, 255, 224, 0.95), rgba(255, 255, 240, 0.9)) !important;
}

.pose-display.color-6 {
  background: radial-gradient(circle, rgba(230, 230, 250, 0.95), rgba(248, 248, 255, 0.9)) !important;
}

.pose-display.color-7 {
  background: radial-gradient(circle, rgba(255, 240, 245, 0.95), rgba(255, 250, 250, 0.9)) !important;
}

.pose-display.color-8 {
  background: radial-gradient(circle, rgba(240, 248, 255, 0.95), rgba(248, 250, 255, 0.9)) !important;
}

/* Spin Button */
.spin-button {
  background: linear-gradient(135deg, #ff0080, #8000ff, #0080ff, #00ff80);
  background-size: 300% 300%;
  border: none;
  border-radius: 50px;
  padding: 25px 50px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 8px 30px rgba(255, 0, 128, 0.4),
    0 4px 15px rgba(128, 0, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 3px;
  position: relative;
  overflow: hidden;
  animation: buttonGlow 3s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.spin-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.spin-button:hover::before {
  left: 100%;
}

.spin-button::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.1), rgba(128, 0, 255, 0.1));
  border-radius: 50px;
  z-index: -1;
}

@keyframes buttonGlow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 
      0 8px 30px rgba(255, 0, 128, 0.4),
      0 4px 15px rgba(128, 0, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  25% {
    background-position: 50% 0%;
    box-shadow: 
      0 8px 30px rgba(128, 0, 255, 0.4),
      0 4px 15px rgba(0, 128, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 
      0 8px 30px rgba(0, 128, 255, 0.4),
      0 4px 15px rgba(0, 255, 128, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  75% {
    background-position: 50% 100%;
    box-shadow: 
      0 8px 30px rgba(0, 255, 128, 0.4),
      0 4px 15px rgba(255, 128, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

.spin-button:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    0 15px 40px rgba(255, 0, 128, 0.6),
    0 8px 25px rgba(128, 0, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  letter-spacing: 4px;
}

.spin-button:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 
    0 5px 20px rgba(255, 0, 128, 0.8),
    0 2px 10px rgba(128, 0, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.spin-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  animation: none;
  filter: grayscale(0.5);
}

/* Add pulsing effect when spinning */
.spin-button.spinning {
  animation: buttonSpin 1.5s ease-in-out;
  pointer-events: none;
}

@keyframes buttonSpin {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    transform: scale(0.95);
    filter: brightness(1.2);
  }
  50% {
    transform: scale(0.9);
    filter: brightness(1.5);
  }
  75% {
    transform: scale(0.95);
    filter: brightness(1.2);
  }
}

/* Responsive Design - Yeni ölçülər */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  #main-title {
    font-size: 2.8rem;
  }
  
  .spinner-container {
    width: calc(100vw - 30px);
    height: calc(100vw - 30px);
    max-width: 350px;
    max-height: 350px;
  }
  
  .spin-button {
    padding: 20px 35px;
    font-size: 1.4rem;
    letter-spacing: 2px;
  }
  
  .sparkle-layer {
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
  }
}

@media (max-width: 480px) {
  #main-title {
    font-size: 2.2rem;
    letter-spacing: 2px;
  }
  
  .spinner-container {
    width: calc(100vw - 25px);
    height: calc(100vw - 25px);
    max-width: 300px;
    max-height: 300px;
    margin-bottom: 30px;
  }
  
  .spin-button {
    padding: 18px 30px;
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  
  .sparkle-layer {
    top: -15px;
    left: -15px;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
  }
  
  body::before {
    background-size: 150px 75px;
  }
  
  .pose-display div {
    font-size: 2.5rem !important;
  }
}

@media (max-width: 360px) {
  #main-title {
    font-size: 1.8rem;
  }
  
  .spinner-container {
    width: calc(100vw - 20px);
    height: calc(100vw - 20px);
    max-width: 250px;
    max-height: 250px;
  }
  
  .spin-button {
    padding: 15px 25px;
    font-size: 1rem;
  }
  
  .pose-display div {
    font-size: 2rem !important;
  }
}

/* PWA Install Banner */
.pwa-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #ff0080, #8000ff);
  color: white;
  padding: 12px 16px;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  transition: transform 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pwa-banner.hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

.pwa-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
  gap: 12px;
}

.pwa-banner-text {
  flex: 1;
}

.pwa-banner-text h3 {
  font-size: 1rem;
  margin: 0 0 4px 0;
  font-weight: 600;
}

.pwa-banner-text p {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.2;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-install-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pwa-install-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

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

.pwa-dismiss-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1.2rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.pwa-dismiss-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Ensure PWA banner is always visible */
.pwa-banner:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile responsive PWA banner */
@media (max-width: 480px) {
  .pwa-banner {
    padding: 10px 12px;
  }
  
  .pwa-banner-content {
    gap: 8px;
  }
  
  .pwa-banner-text h3 {
    font-size: 0.9rem;
  }
  
  .pwa-banner-text p {
    font-size: 0.8rem;
  }
  
  .pwa-install-button {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .pwa-dismiss-button {
    width: 24px;
    height: 24px;
    font-size: 1rem;
  }
}

/* Subtitle styling */
.subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
  font-weight: 300;
  letter-spacing: 1px;
}

/* Accessibility improvements */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1001;
  border-radius: 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 6px;
}

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

/* Semantic sections */
.spinner-section {
  margin: 20px 0;
}

.controls-section {
  margin: 30px 0;
  text-align: center;
}

/* RTL language support */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .pwa-banner-content {
  flex-direction: row-reverse;
}

[dir="rtl"] .pwa-banner-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] #main-title {
  direction: ltr; /* Keep logo in LTR */
}

/* Offline indicator improvements */
.offline-indicator {
  position: fixed;
  top: 70px; /* Below PWA banner */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.9), rgba(255, 100, 100, 0.9));
  color: white;
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: bold;
  z-index: 999;
  display: none;
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  animation: slideDown 0.5s ease;
}

.offline .offline-indicator {
  display: block;
}

/* Focus indicators */
button:focus,
a:focus {
  outline: 2px solid #ff0080;
  outline-offset: 2px;
  border-radius: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .spinner {
    border: 4px solid #fff;
  }
  
  .spin-button {
    border: 2px solid #fff;
  }
  
  #main-title {
    text-shadow: 2px 2px 0 #000;
  }
  
  .pwa-banner {
    background: #000;
    border-bottom: 2px solid #fff;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .sparkle-layer, .sparkle-layer::before, .sparkle-layer::after {
    animation: none !important;
  }
  
  body::before {
    animation: none !important;
  }
  
  .pwa-banner {
    transition: none;
  }
}

/* Print styles */
@media print {
  .ad-zone,
  .pwa-banner,
  .offline-indicator {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .spin-button {
    border: 2px solid #000 !important;
    background: white !important;
    color: black !important;
  }
}

.ad-zone ins {
  display: block;
  width: 100%;
  height: 100%;
}

.ad-zone iframe {
  max-width: 100%;
  height: auto;
}