/* CSS Variables */
:root {
    --moderate-pink: #d652ae;
    --dark: #1a1a1a;
    --semi-gray: #666666;
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 992px;
    --bp-414: 414px;
  }
  
  .slot-machine-container {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  /* Slot Machine Styles */
  .sincam-slot {
    --spin-height: 2.75rem;
    --spin-items-gap: 0.25rem;
    --spin-padding: 4px;
    --spin-radius: 8px;
    --spin-slot-count: 3;
    --spin-width: 4.625rem;
  
    position: relative;
    width: var(--spin-width);
    height: var(--spin-height);
    margin: 0 auto;
  
    border-radius: var(--spin-radius);
    animation-name: slotBgAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  
    @media (min-width: 992px) {
      --spin-height: 3.375rem;
      --spin-width: 5.625rem;
    }
  }
  
  .sincam-slot__content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--spin-padding);
    overflow: hidden;
    gap: var(--spin-items-gap);
    background: var(--dark);
    background-clip: padding-box;
    border: var(--spin-padding) transparent solid;
    border-radius: var(--spin-radius);
    cursor: pointer;
  }
  
  .sincam-slot__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.01) 36%,
      rgba(0, 0, 0, 0.01) 64%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
  
  .sincam-slot__item {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: calc(
      (
          var(--spin-width) - 4 * var(--spin-padding) - (var(--spin-slot-count) - 1) *
            var(--spin-items-gap)
        ) / var(--spin-slot-count) - 6px
    );
    line-height: 1;
    text-align: center;
    border: 1px solid var(--semi-gray);
  }
  
  .sincam-slot__items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    transition: transform 0.1s ease-out;
  }
  
  /* Slot Background Animation */
  @keyframes slotBgAnimation {
    0%, 100% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 20%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    5%, 95% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 25%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    10%, 90% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 30%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    15%, 85% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 35%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    20%, 80% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 40%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    25%, 75% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 45%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    30%, 70% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 50%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    35%, 65% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 55%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    40%, 60% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 60%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    45%, 55% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 65%,
        rgba(135, 117, 56, 1) 100%
      );
    }
    50% {
      background: linear-gradient(
        194deg,
        rgba(135, 117, 56, 1) 0%,
        rgba(231, 220, 176, 1) 70%,
        rgba(135, 117, 56, 1) 100%
      );
    }
  }
  
  /* Tooltip Styles */
  .sincam-controls-slot__tooltip {
    position: absolute;
    bottom: calc(100% + 0.1rem);
    left: -0.5rem;
    z-index: 3;
    width: max-content;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    line-height: 2;
    text-align: center;
    background: rgba(60, 60, 60, 0.85);
    border-radius: 3px;
    white-space: nowrap;
    color: #fff;
  }
  
  @media (min-width: 992px) {
    .sincam-controls-slot__tooltip {
      top: unset;
      bottom: calc(100% + 0.05rem);
      left: 50%;
      transform: translate(-50%, 0);
      white-space: normal;
      border-radius: 7px;
    }
  }
  
  /* Modal Styles */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .sincam-slot-modal {
    --sincam-slot-modal-width: 32.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: var(--sincam-slot-modal-width);
    padding: 1.685rem 1.75rem;
    gap: 1.125rem;
    color: #ffffff;
    border: 2px solid var(--moderate-pink);
    border-radius: 1.5rem;
    box-shadow: 0 0.25rem 0.75rem 0 #00000099;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIwIiBoZWlnaHQ9IjE5OCIgdmlld0JveD0iMCAwIDUyMCAxOTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuMSI+CjxwYXRoIGQ9Ik02NDAuMjAxIDY2Mi42NzVDNjMyLjU0MSA1ODkuNjYyIDYxMi41NjYgNTE4LjQxMyA1ODEuMDk2IDQ1MS44NTVDNTUxLjQ4NSAzODguNTYyIDUxMy43MzcgMzI5LjI2NyA0NjguNzc3IDI3NS40MjRDNDU1Ljg1MyAyNTkuOTEyIDQ0Mi43NCAyNDUuMTQ3IDQzNi4wODggMjM4LjA0NUw0MjAuNTA0IDIyMS40MTFDNDE2LjcwMyAyMTcuMTEyIDQxMy42NjIgMjEzLjc0OCA0MTAuNDMxIDIxMC41NzFMNDA1Ljg3IDIwNi4wODVDNDAwLjczOSAyMDEuMDM5IDM5NS40MTcgMTk1LjgwNiAzOTEuMDQ2IDE5MC41NzNWMTg5LjI2NUwzODQuMDE0IDE4Mi4xNjNDMzgwLjM2IDE3OC43MDQgMzc2LjkzMiAxNzUuMDIxIDM3My43NTIgMTcxLjEzNkwzNzIuNDIxIDE2OS42NEMzNDguNjY1IDE0NC4wMzUgMzI4LjkgMTIwLjg2IDMxMS42MDUgOTguNjE5NEMyOTQuMTU5IDc2LjUyMzggMjc4LjY0NiA1My4wMTU0IDI2NS4yMzMgMjguMzQ2QzI1MS4xMjcgMS40NjIwNyAyNDAuODkzIC0yNy4yMjEzIDIzNC44MjUgLTU2Ljg3OTJDMjI4LjE2NyAtODguMzcxMSAyMjQuNTQgLTEyMC40MSAyMjMuOTkyIC0xNTIuNTcxQzIyMy4zNzQgLTE4MS41NzMgMjI0LjM4OSAtMjEwLjU4NiAyMjcuMDMzIC0yMzkuNDc4QzIyOC41NTQgLTI1Ni4yOTkgMjMwLjA3NCAtMjcxLjI1IDIzMS43ODQgLTI4NC4zMzNDMjMyLjM2MSAtMjg5LjM4NyAyMzEuNjk1IC0yOTQuNTAzIDIyOS44NDMgLTI5OS4yNTFDMjI3Ljk5MSAtMzA0IDIyNS4wMDcgLTMwOC4yNDEgMjIxLjE0MiAtMzExLjYyQzIxNy4yNDEgLTMxNC45NTggMjEyLjU3MyAtMzE3LjMxNSAyMDcuNTQxIC0zMTguNDg3QzIwMi41MDkgLTMxOS42NTkgMTk3LjI2MyAtMzE5LjYxMSAxOTIuMjU0IC0zMTguMzQ4QzE3Ni42MDMgLTMxNC4yMjMgMTYxLjI0IC0zMDkuMTA0IDE0Ni4yNjIgLTMwMy4wMjNDMTEyLjM1IC0yODkuMzYyIDgwLjQwMjggLTI3MS4zOTIgNTEuMjM3MSAtMjQ5LjU3QzExLjg2MzYgLTIxOS45MTIgLTIyLjIzNzUgLTE4NC4wNCAtNDkuNjc5MyAtMTQzLjQxM0MtODQuNzg5MiAtOTEuMzY5MyAtMTA4LjgzNyAtMzIuODgyNCAtMTIwLjM3OCAyOC41MzI5Qy0xMzMuNTgyIDk5LjkxNDIgLTEzMi4yMjUgMTczLjE2NCAtMTE2LjM4NyAyNDQuMDI2Qy0xMDAuMDk1IDMxNi44MTYgLTcxLjMwMTggMzg2LjM0MSAtMzEuMjQ0NyA0NDkuNjEzQy0xMi42ODE5IDQ3OS40ODEgOC4wODk2OCA1MDcuOTY2IDMwLjkwMTYgNTM0LjgzOEMzNi45ODMyIDU0Mi4zMTQgNTMuNzA3NyA1NjEuMzc3IDUzLjg5NzggNTYxLjU2NEw2MC41NDk0IDU2OS4wNEM2NS4zMDA2IDU3NC4yNzMgNjguNTMxNiA1NzguMTk4IDcxLjk1MjUgNTgyLjEyM0M3NS4zNzM0IDU4Ni4wNDggNzcuNjUzOSA1ODguODUxIDgwLjUwNDcgNTkxLjg0MUMxMTIuMjQzIDYyOS4yMjEgMTM0LjQ3OSA2NTYuNTA4IDE1Mi45MTQgNjgwLjgwNUMxNzEuMzQ4IDcwNS4xMDEgMTkwLjkyNCA3MzMuMzIzIDIwNy44MzggNzU5Ljg2MkMyMjMuNTIxIDc4NC40NDIgMjM2LjY5OSA4MTAuNDg1IDI0Ny4xNzggODM3LjYxMUMyNTguMTIgODY2Ljc5NSAyNjUuMDg2IDg5Ny4yNzUgMjY3Ljg5NCA5MjguMjU2QzI3MC44NiA5NjAuMzk5IDI3MC44NiA5OTIuNzQgMjY3Ljg5NCAxMDI0Ljg4QzI2NS4wNDMgMTA1OC4xNSAyNTkuNzIyIDEwODguNjEgMjU1LjU0MSAxMTEwLjg2QzI1Mi41IDExMjYuMTggMjQ5LjQ1OSAxMTQwLjIgMjQ2LjYwOCAxMTUyLjM1QzI0NS42NDYgMTE1Ni44NyAyNDUuNzIzIDExNjEuNTUgMjQ2LjgzNSAxMTY2LjA0QzI0Ny45NDYgMTE3MC41MyAyNTAuMDY0IDExNzQuNzIgMjUzLjAzMyAxMTc4LjNDMjU2LjAwMiAxMTgxLjg4IDI1OS43NDcgMTE4NC43NyAyNjMuOTk1IDExODYuNzVDMjY4LjI0MyAxMTg4LjcyIDI3Mi44ODcgMTE4OS43NCAyNzcuNTg2IDExODkuNzNIMjgzLjY2OEMyOTguMzczIDExODYuOTYgMzEyLjg1NCAxMTgzLjE1IDMyNi45OTkgMTE3OC4zMkMzNjEuMjQgMTE2Ny4zMiAzOTMuODg0IDExNTEuOTkgNDI0LjExNSAxMTMyLjcyQzQ2NS40NTYgMTEwNi43NyA1MDIuMTgyIDEwNzQuMzIgNTMyLjgyMyAxMDM2LjY2QzU3MS45MzQgOTg4LjcyNyA2MDEuMjkyIDkzMy44MzkgNjE5LjI5NiA4NzQuOTkxQzY0MC40MjcgODA2LjI2NiA2NDcuNTMyIDczNC4xMTEgNjQwLjIwMSA2NjIuNjc1WiIgZmlsbD0iI0ZCNTFDNyIvPgo8L2c+Cjwvc3ZnPgo='), linear-gradient(to bottom, #3a0e5c 0%, #3926af 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  @media (min-width: 576px) {
    .sincam-slot-modal {
      width: var(--sincam-slot-modal-width);
    }
  }
  
  .sincam-slot-modal__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  
  .sincam-slot-modal__coin {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 61px;
    padding: 0.5125rem;
    gap: 0.5rem;
    background: #d652ae66;
    border-radius: 360px;
    font-size: 1.5rem;
    font-weight: 700;
    transform: translate(0, -50%);
  }
  
  .sincam-slot-modal__coin svg {
    fill: none;
    width: 14px;
    height: 17px;
  }
  
  @media (min-width: 576px) {
    .sincam-slot-modal__coin {
      width: 90px;
      font-size: 1.75rem;
    }
    
    .sincam-slot-modal__coin svg {
      width: 20px;
      height: 23px;
    }
  }
  
  .sincam-slot-modal__title {
    padding-left: 4rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.27;
    color: #ffffff;
  }
  
  @media (min-width: 414px) {
    .sincam-slot-modal__title {
      padding-left: 0;
    }
  }
  
  @media (min-width: 768px) {
    .sincam-slot-modal__title {
      font-size: 2rem;
    }
  }
  
  .sincam-slot-modal__text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.49;
    text-align: center;
    white-space: normal;
  }
  
  .sincam-slot-modal__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
  }
  
  .sincam-slot-modal__action {
    padding-left: 3.25rem;
    padding-right: 3.25rem;
  }
  
  /* Responsive adjustments */
  @media (max-width: 575px) {    
    .sincam-slot-modal {
      margin: 1rem;
      padding: 1.5rem 1.25rem;
    }
  }