/* Define podium variables */
:root {
    --podium-color-1-medal: #e1b400;
    --podium-color-1-medal-light: #fff5cc;
    --podium-color-1-medal-dark: #b8860b;
    --podium-color-1-medal-border: #a57c00;
    --podium-color-2-medal: #c0c0c0;
    --podium-color-2-medal-light: #f0f0f0;
    --podium-color-2-medal-dark: #a0a0a0;
    --podium-color-2-medal-border: #909090;
    --podium-color-3-medal: #b08d57;
    --podium-color-3-medal-light: #f0e0d0;
    --podium-color-3-medal-dark: #8c6f48;
    --podium-color-3-medal-border: #7a5e3b;
    --podium-number-color: rgba(0, 0, 0, 0.6);
    --podium-number-color-1: rgba(100, 70, 0, 0.7);
    --podium-number-color-2: rgba(60, 60, 60, 0.7);
    --podium-number-color-3: rgba(80, 50, 20, 0.7);
    --podium-width: 50px;
    --podium-depth: 30px;
    --podium1-height: 100px;
    --podium2-height: 75px;
    --podium3-height: 55px;
    --podium-spacing: 0px;
    --podium-border: rgba(0, 0, 0, 0.1);
    --podium-color-1: #ffd700;
    --podium-color-2: #c0c0c0;
    --podium-color-3: #cd7f32;
    --podium-border: rgba(0,0,0,0.2);
}


body.dark-theme {
--podium-color-1: #b08d57;
--podium-color-2: #a8a8a8;
--podium-color-3: #8c5e1a;
--podium-border: rgba(255,255,255,0.1);
--podium-color-1-medal-dark: #ffd700;
--podium-color-2-medal-dark: #d8d8d8;
--podium-color-3-medal-dark: #d29a61;
--podium-number-color-dark: rgba(255, 255, 255, 0.7);
}
  
  .podium-divider-container {
    width: 200px;
    height: 160px; 
    position: relative;
    margin: 2.5rem auto;
    perspective: 1000px;
    transform-style: preserve-3d;
    animation-name: spin-podium;
    animation-duration: 10s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite;
    transform: rotateX(5deg);
  }
  
  .podium-step {
      position: absolute;
      bottom: 0; 
      width: var(--podium-width);
      transform-style: preserve-3d; 
  }
  
  .podium-step.first {
      left: calc(50% - var(--podium-width) / 2);
      z-index: 3;
      height: var(--podium1-height);
      transform-style: preserve-3d;
      transform: translateY(-30px);
      bottom: 20px;
  }

  .podium-step.second {
      left: calc(50% - var(--podium-width) * 1.5);
      z-index: 2;
      height: var(--podium2-height);
      transform-style: preserve-3d;
      transform: translateY(-30px);
      bottom: 20px;
  }

  .podium-step.third {
      right: calc(50% - var(--podium-width) * 1.5);
      z-index: 1;
      height: var(--podium3-height);
      transform-style: preserve-3d;
      transform: translateY(-30px);
      bottom: 20px;
  }.podium-step .face.front::before {
    content: ""; 
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
      width: calc(var(--podium-width) * 0.65); 
      height: calc(var(--podium-width) * 0.65); 
      border-radius: 50%; 
      z-index: 2; 
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 
                  inset 0 1px 2px rgba(255, 255, 255, 0.3), 
                  inset 0 -1px 2px rgba(0, 0, 0, 0.2); 
      display: block; 
  }
  
  .podium-step.first .face.front::before {
    background: radial-gradient(ellipse at center,
        var(--podium-color-1-medal-light, #fff5cc) 0%,
        var(--podium-color-1-medal, #e1b400) 60%,
        var(--podium-color-1-medal-dark, #b8860b) 100%);
    border: 1px solid var(--podium-color-1-medal-border, #a57c00);
  }
  
  .podium-step.second .face.front::before {
     background: radial-gradient(ellipse at center,
        var(--podium-color-2-medal-light, #f0f0f0) 0%,
        var(--podium-color-2-medal, #c0c0c0) 60%,
        var(--podium-color-2-medal-dark, #a0a0a0) 100%);
     border: 1px solid var(--podium-color-2-medal-border, #909090);
  }
  
  .podium-step.third .face.front::before {
     background: radial-gradient(ellipse at center,
        var(--podium-color-3-medal-light, #f0e0d0) 0%,
        var(--podium-color-3-medal, #b08d57) 60%,
        var(--podium-color-3-medal-dark, #8c6f48) 100%);
     border: 1px solid var(--podium-color-3-medal-border, #7a5e3b);
  }
  
  .podium-step .face.front::after {
    font-family: "Montserrat", sans-serif; 
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; 
    font-size: calc(var(--podium-width) * 0.35); 
    color: var(--podium-number-color, rgba(0, 0, 0, 0.6)); 
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); 
    display: block;
    line-height: 1; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .podium-step.first .face.front::after {
    content: "1";
    color: var(--podium-number-color-1, rgba(100, 70, 0, 0.7)); 
  }
  
  .podium-step.second .face.front::after {
    content: "2";
     color: var(--podium-number-color-2, rgba(60, 60, 60, 0.7)); 
  }
  
  .podium-step.third .face.front::after {
    content: "3";
     color: var(--podium-number-color-3, rgba(80, 50, 20, 0.7)); 
  }

  .podium-step.first .face { background-color: var(--podium-color-1); }
  .podium-step.second .face { background-color: var(--podium-color-2); }
  .podium-step.third .face { background-color: var(--podium-color-3); }
  
  .podium-step.first .face.front,
  .podium-step.first .face.back {
      width: var(--podium-width); height: var(--podium1-height);
      margin-left: calc(var(--podium-width) / -2);
      margin-top: calc(var(--podium1-height) / -2);
  }
  .podium-step.first .face.left,
  .podium-step.first .face.right {
      width: var(--podium-depth); height: var(--podium1-height);
      margin-left: calc(var(--podium-depth) / -2);
      margin-top: calc(var(--podium1-height) / -2);
  }
  .podium-step.first .face.top,
  .podium-step.first .face.bottom {
      width: var(--podium-width); height: var(--podium-depth);
      margin-left: calc(var(--podium-width) / -2);
      margin-top: calc(var(--podium-depth) / -2);
  }

  .podium-step.second .face.front,
  .podium-step.second .face.back {
      width: var(--podium-width); height: var(--podium2-height);
      margin-left: calc(var(--podium-width) / -2);
      margin-top: calc(var(--podium2-height) / -2);
  }
  .podium-step.second .face.left,
  .podium-step.second .face.right {
      width: var(--podium-depth); height: var(--podium2-height);
      margin-left: calc(var(--podium-depth) / -2);
      margin-top: calc(var(--podium2-height) / -2);
  }
  .podium-step.second .face.top,
  .podium-step.second .face.bottom {
      width: var(--podium-width); height: var(--podium-depth);
      margin-left: calc(var(--podium-width) / -2);
      margin-top: calc(var(--podium-depth) / -2);
  }

  .podium-step.third .face.front,
  .podium-step.third .face.back {
      width: var(--podium-width); height: var(--podium3-height);
      margin-left: calc(var(--podium-width) / -2);
      margin-top: calc(var(--podium3-height) / -2);
  }
  .podium-step.third .face.left,
  .podium-step.third .face.right {
      width: var(--podium-depth); height: var(--podium3-height);
      margin-left: calc(var(--podium-depth) / -2);
      margin-top: calc(var(--podium3-height) / -2);
  }
  .podium-step.third .face.top,
  .podium-step.third .face.bottom {
      width: var(--podium-width); height: var(--podium-depth);
      margin-left: calc(var(--podium-width) / -2);
      margin-top: calc(var(--podium-depth) / -2);
  }
  
  .podium-step.first .face.front  { transform: translateZ(calc(var(--podium-depth) / 2)); }
  .podium-step.first .face.back   { transform: rotateY(180deg) translateZ(calc(var(--podium-depth) / 2)); }
  .podium-step.first .face.left   { transform: rotateY(-90deg) translateZ(calc(var(--podium-width) / 2)); }
  .podium-step.first .face.right  { transform: rotateY(90deg) translateZ(calc(var(--podium-width) / 2)); }
  .podium-step.first .face.top    { transform: rotateX(90deg) translateZ(calc(var(--podium1-height) / 2)); }
  .podium-step.first .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--podium1-height) / 2)); }
  
  
  .podium-step.second .face.front,
  .podium-step.second .face.back {
      width: var(--podium-width); height: var(--podium2-height);
      margin-left: calc(var(--podium-width) / -2); margin-top: calc(var(--podium2-height) / -2);
  }
  .podium-step.second .face.left,
  .podium-step.second .face.right {
      width: var(--podium-depth); height: calc(var(--podium-size) * 1.3);
      margin-left: calc(var(--podium-depth) / -2); margin-top: calc(var(--podium2-height) / -2);
  }
  .podium-step.second .face.top,
  .podium-step.second .face.bottom {
      width: var(--podium-width); height: var(--podium-depth);
      margin-left: calc(var(--podium-width) / -2); margin-top: calc(var(--podium-depth) / -2);
  }
  
  .podium-step.second .face.front  { transform: translateZ(calc(var(--podium-depth) / 2)); }
  .podium-step.second .face.back   { transform: rotateY(180deg) translateZ(calc(var(--podium-depth) / 2)); }
  .podium-step.second .face.left   { transform: rotateY(-90deg) translateZ(calc(var(--podium-width) / 2)); }
  .podium-step.second .face.right  { transform: rotateY(90deg) translateZ(calc(var(--podium-width) / 2)); }
  .podium-step.second .face.top    { transform: rotateX(90deg) translateZ(calc(var(--podium2-height) / 2)); }
  .podium-step.second .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--podium2-height) / 2)); }
  
  .podium-step.third .face.front,
  .podium-step.third .face.back {
      width: var(--podium-width); height: var(--podium3-height);
      margin-left: calc(var(--podium-width) / -2); margin-top: calc(var(--podium3-height) / -2);
  }
  .podium-step.third .face.left,
  .podium-step.third .face.right {
      width: var(--podium-depth); height: var(--podium3-height);
      margin-left: calc(var(--podium-depth) / -2); margin-top: calc(var(--podium3-height) / -2);
  }
  .podium-step.third .face.top,
  .podium-step.third .face.bottom {
      width: var(--podium-width); height: var(--podium-depth);
      margin-left: calc(var(--podium-width) / -2); margin-top: calc(var(--podium-depth) / -2);
  }
  
  .podium-step.third .face.front  { transform: translateZ(calc(var(--podium-depth) / 2)); }
  .podium-step.third .face.back   { transform: rotateY(180deg) translateZ(calc(var(--podium-depth) / 2)); }
  .podium-step.third .face.left   { transform: rotateY(-90deg) translateZ(calc(var(--podium-width) / 2)); }
  .podium-step.third .face.right  { transform: rotateY(90deg) translateZ(calc(var(--podium-width) / 2)); }
  .podium-step.third .face.top    { transform: rotateX(90deg) translateZ(calc(var(--podium3-height) / 2)); }
  .podium-step.third .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--podium3-height) / 2)); }
  
  

/* Podium face transformations */
.podium-step .face {
    position: absolute;
    transform-style: preserve-3d;
}

.podium-step .face.front  { 
    transform: rotateY(0deg) translateZ(calc(var(--podium-depth) / 2));
}
.podium-step .face.back   { 
    transform: rotateY(180deg) translateZ(calc(var(--podium-depth) / 2));
}
.podium-step .face.right  { 
    transform: rotateY(90deg) translateZ(calc(var(--podium-width) / 2));
}
.podium-step .face.left   { 
    transform: rotateY(-90deg) translateZ(calc(var(--podium-width) / 2));
}
.podium-step .face.top    { 
    transform: rotateX(90deg) translateZ(calc(var(--podium-height) / 2));
}
.podium-step .face.bottom { 
    transform: rotateX(-90deg) translateZ(calc(var(--podium-height) / 2));
}

/* Specific adjustments for second podium */
.podium-step.second .face.left,
.podium-step.second .face.right {
    height: var(--podium2-height);
    transform-origin: center;
}

.podium-step.second .face.left {
    transform: rotateY(-90deg) translateZ(calc(var(--podium-width) / 2));
    backface-visibility: visible;
}


  @keyframes spin-podium {
    0% {
      transform: rotateY(0deg) rotateX(-10deg);
  }
  25% {
      transform: rotateY(-35deg) rotateX(-10deg);
  }
  50% {
       transform: rotateY(0deg) rotateX(-10deg);
  }
  75% {
      transform: rotateY(35deg) rotateX(-10deg);
  }
  100% {
      transform: rotateY(0deg) rotateX(-10deg);
  }
  }
  /* --- End Podium 3D Cuboid Animation --- */