/* Root Variables */
:root {
  /* --game-content-height: 750px; */
  --game-content-height: 840px;
  --game-background-color: #e8f0f6;
}

/* Layout & Container Styles */
#aviation-game-root {
  background-color: var(--game-background-color);
  min-height: var(--game-content-height);
  position: relative;
  top: 0;
}

.game-container {
  background:
    linear-gradient(
      180deg,
      rgba(238, 240, 242, 0.2) 0%,
      rgba(163, 187, 200, 0.2) 100%
    ),
    #fff;
  height: 100%;
  margin: 0 auto;
  padding: 81px 0; /* Match instructions screen top padding */
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-container.visible {
  opacity: 1;
}

/* Media Stack and Slide Animation Styles */
.media-stack {
  aspect-ratio: 1;
  margin: 0 auto;
  margin-bottom: 20px;
  max-width: 450px;
  position: relative;
  width: 100%;
}

.media-stack .media-item {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  will-change: transform, opacity, left;
}

@media (max-width: 727px) {
  #aviation-game-root {
    min-height: var(--game-content-height);
    top: 45px;
  }

  .media-stack .media-item.next,
  .media-stack .media-item.next-next,
  .media-stack .media-item.prev,
  .media-stack .media-item.prev-prev {
    display: none;
  }

  /* Ensure active item takes full width */
  .media-stack .media-item.active {
    width: 100%;
    left: 0;
    transform: none;
  }

  /* Adjust container aspect ratio for mobile */
  .media-stack {
    max-width: 100%;
  }
}

/* Media Types (Image, Video, Audio, Text) */
.media-stack .media-item picture,
.media-stack .media-item img {
  display: block;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.media-stack .media-item video {
  background: black;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

/* Hide video controls by default */
.media-stack .media-item video::-webkit-media-controls-panel {
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show controls on hover */
.media-stack .media-item video:hover::-webkit-media-controls-panel {
  opacity: 1;
}

.media-stack .media-item.active {
  background-color: white;
  filter: brightness(100%);
  left: 0;
  opacity: 1;
  transform: translateX(0);
  z-index: 3;
}

.media-stack .media-item.active picture,
.media-stack .media-item.active img,
.media-stack .media-item.active video,
.media-stack .media-item.active audio {
  opacity: 1;
}

.media-stack .media-item.next {
  background-color: var(--chromatic-medium-gray);
  left: -50%;
  opacity: 1;
  transform: translateX(100%) scale(0.85);
  z-index: 2;
}

.media-stack .media-item.next-next {
  background-color: var(--chromatic-light-gray);
  left: -25%;
  opacity: 1;
  transform: translateX(100%) scale(0.7);
  z-index: 1;
}

.media-stack .media-item.prev {
  background-color: var(--chromatic-medium-gray);
  left: 50%;
  opacity: 1;
  transform: translateX(-100%) scale(0.85);
  z-index: 2;
}

.media-stack .media-item.prev-prev {
  background-color: var(--chromatic-light-gray);
  left: 25%;
  opacity: 1;
  transform: translateX(-100%) scale(0.7);
  z-index: 1;
}

.media-stack
  .media-item:not(.active):not(.next):not(.next-next):not(.prev):not(
    .prev-prev
  ) {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.media-stack .media-item:not(.active) {
  pointer-events: none;
}

.media-stack .media-item.slide-out {
  left: -100%;
}

/* For text hints */
.media-stack .media-item .text-hint-container,
.media-stack .media-item .audio-container {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 1;
  position: relative;
  width: 100%;
}

/* Make sure the text and audio elements are visible above the overlay */
.text-hint-container .text-hint,
.audio-container audio {
  position: relative;
  z-index: 2;
}

.text-hint-container .text-hint {
  color: var(--color-primary-white);
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0;
  padding: 20px 40px;
}

/* Input and Suggestions Styles */
.game-controls {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 30px auto;
  max-width: 380px;
  position: relative;
  width: 90%;
}

.input-wrapper {
  width: 100%;
}

#aircraft-guess {
  background: white;
  border: none;
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 15px;
  position: relative;
  width: 100%;
  z-index: 2;
}

#aircraft-guess::placeholder {
  color: var(--color-primary-jet-gray);
}

/* Add custom focus styles */
#aircraft-guess:focus-visible {
  outline: none;
}

.suggestion-item {
  cursor: pointer;
  padding: 12px 18px;
  transition: background-color 0.2s;
}

.suggestion-item:hover {
  background-color: var(--chromatic-light-gray);
}

/* Game Status Styles */
.game-error {
  background: #f8d7da;
  border-radius: 4px;
  color: #dc3545;
  margin: 1rem 0;
  padding: 2rem;
  text-align: center;
}

.game-preview {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 2rem;
  text-align: center;
}

.game-scheduled {
  background: #e2e3e5;
  border-radius: 4px;
  font-style: italic;
  margin-top: 1rem;
  padding: 0.5rem;
  text-align: center;
}

.streak-counter {
  color: #666;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Registration Modal Styles */
.registration-modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.modal-content {
  background: white;
  border-radius: 8px;
  max-width: 500px;
  padding: 2rem;
  width: 90%;
}

.modal-content h3 {
  color: #333;
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0;
}

.modal-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.modal-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Button Styles */
.register-btn {
  background-color: var(--color-primary-sunrise-dark);
  border: none;
  border-radius: 16px;
  color: var(--color-primary-white);
  cursor: pointer;
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  padding: 20px;
  transition: background-color 0.2s ease;
}

.register-btn:hover {
  cursor: pointer;
}

.skip-btn {
  background-color: var(--chromatic-light-gray);
  border: none;
  border-radius: 16px;
  color: var(--color-primary-jet-gray);
  cursor: pointer;
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  padding: 20px;
  transition: background-color 0.2s ease;
}

.skip-btn:hover {
  cursor: pointer;
}

/* Registration Form Styles */
.wpf-register-form {
  margin-top: 1.5rem;
}

.wpf-field {
  margin-bottom: 1rem;
}

.wpf-field input {
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.75rem;
  width: -webkit-fill-available;
}

#registration-message {
  margin-top: 1rem;
  text-align: center;
}

#registration-message .error {
  color: #dc3232;
}

#registration-message .success {
  color: #46b450;
}

/* Progress Indicators */
.clue-progress-indicators {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 16px 0;
}

.progress-indicator {
  align-items: center;
  background-color: var(--chromatic-medium-gray);
  border: 2px solid var(--chromatic-medium-gray);
  border-radius: 8px;
  display: flex;
  height: 44px;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  width: 44px;
}

.progress-indicator.active {
  border-color: var(--chromatic-medium-gray);
  background-color: var(--chromatic-medium-gray);
}

.progress-indicator.missed,
.progress-indicator.skipped {
  background-color: #ffa2a2;
  border-color: #ffa2a2;
}

.progress-indicator.correct {
  background-color: #a2ffb0;
  border-color: #a2ffb0;
}

.progress-indicator svg {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.progress-indicator.missed svg,
.progress-indicator.skipped svg {
  color: var(--color-primary-sunrise-red);
}

.progress-indicator.correct svg {
  color: #34a853;
}

/* Button container and  button styles */
.button-container {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}

#submit-guess,
#skip-guess {
  align-items: center;
  background-color: var(--chromatic-light-gray);
  border: none;
  border-radius: 6px;
  color: var(--color-primary-jet-gray);
  display: flex;
  flex: 1;
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  gap: 12px;
  line-height: normal;
  padding: 10px;
  position: relative;
  transition: all 0.2s ease;
  width: 100%;
}

#submit-guess:hover,
#skip-guess:hover {
  cursor: pointer;
}

#skip-guess::before {
  background-color: #a2ffb0;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.815186 4.36364C0.815186 1.95367 2.76885 0 5.17882 0H20.4515C22.8615 0 24.8152 1.95367 24.8152 4.36364V19.6364C24.8152 22.0463 22.8615 24 20.4515 24H5.17882C2.76885 24 0.815186 22.0463 0.815186 19.6364V4.36364Z' fill='%23FFA2A2'/%3E%3Cg clip-path='url(%23clip0_3380_5170)'%3E%3Cpath d='M8.31519 9.13147V14.8741C8.31581 14.9464 8.3358 15.0172 8.37309 15.0792C8.41037 15.1411 8.46358 15.1919 8.52718 15.2263C8.59077 15.2608 8.66243 15.2775 8.73469 15.2748C8.80694 15.2721 8.87716 15.2501 8.93803 15.2111L13.4477 12.3398C13.5046 12.3038 13.5514 12.254 13.5838 12.1951C13.6162 12.1362 13.6332 12.07 13.6332 12.0028C13.6332 11.9355 13.6162 11.8694 13.5838 11.8104C13.5514 11.7515 13.5046 11.7018 13.4477 11.6658L8.93803 8.79448C8.87716 8.75544 8.80694 8.73343 8.73469 8.73075C8.66243 8.72806 8.59077 8.74479 8.52718 8.7792C8.46358 8.81361 8.41037 8.86444 8.37309 8.92639C8.3358 8.98835 8.31581 9.05916 8.31519 9.13147Z' stroke='%23FE0000' stroke-width='0.818182' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.6335 9.13147V14.8741C13.6342 14.9464 13.6542 15.0172 13.6914 15.0792C13.7287 15.1411 13.7819 15.1919 13.8455 15.2263C13.9091 15.2608 13.9808 15.2775 14.053 15.2748C14.1253 15.2721 14.1955 15.2501 14.2564 15.2111L18.7661 12.3398C18.8229 12.3038 18.8697 12.254 18.9022 12.1951C18.9346 12.1362 18.9516 12.07 18.9516 12.0028C18.9516 11.9355 18.9346 11.8694 18.9022 11.8104C18.8697 11.7515 18.8229 11.7018 18.7661 11.6658L14.2564 8.79448C14.1955 8.75544 14.1253 8.73343 14.053 8.73075C13.9808 8.72806 13.9091 8.74479 13.8455 8.7792C13.7819 8.81361 13.7287 8.86444 13.6914 8.92639C13.6542 8.98835 13.6342 9.05916 13.6335 9.13147Z' stroke='%23FE0000' stroke-width='0.818182' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3380_5170'%3E%3Crect width='13.0909' height='13.0909' fill='white' transform='translate(6.27002 5.45312)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  border-radius: 8px;
  content: "";
  display: inline-block;
  height: 24px;
  position: relative;
  width: 24px;
}

#submit-guess::before {
  background-color: #a2ffb0;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.815186' width='24' height='24' rx='4.36364' fill='%235B6B75'/%3E%3Cg clip-path='url(%23clip0_3380_5177)'%3E%3Cpath d='M17.7919 8.78906L11.3658 15.2152L7.8374 11.6868' stroke='%23D6E1E8' stroke-width='0.818182' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3380_5177'%3E%3Crect width='12.1528' height='12.1528' fill='white' transform='translate(6.73877 5.92578)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  border-radius: 8px;
  content: "";
  display: inline-block;
  height: 24px;
  position: relative;
  width: 24px;
}

/* Clue Progress Indicators Mobile */
@media (max-width: 768px) {
  .clue-progress-indicators {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Audio container styles */
.media-stack .media-item .audio-container {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.media-stack .media-item audio {
  width: 90%;
  height: 40px;
  border-radius: 8px;
  position: relative;
  z-index: 2; /* Place above overlay */
}

audio::-webkit-media-controls-panel {
  background-color: var(--color-primary-white);
}

audio::-webkit-media-controls-play-button {
  background-color: var(--chromatic-medium-gray);
  border-radius: 50%;
}

audio::-webkit-media-controls-play-button:hover {
  background-color: var(--chromatic-light-gray);
}

/* Game Controls Styles */
.game-controls {
  margin: 30px auto;
  max-width: 380px;
  position: relative;
  width: 90%;
}

.suggestions-container {
  background: var(--color-primary-white);
  border: none;
  border-radius: 16px 16px 0 0;
  bottom: calc(100% - 5px);
  left: 0;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  z-index: 3;
}

.suggestions-container:not(:empty) {
  border-bottom: none;
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.1);
}

/* Text Clue Styles */
.media-item.text-clue {
  align-items: center;
  aspect-ratio: 1;
  background: white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  object-fit: cover;
  padding: 2rem;
  text-align: center;
}

.text-clue h2 {
  color: #333;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 1rem 0;
}

.text-clue p {
  color: #666;
  font-size: clamp(1rem, 3vw, 1.2rem);
  line-height: 1.6;
  margin: 0;
  max-width: 80%;
}

/* Clue Tag Styles */
.media-item .clue-tag {
  align-items: center;
  background: var(--color-primary-white);
  border-radius: 10px;
  color: var(--color-primary-jet-gray);
  display: flex;
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 14px;
  gap: 4px;
  left: 50%;
  padding: 12px;
  position: absolute;
  top: 24px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}

.clue-tag .clue-icon {
  align-items: center;
  border-radius: 6px;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.clue-tag .clue-icon svg {
  height: 16px;
  width: 16px;
}

/* Ensure the tag is visible on all media types */
.media-item.text-clue .clue-tag,
.media-item .audio-container .clue-tag,
.media-item .text-hint-container .clue-tag {
  color: var(--color-primary-jet-gray);
}

/* Instructions Screen */
.instructions-screen {
  background-color: var(--game-background-color);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  min-height: var(--game-content-height);
  padding: 81px 48px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.instructions-screen.fade-out {
  opacity: 0;
}

.instructions-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: unset;
  max-width: 500px;
  padding: 60px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;

  /* Add animation properties */
  opacity: 0.15;
  transform: translateY(200px);
  animation: slideInContent 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Add the animation keyframes near other animations */
@keyframes slideInContent {
  from {
    opacity: 0.15;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.instructions-screen .date {
  color: var(--chromatic-dark-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 18px;
  margin-bottom: 40px;
}

.instructions-screen .game-logo {
  margin-bottom: 45px;
  max-width: 423px;
  width: 100%;
  height: auto;
}

.instructions-screen .game-logo svg {
  width: 100%;
  height: auto;
}

.instructions-screen .instructions {
  margin: 0 auto 40px;
  max-width: 400px;
  text-align: left;
}

.instructions-screen .instructions h1 {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.48px;
  line-height: normal;
  margin: 0 0 16px 0;
  text-align: center;
}

.instructions-screen .instructions ul {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  list-style: none;
  margin: 0;
  padding: 0;
}

.instructions-screen .instructions li {
  margin-bottom: 16px;
  padding-left: 24px;
  position: relative;
}

.instructions-screen .instructions li:before {
  background-color: var(--color-primary-jet-gray);
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 8px;
}

.instructions-screen .play-button {
  align-self: center;
  background-color: var(--color-primary-sunrise-dark);
  border: none;
  border-radius: 16px;
  color: var(--color-primary-white);
  cursor: pointer;
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  max-width: 175px;
  padding: 20px;
  transition: background-color 0.2s ease;
}

.instructions-screen .play-button:hover {
  cursor: pointer;
}

/* Mobile Instructions Screen */
@media (max-width: 768px) {
  .instructions-screen {
    align-items: center;
    padding: 17px;
    width: auto;
  }

  .instructions-content {
    padding: 30px;
    position: relative;
    top: -56px;
    height: auto;
    min-height: 0;
    /* Animation properties are inherited */
  }

  .instructions-screen .date {
    margin-bottom: 30px;
  }

  .instructions-screen .game-logo {
    margin-bottom: 20px;
  }

  .instructions-screen .instructions {
    margin: 0 auto 15px;
  }
}

/* Loading State */
.loading {
  align-items: center;
  background: var(--game-background-color);
  bottom: 0;
  color: var(--color-primary-jet-gray);
  display: flex;
  font-family: "ChromaticProGothic", sans-serif;
  justify-content: center;
  left: 0;
  min-height: var(--game-content-height);
  opacity: 0;
  padding: 81px 48px; /* Match other screens' padding */
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transition: opacity 0.3s ease;
}

.loading.visible {
  opacity: 1;
}

/* Closing Screen */
.closing-screen {
  position: relative; /* Contain the absolute stats module */
}

.closing-content {
  background: var(--game-background-color);
  padding-top: 81px;
  width: 100%;
}

.result-status {
  margin-bottom: 40px;
}

.result-status h2 {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}

.aircraft-showcase {
  border-radius: 12px;
  display: flex;
  gap: 40px;
  padding: 0 60px 60px 60px;
}

.aircraft-showcase .aircraft-image,
.aircraft-showcase .aircraft-image-placeholder {
  border-radius: 12px;
  flex: 1;
  min-height: 600px;
  min-width: 664px; /* to even the width with the aircraft info */
  box-sizing: border-box;
  width: 100%;
}

.aircraft-showcase .aircraft-image {
  overflow: hidden;
}

.aircraft-showcase .aircraft-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.aircraft-info {
  background: var(--color-primary-white);
  border-radius: 12px;
  flex: 1;
  padding: 60px;
  box-sizing: border-box;
  position: relative;
  min-height: 400px;
}

.aircraft-info h1 {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

.aircraft-info p {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Mobile Aircraft Showcase */
@media (max-width: 768px) {
  .aircraft-info {
    padding: 20px;
  }

  .aircraft-info h1 {
    text-transform: uppercase;
  }

  .aircraft-info p {
    margin-top: 0;
  }

  .aircraft-showcase .aircraft-image,
  .aircraft-showcase .aircraft-image-placeholder {
    min-height: auto;
    min-width: auto;
  }

  .closing-content {
    padding-top: unset;
  }

  .closing-screen {
    background-color: var(--color-primary-jet-gray);
    padding-top: 24px;
  }

  .closing-screen .clue-progress-indicators {
    top: 72px;
  }

  .result-status {
    margin-bottom: 20px;
  }

  .result-status h2 {
    text-transform: none;
  }
}

@media (max-width: 1224px) {
  .aircraft-showcase {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 0;
    padding: 13px;
  }
}

/* Stats Button */
.stats-button {
  background-color: var(--color-primary-sunrise-dark);
  border: none;
  border-radius: 16px;
  color: var(--color-primary-white);
  cursor: pointer;
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 16px;
  padding: 20px;
  transition: background-color 0.2s ease;
  position: absolute;
  bottom: 60px;
  right: 60px;
}

.stats-button:hover {
  cursor: pointer;
}

@media (max-width: 768px) {
  .stats-button {
    bottom: unset;
    position: relative;
    right: unset;
  }
}

/* Stats Module */
.stats-module {
  background: var(--color-primary-jet-gray);
  color: white;
  min-height: calc(
    var(--game-content-height) + 162px
  ); /* height + 81px + 81px (padding) */
  left: 0;
  top: 0;
  width: 100%;
}

.player-stats {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.stats-header-bar,
.close-stats-button {
  display: none;
}

.stats-content {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 81px;
  width: 100%;
}

.stats-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 2fr 3fr;
  max-width: 100%;
}

.stats-card {
  background: #5b6b75;
  border-radius: 16px;
  padding: 50px;
}

.stats-card.main-stats {
  border-radius: 16px;
  padding: 50px 0 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.streak-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.streak-card .streak-content {
  display: flex;
  margin-bottom: auto;
}

.streak-stats-container {
  display: flex;
}

.streak-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 24px;
}

.streak-card .stats-icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.streak-info h2 {
  color: var(--color-primary-white);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.72px;
  margin: 0;
  text-transform: uppercase;
}

.streak-card .stats-value {
  color: var(--color-primary-white);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  text-align: center;
  text-transform: uppercase;
}

.main-stats .stats-header {
  align-items: center;
  display: flex;
  margin-bottom: 40px;
  padding-left: 50px;
}

.stats-header-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-header-info h2 {
  color: var(--color-primary-white);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  margin: 0;
  text-transform: uppercase;
}

.stats-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.stats-avatar .avatar-svg {
  width: 91px;
  height: 91px;
}

.stats-avatar .avatar-background {
  fill: #e3ebf0;
}

.stats-avatar .avatar-figure {
  fill: #26333a;
}

.stats-avatar .avatar-group {
  clip-path: url(#avatar-clip);
}

.stats-date {
  color: var(--color-primary-white);
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 50px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.stat-row {
  display: flex;
  justify-content: space-between;
}

.stat-row span {
  color: var(--color-primary-white);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Mobile Stats Module */
@media (max-width: 768px) {
  .main-stats .stats-header {
    padding-left: 20px;
  }

  .stat-icon svg {
    height: 18px;
    width: 18px;
    margin-top: 3px;
  }

  .stat-label {
    gap: 12px;
  }

  .stat-row span {
    font-size: 14px;
  }

  .stats-card.main-stats {
    max-width: calc(100vw - 40px);
  }

  .stats-content {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-header-info h2 {
    font-size: 40px;
  }

  .streak-card .stats-icon {
    margin-bottom: 0;
  }

  .stats-header-info h2 {
    text-transform: none;
  }

  .stats-list {
    padding: 0 20px 24px 20px;
  }

  .streak-info {
    gap: 0;
    margin-left: 15px;
  }

  .streak-info h2 {
    font-size: 16px;
  }

  .streak-card .stats-value {
    font-size: 40px;
  }

  .streak-flame-icon,
  .completion-time-icon {
    width: 45px;
    height: 60px;
  }
}

/* Tablet Stats Module */
@media (min-width: 768px) and (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-header-info h2 {
    font-size: 40px;
  }

  .stats-list {
    padding: 0 22px;
  }

  .stat-row span {
    font-size: 16px;
  }

  .streak-card .stats-value {
    font-size: 40px;
  }
}

/* Hide/show content */
.closing-content.hidden,
.stats-module.hidden {
  display: none;
}

/* Bottom of stats module */
.next-game {
  background: var(--chromatic-light-gray);
  padding: 22px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  margin-top: auto;
}

.next-game-label {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.72px;
  line-height: 120%;
  text-transform: uppercase;
}

.next-game-time {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: 1.08px;
  text-transform: uppercase;
}

.daily-progress {
  align-items: center;
  background-color: var(--chromatic-light-gray);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin: 50px -50px -50px -50px;
  overflow-x: scroll;
  padding: 22px;
  scrollbar-width: none;
}

.daily-progress.zero-streak {
  justify-content: flex-start;
}

.daily-progress::-webkit-scrollbar {
  display: none;
}

.daily-progress-item.current {
  background-color: var(--color-primary-jet-gray);
  border-radius: 8px;
  padding: 5px;
}

.current .daily-progress-day {
  color: var(--color-primary-white);
}

.daily-progress-day {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: 1.08px;
  margin-bottom: 5px;
  text-align: center;
}

.daily-progress-label {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.72px;
  line-height: 120%;
  text-transform: uppercase;
}

.daily-progress.player-speed {
  padding-top: 26px; /* Match the height of the next game label */
  padding-bottom: 28px; /* Match the height of the next game label */
}

@media (max-width: 768px) {
  .daily-progress {
    margin: 20px -20px 0 -20px;
    max-width: unset;
  }

  .daily-progress .current {
    padding: 7px;
  }

  .daily-progress-label {
    font-size: 14px;
  }

  .next-game {
    padding: 20px;
  }

  .next-game-label {
    font-size: 14px;
  }

  .next-game-time {
    font-size: 24px;
  }

  .player-stats {
    max-width: calc(100vw - 40px);
  }

  .stats-card {
    padding: 20px 20px 0 20px;
  }
}

/* Tablet Stats Module */
@media (min-width: 768px) and (max-width: 1024px) {
  .daily-progress {
    max-width: unset;
  }

  .daily-progress.player-speed {
    padding-top: 24px; /* Match the height of the next game label */
    padding-bottom: 22px; /* Match the height of the next game label */
  }

  .next-game-time {
    font-size: 22px;
  }
}

/* Completion time card styles matching streak card */
.completion-time {
  display: flex;
  flex-direction: column;
  position: relative;
}

.completion-time .stats-icon {
  font-size: 76px;
  margin-bottom: 24px;
}

.completion-time h2 {
  color: var(--color-primary-white);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.72px;
  margin: 0;
  text-transform: uppercase;
}

.completion-time .stats-value {
  color: var(--color-primary-white);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  margin-top: 10px;
  text-transform: uppercase;
}

.completion-time-stats {
  display: flex;
}

.completion-time-info {
  display: flex;
  flex-direction: column;
  margin-left: 24px;
}

.completion-time .daily-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Completion time card Mobile & Tablet*/
@media (max-width: 1024px) {
  .completion-time .stats-value {
    font-size: 40px;
  }
}

.speed-comparison {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.4px;
  text-align: center;
  font-feature-settings:
    "liga" off,
    "clig" off;
}

.average-time {
  color: var(--color-primary-jet-gray);
  font-family: "ChromaticProGothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
}

.player-speed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.media-stack .media-item.upcoming {
  display: none;
}