body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
  background: url("bg.jpg") center center fixed no-repeat;
  background-size: cover;
  font-family: Montserrat, sans-serif;
}

/* Cover container - establishes positioning context */
.cover {
  position: absolute;
  top: 6.85%; /* Equivalent to 6.85vh */
  width: 100%;
  text-align: center;
  height: 71.3%; /* Height of frame container */
}

/* Frame container - centers contents */
.cover-container {
  display: inline-block;
  position: relative;
  height: 100%; /* Fills parent height */
}

/* Frame image - maintains original proportions */
.cover__frame {
  height: 100%; /* 71.3% of viewport (via parent) */
  width: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Prevent overflow */
  display: block;
}

/* Cover image - positioned over frame */
.cover__image {
  position: absolute;
  top: 4.5%; /* Adjust this to position correctly over frame */
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 91.2%; /* 65vh relative to 71.3vh container (65/71.3 ≈ 0.912) */
  width: auto;
  max-width: 90%; /* Slightly smaller than frame */
  border: 1px solid rgba(255, 208, 117, 1);
}

/* Logo section - fixed height issue */
.logo {
  position: absolute;
  top: -3%;
  width: 100%;
  text-align: center;
  height: 25%; /* Added this line to establish percentage basis */
}

.logo__image {
  height: 100%; /* Changed from percentage to 100% of parent height */
  max-width: 100%;
  width: auto; /* Maintain aspect ratio */
}

/* Base font size at the html level (zoom-resistant) */
html {
  font-size: 6px; /* Base for vh conversion (1vh ≈ 6px at 600px viewport) */
}

/* Tip section with precise spacing */
.tip {
  position: absolute;
  top: 77.4%;
  width: 100%;
  text-align: center;
}

.tip__title {
  width: 80%;
  margin: 1em auto 0.5em; /* Reduced top/bottom margin */
  color: rgba(255, 208, 117, 1);
  font-family: Montserrat;
  font-weight: 700;
  font-size: 2.6em;
  line-height: 1.2; /* Tighter line height */
}

.tip__text {
  width: 80%;
  margin: 0.5em auto 0; /* Reduced top margin */
  color: white;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 2.4em;
  line-height: 1.2; /* Matches title line height */
}

/* Progress Bar Container */
.progress-bar {
  position: fixed;
  bottom: 3.7%;
  left: 0;
  width: 100%;
  height: 1.5%; /* Matches original 1.5vh */
  background-color: rgba(13, 13, 13, 1);
  overflow: hidden; /* Ensures child stays contained */
}

/* Progress Bar Fill */
.progress-bar__image {
  height: 100%;
  width: 0%;
  background: url("progress.png") left repeat-x;
  background-size: auto 100%; /* Full height of container */
}

/* Status log */
.status-log {
  position: absolute;
  color: white;
}