#welcome {
  --welcome-gold: #efba6b;
  position: fixed;
  inset: 0;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 max(24px, 7vw);
  overflow: auto;
  background: #112c2a;
  color: #fff1d8;
}

.welcome-scene, #welcome::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.welcome-scene {
  z-index: -2;
  left: 22%;
  width: 78%;
  object-fit: cover;
  object-position: 50% 52%;
}
#welcome::before {
  content: '';
  z-index: -1;
  background:
    linear-gradient(0deg, #102725e8 0, transparent 23%),
    linear-gradient(90deg, #102725 0 22%, #102725ae 43%, #10272512 73%);
}

.welcome-content {
  align-self: center;
  max-width: 480px;
  padding: 36px 0 20px;
}
.welcome-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  color: var(--welcome-gold);
  font-size: 12px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
#welcomeTitle {
  margin: 0;
  color: #fff1d8;
  font: 700 clamp(68px, 9vw, 142px)/0.96 Georgia, serif;
  letter-spacing: -0.065em;
  text-shadow: 0 3px 0 #321e1140;
}
.welcome-tagline {
  margin: 18px 0 8px;
  color: #f6d5a4;
  font: 400 clamp(23px, 3vw, 34px)/1.15 Georgia, serif;
}
.welcome-description {
  max-width: 29ch;
  margin: 0 0 24px;
  color: #e2d9c2;
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.5;
}
.welcome-play {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 198px;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid #ffe0a3;
  border-radius: 9px;
  background: var(--welcome-gold);
  color: #292219;
  box-shadow: 0 3px 0 #a96e35, 0 8px 22px #0b181870;
  cursor: pointer;
  font: 700 16px/1.2 "Trebuchet MS", sans-serif;
  transition: background 0.16s, transform 0.16s;
}
.welcome-play:hover:not(:disabled) { background: #ffd491; transform: translateY(-1px); }
.welcome-play:active:not(:disabled) { transform: translateY(2px); }
.welcome-play:disabled { opacity: 0.72; cursor: wait; }
#welcome :focus-visible { outline: 3px solid #fff4d8; outline-offset: 4px; }
.welcome-status { max-width: 30ch; margin: 0; color: #ffe0a3; }
.welcome-status:not(:empty) { margin-top: 14px; }
.welcome-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  border-top: 1px solid #eadcc04d;
  color: #e2d9c2;
  font-size: 12px;
}
.welcome-footer a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 700px) {
  #welcome { padding: 0 max(20px, env(safe-area-inset-left)); }
  .welcome-scene { left: 0; width: 100%; height: 68%; object-position: 53% 45%; }
  #welcome::before { background: linear-gradient(0deg, #112c2a 31%, #112c2ad9 44%, #112c2a26 69%); }
  .welcome-content { align-self: end; padding-top: clamp(164px, 37svh, 365px); }
  #welcomeTitle { font-size: clamp(62px, 16vw, 104px); }
  .welcome-tagline { margin-top: 11px; }
  .welcome-description { margin-bottom: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-play { transition: none; }
}