* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}

.button-container {
  display: flex;
  gap: 3vw;
  padding: 2vw;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transition: all 0.4s ease-in-out;
}

.btn {
  width: 25vw;
  height: 25vw;
  max-width: 300px;
  max-height: 300px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.7),
    0 5px 10px rgba(255, 255, 255, 0.05) inset,
    -5px -5px 10px rgba(60, 60, 60, 0.2),
    5px 5px 15px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  transform: translateY(0);
}

.btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  filter: brightness(1.05) contrast(1.1);
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-6px);
    box-shadow:
      0 16px 35px rgba(0, 0, 0, 0.85),
      0 6px 12px rgba(255, 255, 255, 0.08) inset,
      -6px -6px 12px rgba(60, 60, 60, 0.25),
      6px 6px 20px rgba(0, 0, 0, 0.7);
  }
}

@media (hover: none) {
  .btn:active img {
    transform: scale(0.97);
  }
}

.btn:active {
  transform: translateY(6px) scale(0.97);
  box-shadow:
    inset 0 8px 14px rgba(0, 0, 0, 0.7),
    inset 0 4px 4px rgba(255, 255, 255, 0.05);
}

/* Portrait layout */
@media (orientation: portrait) {
  .button-container {
    flex-direction: column;
    gap: 3vh;
    padding: 5vh 2vw;
  }

  .btn {
    width: 50vw;
    height: 50vw;
  }
}

.btn {
  position: relative;
  /* Existing styles... */
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(0deg);
  pointer-events: none;
  animation: shine 4s infinite linear;
  z-index: 1;
}