:root{
  --night:      #0A0E27;
  --night-2:    #11142E;
  --magenta:    #C467D8;
  --pink:       #D8559B;
  --mint:       #7EE0C4;
  --mint-deep:  #57CBB2;
  --orange:     #E4732F;
  --cream:      #FBF3E4;
  --line:       rgba(251, 243, 228, .16);
  --glass:      rgba(11, 15, 38, .55);
  --maxw:       820px;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--night);
  color: var(--cream);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--night);
  transform: scale(1.02);
}

.veil{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 52%, rgba(8, 11, 30, .58) 0%, rgba(8, 11, 30, 0) 72%),
    linear-gradient(180deg,
      rgba(8, 11, 30, .88) 0%,
      rgba(8, 11, 30, .30) 24%,
      rgba(8, 11, 30, .46) 48%,
      rgba(8, 11, 30, .74) 74%,
      rgba(8, 11, 30, .95) 100%);
}

.wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  padding: clamp(1rem, 2.8vh, 2.1rem) 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.75rem, 1.7vh, 1.35rem);
  text-align: center;
}

.hero{ display: flex; flex-direction: column; align-items: center; gap: .45rem; }

.eyebrow{
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(.6rem, 1.6vw, .75rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  text-indent: .42em;
  color: var(--mint);
  opacity: .95;
}

h1{
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(10, 14, 39, .85), 0 1px 4px rgba(10, 14, 39, .9);
}

.tagline{
  margin: 0;
  max-width: 54ch;
  font-size: clamp(.86rem, 1.7vw, 1rem);
  color: rgba(251, 243, 228, .84);
  text-shadow: 0 1px 18px rgba(10, 14, 39, .9);
}

.player{
  position: relative;
  width: min(100%, max(320px, calc((100svh - 29rem) * 16 / 9)));
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--night-2) url('poster.jpg') center / cover no-repeat;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(126, 224, 196, .10),
    0 0 70px rgba(196, 103, 216, .16);
}

.player.is-playing{ background-image: none; }

.player iframe,
.player .player-frame{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.play{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background:
    radial-gradient(40% 64% at 50% 50%, rgba(8, 11, 30, .62) 0%, rgba(8, 11, 30, .26) 55%, rgba(8, 11, 30, 0) 100%),
    linear-gradient(180deg, rgba(8, 11, 30, .14) 0%, rgba(8, 11, 30, .16) 42%, rgba(8, 11, 30, .58) 100%);
  color: var(--cream);
  font: inherit;
  transition: background .25s ease;
}

.play-btn{
  display: grid;
  place-items: center;
  width: clamp(56px, 9vh, 82px);
  height: clamp(56px, 9vh, 82px);
  padding-left: 4px;
  border-radius: 50%;
  color: #06231C;
  background: linear-gradient(140deg, var(--mint) 0%, var(--mint-deep) 100%);
  box-shadow: 0 12px 34px rgba(8, 11, 30, .55), 0 0 0 10px rgba(126, 224, 196, .14);
  transition: transform .25s ease, box-shadow .25s ease;
}

.play:hover .play-btn,
.play:focus-visible .play-btn{
  transform: scale(1.07);
  box-shadow: 0 16px 40px rgba(8, 11, 30, .6), 0 0 0 16px rgba(126, 224, 196, .18);
}

.play:hover{
  background: linear-gradient(180deg, rgba(8, 11, 30, .22) 0%, rgba(8, 11, 30, .26) 42%, rgba(8, 11, 30, .62) 100%);
}

.play:focus-visible{
  outline: 3px solid var(--cream);
  outline-offset: -6px;
  border-radius: 18px;
}

.play.is-hidden{ display: none; }

.player.is-loading::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid rgba(126, 224, 196, .22);
  border-top-color: var(--mint);
  animation: spin .85s linear infinite;
  pointer-events: none;
}

@keyframes spin{ to{ transform: rotate(360deg); } }

.player-fallback{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: clamp(.9rem, 4%, 1.5rem);
  text-align: center;
  background: linear-gradient(180deg, rgba(8, 11, 30, .88) 0%, rgba(8, 11, 30, .95) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.pf-title{
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(.95rem, 2.3vw, 1.15rem);
  color: var(--cream);
}

.pf-text{
  margin: 0;
  max-width: 46ch;
  font-size: clamp(.72rem, 1.65vw, .84rem);
  line-height: 1.45;
  color: rgba(251, 243, 228, .72);
}

.pf-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .4rem;
}

.pf-primary{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.35rem;
  border-radius: 999px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: #06231C;
  text-decoration: none;
  background: linear-gradient(140deg, var(--mint) 0%, var(--mint-deep) 100%);
  box-shadow: 0 10px 26px rgba(87, 203, 178, .24);
  transition: transform .2s ease, box-shadow .2s ease;
}

.pf-primary:hover,
.pf-primary:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(87, 203, 178, .34);
}

.pf-secondary{
  padding: .62rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: rgba(251, 243, 228, .9);
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.pf-secondary:hover,
.pf-secondary:focus-visible{
  color: var(--mint);
  border-color: rgba(126, 224, 196, .55);
  background: rgba(126, 224, 196, .08);
}

.notice{
  margin: 0;
  max-width: 52ch;
  padding: .55rem .95rem;
  border-radius: 12px;
  border: 1px solid rgba(196, 103, 216, .38);
  background: rgba(196, 103, 216, .12);
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(251, 243, 228, .9);
}

.notice[hidden]{ display: none; }

.yt-link-row{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .8rem;
  color: rgba(251, 243, 228, .58);
}

.yt-link{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(126, 224, 196, .92);
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 224, 196, .3);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}

.yt-link:hover,
.yt-link:focus-visible{
  color: var(--cream);
  border-bottom-color: rgba(251, 243, 228, .6);
}

.cta{ display: flex; flex-direction: column; align-items: center; gap: .55rem; }

.btn-steam{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(.98rem, 2.2vw, 1.1rem);
  letter-spacing: .01em;
  color: #06231C;
  text-decoration: none;
  background: linear-gradient(140deg, var(--mint) 0%, #6BD7CE 55%, var(--mint-deep) 100%);
  box-shadow: 0 14px 38px rgba(87, 203, 178, .26), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .22s ease, box-shadow .22s ease;
}

.btn-steam svg{ flex: none; }

.btn-steam:hover,
.btn-steam:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(87, 203, 178, .38), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.btn-steam:active{ transform: translateY(0); }

/* Secondary CTA — press kit. Same pill recipe as the Steam button
   (geometry, weight, lift, glow), studio magenta/pink accent so the two
   sit side by side without competing. */
.btn-press{
  color: #16063A;
  background: linear-gradient(140deg, var(--magenta) 0%, #CF5CC4 55%, var(--pink) 100%);
  box-shadow: 0 14px 38px rgba(196, 103, 216, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.btn-press:hover,
.btn-press:focus-visible{
  box-shadow: 0 20px 48px rgba(196, 103, 216, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.cta-note{
  margin: 0;
  font-size: .78rem;
  color: rgba(251, 243, 228, .62);
  text-shadow: 0 1px 12px rgba(8, 11, 30, .9);
}

.socials{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  width: 100%;
}

.social{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(251, 243, 228, .9);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}

.social svg{ flex: none; opacity: .9; }

.social:hover,
.social:focus-visible{
  transform: translateY(-2px);
  color: var(--mint);
  border-color: rgba(126, 224, 196, .55);
  background: rgba(126, 224, 196, .08);
}

.social:hover svg,
.social:focus-visible svg{ opacity: 1; }

/* Contact pill. Carries the address itself rather than a label, and takes
   the mint accent so it reads as an action rather than a fourth social
   channel. */
.social-mail{
  color: var(--mint);
  border-color: rgba(126, 224, 196, .42);
  background: rgba(126, 224, 196, .07);
}

.social-mail:hover,
.social-mail:focus-visible{
  color: #06231C;
  border-color: rgba(126, 224, 196, .9);
  background: linear-gradient(140deg, var(--mint) 0%, var(--mint-deep) 100%);
}

.foot{
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(251, 243, 228, .45);
  text-shadow: 0 1px 10px rgba(8, 11, 30, .9);
}

a:focus-visible,
button:focus-visible{ outline: 3px solid var(--cream); outline-offset: 3px; border-radius: 6px; }

.social:focus-visible,
.btn-steam:focus-visible{ border-radius: 999px; }

@media (max-height: 820px){
  .wrap{ gap: .6rem; padding: .9rem 1.25rem; }
  h1{ font-size: clamp(1.7rem, 4.4vw, 3rem); }
  .tagline{ max-width: 72ch; font-size: .84rem; }
  .hero{ gap: .35rem; }
  .player{ width: min(100%, max(320px, calc((100svh - 22rem) * 16 / 9))); }
  .btn-steam{ padding: .72rem 1.65rem; font-size: .98rem; }
  .cta{ gap: .45rem; }
  .cta-note{ font-size: .73rem; }
  .social{ padding: .5rem 1.1rem; font-size: .84rem; }
  .foot{ font-size: .68rem; }
  .notice{ font-size: .73rem; padding: .45rem .8rem; }
}

@media (max-width: 560px){
  .wrap{ gap: .8rem; padding: 2.9rem .9rem 1.3rem; }
  .cta{ width: 100%; }
  .btn-steam{ width: 100%; justify-content: center; padding: .85rem 1.25rem; }
  .socials{ flex-direction: column; }
  .social{ justify-content: center; width: 100%; }
}

@media (max-width: 700px){
  .bg{ background-position: 58% center; }
}

@media (max-width: 560px) and (max-height: 780px){
  .wrap{ gap: .3rem; padding: 2.95rem .85rem .7rem; }
  h1{ font-size: clamp(1.45rem, 6.8vw, 1.95rem); }
  .eyebrow{ font-size: .54rem; letter-spacing: .28em; text-indent: .28em; }
  .tagline{ font-size: .76rem; }
  .hero{ gap: .22rem; }
  .cta{ gap: .28rem; }
  .cta-note{ font-size: .66rem; }
  .btn-steam{ padding: .62rem 1rem; font-size: .9rem; }
  .socials{ gap: .32rem; }
  .social{ padding: .3rem .9rem; font-size: .76rem; }
  .foot{ font-size: .6rem; }
  .notice{ font-size: .68rem; }
  .yt-link-row{ font-size: .72rem; gap: .26rem; }
  .yt-link{ font-size: .72rem; }
  .pf-text{ display: none; }
}

@media (max-aspect-ratio: 3/4){
  .bg{ background-position: 62% center; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn-steam:hover, .social:hover, .play:hover .play-btn{ transform: none; }
}