* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
  }
  .background {
    position: relative;
    width: 600px;
    height: 100vh;
    overflow: hidden;
  }
  .background img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .main-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100vh;
    opacity: 1;
    visibility: visible;
    transition: opacity 280ms ease, visibility 280ms ease;
  }

  .logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .text {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
  }
  .text img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .money {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
  }
  .money img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Egg Grid Styles */
  .egg-grid {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
  }
  .row-one {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  .row-two {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 0 30px;
  }
  .egg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .egg-item:hover {
    transform: scale(1.05);
  }
  .egg-item img:first-child {
    width: 100px;
    height: auto;
    object-fit: contain;
  }
  .egg-item .btn-here {
    width: 70px;
    height: auto;
    margin-top: -5px;
    object-fit: contain;
  }

  .godenharmer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
  }
  .godenharmer img {
    width: 100%;
    height: 100%;
    max-width: 100px;
    object-fit: cover;
    animation: float-lr 5s ease-in-out infinite;
  }
  
  /* left-right float animation for godenharmer image */
  @keyframes float-lr {
    0% {
      transform: translateX(-250px);
    }
    50% {
      transform: translateX(250px);
    }
    100% {
      transform: translateX(-250px);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .godenharmer img {
      animation: none;
    }
  }
  
  /* Popout Overlay Styles */
  .popout-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 280ms ease;
    display: flex;
  }
  .popout-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .popout-card {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    transform: translateY(-30px) scale(0.98);
    opacity: 0;
    transition: transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 360ms ease;
    padding-top: 8%;
  }
  .popout-overlay.active .popout-card {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* Top text/title image (lose text or win text with prize) */
  .popout-image-top {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
  }
  .popout-image-top img {
    width: 85%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
  }

  /* Center broken egg with emoji/money coming out */
  .popout-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    z-index: 5;
  }
  .popout-image img {
    width: 65%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
  }

  /* Button actions at bottom */
  .popout-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 15%;
    z-index: 10;
  }
  .popout-btn {
    top: 80%;
    position: absolute;
    width: 260px;
    max-width: 70%;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease;
  }
  .popout-btn:hover {
    transform: scale(1.05);
  }
  .popout-claim {
    top: 75%;
    position: absolute;
    width: 260px;
    max-width: 70%;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease;
  }
  .popout-claim:hover {
    transform: scale(1.05);
  }

  /* Lose Popout specific styles */
  #losePopout .popout-card {
    padding-top: 12%;
  }
  #losePopout .popout-image-top {
    position: absolute;
    top: 15%;
    width: 100%;
  }
  #losePopout .popout-image-top img {
    max-width: 380px;
    width: 90%;
  }
  #losePopout .popout-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #losePopout .popout-image img {
    max-width: 320px;
    width: 75vw;
  }
  #losePopout .popout-btn {
    top: 78%;
  }

  /* Win Popout specific styles */
  #winPopout .popout-card {
    padding-top: 10%;
  }
  #winPopout .popout-image-top {
    position: absolute;
    top: 12%;
    width: 100%;
  }
  #winPopout .popout-image-top img {
    max-width: 380px;
    width: 85%;
  }
  #winPopout .popout-image {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #winPopout .popout-image img {
    max-width: 300px;
    width: 70vw;
  }
  #winPopout .popout-claim {
    top: 82%;
  }

  /* ========== RESPONSIVE STYLES ========== */

  /* Tablet and smaller desktop */
  @media (max-width: 600px) {
    /* Main content */
    .text {
      top: 16%;
      max-width: 95%;
    }
    .money {
      top: 32%;
      max-width: 85%;
    }

    /* Egg grid */
    .egg-grid {
      top: 68%;
      width: 95%;
    }
    .egg-item img:first-child {
      width: 90px;
    }
    .egg-item .btn-here {
      width: 60px;
    }
    .row-two {
      gap: 70px;
    }
    .godenharmer {
      top: 48%;
    }
    .godenharmer img {
      max-width: 90px;
    }

    /* Popouts */
    #losePopout .popout-image-top img {
      max-width: 320px;
    }
    #losePopout .popout-image img {
      max-width: 280px;
    }
    #winPopout .popout-image-top img {
      max-width: 340px;
    }
    #winPopout .popout-image img {
      max-width: 260px;
    }
    .popout-btn,
    .popout-claim {
      width: 240px;
      max-width: 65%;
    }
  }

  /* Mobile devices */
  @media (max-width: 480px) {

    .text {
      top: 15%;
      max-width: 70%;
    }
    .money {
      top:29%;
      max-width: 80%;
    }

    /* Egg grid */
    .egg-grid {
      top: 67%;
    }
    .egg-item img:first-child {
      width: 80px;
    }
    .egg-item .btn-here {
      width: 55px;
    }
    .row-two {
      gap: 55px;
    }
    .godenharmer {
      top: 46%;
    }
    .godenharmer img {
      max-width: 80px;
    }

    /* Popouts */
    #losePopout .popout-image-top {
      top: 12%;
    }
    #losePopout .popout-image-top img {
      max-width: 300px;
    }
    #losePopout .popout-image {
      top: 48%;
    }
    #losePopout .popout-image img {
      max-width: 260px;
    }
    #losePopout .popout-btn {
      top: 80%;
    }
    #winPopout .popout-image-top {
      top: 10%;
    }
    #winPopout .popout-image-top img {
      max-width: 320px;
    }
    #winPopout .popout-image {
      top: 52%;
    }
    #winPopout .popout-image img {
      max-width: 240px;
    }
    #winPopout .popout-claim {
      top: 83%;
    }
    .popout-btn,
    .popout-claim {
      width: 220px;
      max-width: 60%;
    }
  }

  /* Small mobile devices */
  @media (max-width: 400px) {
    /* Main content */
    .logo {
      top: 3%;
      max-width: 180px;
    }
    .text {
      top: 14%;
    }
    .money {
      top: 28%;
    }

    /* Egg grid */
    .egg-grid {
      top: 66%;
    }
    .egg-item img:first-child {
      width: 70px;
    }
    .egg-item .btn-here {
      width: 48px;
    }
    .row-two {
      gap: 45px;
    }
    .godenharmer {
      top: 44%;
    }
    .godenharmer img {
      max-width: 70px;
    }

    /* Popouts */
    #losePopout .popout-image-top {
      top: 10%;
    }
    #losePopout .popout-image-top img {
      max-width: 280px;
    }
    #losePopout .popout-image img {
      max-width: 230px;
    }
    #winPopout .popout-image-top {
      top: 8%;
    }
    #winPopout .popout-image-top img {
      max-width: 300px;
    }
    #winPopout .popout-image img {
      max-width: 220px;
    }
    .popout-btn,
    .popout-claim {
      width: 200px;
      max-width: 55%;
    }
  }

  /* Extra small mobile devices */
  @media (max-width: 360px) {
    /* Main content */
    .text {
      top: 13%;
    }
    .money {
      top: 26%;
    }

    /* Egg grid */
    .egg-grid {
      top: 65%;
    }
    .egg-item img:first-child {
      width: 60px;
    }
    .egg-item .btn-here {
      width: 42px;
    }
    .row-two {
      gap: 38px;
    }
    .godenharmer {
      top: 42%;
    }
    .godenharmer img {
      max-width: 60px;
    }

    /* Popouts */
    #losePopout .popout-image-top img {
      max-width: 250px;
    }
    #losePopout .popout-image img {
      max-width: 200px;
    }
    #winPopout .popout-image-top img {
      max-width: 270px;
    }
    #winPopout .popout-image img {
      max-width: 190px;
    }
    .popout-btn,
    .popout-claim {
      width: 180px;
      max-width: 52%;
    }
  }