.welcome-screen {
  position: fixed; inset: 0; z-index: 90000; display: grid; place-items: center;
  overflow-y: auto; overflow-x: hidden; background: radial-gradient(ellipse at 77% 51%, #183523 0, transparent 47%), #020d17;
  transition: opacity 280ms ease, visibility 280ms;
}
.welcome-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .15; background: url("./assets/ui/game-bg-v2.png") center / cover no-repeat; }
.welcome-screen[hidden] { display: none; }
.welcome-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome-stage { position: relative; width: min(88vw, 1280px); margin: 28px auto; }
.welcome-logo { display: block; width: clamp(115px, 13vw, 190px); margin: 0 0 30px 3%; filter: drop-shadow(0 8px 18px #0008); }
.welcome-card { position: relative; isolation: isolate; min-height: 390px; border: 2px solid #71bc4b; border-radius: 36px; background: linear-gradient(115deg, #09222def, #071923f5 65%, #081c2380); box-shadow: 0 0 45px #68ff4410, inset 0 1px 0 #c4ff9830; }
.welcome-copy { position: relative; z-index: 2; width: 59%; padding: 44px 0 42px 5.5%; }
.welcome-eyebrow { display: block; color: #98e979; font-size: clamp(10px, .88vw, 13px); font-weight: 750; letter-spacing: .17em; margin-bottom: 14px; }
.welcome-copy h2 { margin: 0 0 20px; color: #f2ffe5; font-size: clamp(29px, 3vw, 45px); line-height: 1.05; font-weight: 900; letter-spacing: -.035em; }
.welcome-message p { color: #d3dfe2; font-size: clamp(15px, 1.4vw, 21px); line-height: 1.55; margin: 0 0 15px; }
.welcome-message p:last-child { color: #e4efd7; }
#welcome-launch { display: flex; align-items: center; justify-content: space-between; width: min(100%, 390px); min-height: 56px; padding: 14px 24px; margin-top: 26px; border: 1px solid #c2ff9c; border-radius: 12px; background: linear-gradient(#9cf657, #58d82b); color: #0b240c; box-shadow: 0 5px 0 #247f25, 0 12px 32px #62ff4726; font-size: clamp(16px, 1.6vw, 23px); font-weight: 900; cursor: pointer; transition: filter 150ms, transform 150ms; }
#welcome-launch { position: relative; isolation: isolate; overflow: hidden; transition: filter 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease; }
#welcome-launch::before { content: ""; position: absolute; z-index: -1; inset: -80% -35%; pointer-events: none; background: linear-gradient(110deg, transparent 38%, #efffcc99 49%, transparent 60%); transform: translateX(-85%); }
@media (hover: hover) and (pointer: fine) {
  #welcome-launch:hover { filter: brightness(1.08); transform: translateY(-3px); box-shadow: 0 8px 0 #247f25, 0 16px 42px #72ff4b70, inset 0 1px 0 #eeffdc; }
  #welcome-launch:hover::before { animation: welcome-button-sheen 650ms ease-out both; }
  #welcome-launch:hover span { transform: translateX(5px); }
}
#welcome-launch:active { transform: translateY(3px); box-shadow: 0 2px 0 #247f25, 0 6px 22px #62ff4740; }
#welcome-launch:focus-visible { outline: 3px solid white; outline-offset: 6px; }
#welcome-launch span { font-size: 1.4em; line-height: .8; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes welcome-button-sheen { to { transform: translateX(85%); } }
.welcome-portrait { position: absolute; right: -5%; bottom: -3%; width: 46%; height: 124%; pointer-events: none; }
.welcome-portrait > img { position: absolute; right: 0; bottom: 0; height: 100%; max-width: 100%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 15px 20px #0008); animation: welcome-arrival 700ms cubic-bezier(.2,.8,.2,1) both; }
.welcome-halo { position: absolute; inset: 14% -3% 2%; border-radius: 50%; background: radial-gradient(ellipse, #7df45333, #4fce5310 50%, transparent 72%); }
.welcome-tagline { margin: 22px 0 0 5.5%; color: #819b9c; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
@keyframes welcome-arrival { from { opacity: 0; transform: translate(28px, 8px); } to { opacity: 1; transform: none; } }
@media (max-height: 740px) and (orientation: landscape) {
  .welcome-stage { width: min(90vw, 1140px); margin: 14px auto; }
  .welcome-logo { width: 108px; margin: 0 0 15px 4%; }
  .welcome-card { min-height: 0; border-radius: 26px; }
  .welcome-copy { padding: 27px 0 28px 4%; width: 61%; }
  .welcome-copy h2 { font-size: clamp(25px, 3vw, 36px); margin-bottom: 14px; }
  .welcome-message p { font-size: clamp(14px, 1.55vw, 18px); line-height: 1.43; margin-bottom: 11px; }
  #welcome-launch { min-height: 46px; margin-top: 18px; padding: 11px 18px; }
  .welcome-portrait { right: -4%; width: 42%; height: 120%; }
  .welcome-tagline { margin-top: 16px; font-size: 10px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .welcome-stage { width: 92vw; margin: 12px auto; }
  .welcome-logo { width: 80px; margin: 0 0 8px 3%; }
  .welcome-copy { width: 65%; padding: 19px 0 20px 3%; }
  .welcome-eyebrow { font-size: 8px; margin-bottom: 9px; }
  .welcome-copy h2 { font-size: 25px; margin-bottom: 10px; }
  .welcome-message p { font-size: 13px; line-height: 1.35; margin-bottom: 9px; }
  #welcome-launch { margin-top: 12px; min-height: 44px; width: 270px; padding: 9px 16px; font-size: 16px; }
  .welcome-portrait { right: -3%; width: 36%; height: 114%; }
  .welcome-tagline { display: none; }
}
@media (orientation: portrait) { .welcome-screen { visibility: hidden; pointer-events: none; } }
@media (max-width: 740px) and (max-height: 480px) and (orientation: landscape) {
  .welcome-logo { display: none; }
  .welcome-portrait { height: 102%; }
  .welcome-stage { margin: 16px auto; }
}
@media (prefers-reduced-motion: reduce) { .welcome-screen, #welcome-launch { transition: none; } .welcome-portrait > img { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  #welcome-launch::before { display: none; }
  #welcome-launch:hover, #welcome-launch:active, #welcome-launch:hover span { transform: none; }
  #welcome-launch span { transition: none; }
}