body { padding: 0; margin: 0; overflow: hidden }
#unity-container { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0 }
#unity-container.unity-desktop { width: 100vw; height: 100vh; transform: none; left: 0; top: 0 }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: linear-gradient(135deg, #1a472a 0%, #2d5a3f 50%, #1a472a 100%); width: 100%; height: 100%; display: block }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; text-align: center }

/* Cricket Ball Animation */
#unity-logo { 
  width: 120px; 
  height: 120px; 
  margin: 0 auto 30px auto;
  position: relative;
}

.cricket-ball {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 35% 35%, #e74c3c, #c0392b 50%, #922b21 100%);
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  animation: ballSpin 2s linear infinite;
  box-shadow: 
    inset -15px -15px 25px rgba(0,0,0,0.4),
    inset 8px 8px 15px rgba(255,255,255,0.15),
    0 8px 25px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* Full seam around the ball - main curved line */
.cricket-ball::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10%;
  right: -10%;
  height: 20px;
  border: 3px solid transparent;
  border-top-color: #f5f5dc;
  border-radius: 50%;
  transform: translateY(-50%) rotateX(70deg);
}

/* Stitching threads - small dashes along the seam */
.cricket-ball::after {
  content: '';
  position: absolute;
  top: 44%;
  left: 0;
  right: 0;
  height: 12%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 6px,
    #f5f5dc 6px,
    #f5f5dc 9px,
    transparent 9px,
    transparent 15px
  );
}

/* Extra stitch detail - second row */
.stitch-detail {
  position: absolute;
  top: 52%;
  left: 5%;
  right: 5%;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 6px,
    #f5f5dc 6px,
    #f5f5dc 9px,
    transparent 9px,
    transparent 15px
  );
  transform: translateX(4px);
}

@keyframes ballSpin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.05); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Modern Progress Bar */
#unity-progress-bar-empty { 
  width: 200px; 
  height: 8px; 
  margin: 20px auto 15px auto;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

#unity-progress-bar-full { 
  width: 0%; 
  height: 100%; 
  background: linear-gradient(90deg, #f39c12, #e74c3c, #f39c12);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: progressGlow 1.5s ease-in-out infinite;
  transition: width 0.3s ease;
}

@keyframes progressGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Loading Text */
.loading-text {
  color: #fff;
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Decorative stumps */
.stumps-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}

.stump {
  width: 6px;
  height: 40px;
  background: linear-gradient(180deg, #f5deb3, #d2b48c);
  border-radius: 2px;
  animation: stumpBounce 0.6s ease-in-out infinite;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.stump:nth-child(1) { animation-delay: 0s; }
.stump:nth-child(2) { animation-delay: 0.1s; }
.stump:nth-child(3) { animation-delay: 0.2s; }

@keyframes stumpBounce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.8); }
}

/* Bails on stumps */
.bails {
  width: 35px;
  height: 4px;
  background: linear-gradient(90deg, #f5deb3, #d2b48c);
  border-radius: 2px;
  margin: 0 auto -2px auto;
  animation: bailWobble 1s ease-in-out infinite;
}

@keyframes bailWobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px; color: #fff }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }