@font-face{font-family:'Bowlby One';src:url('assets/menu/bowlby-one-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Oswald;src:url('assets/menu/oswald-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Oswald;src:url('assets/menu/oswald-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}

/* Match Phaser's 1920 × 1080 FIT canvas, without loading the game engine. */
.menu-frame{position:relative;width:100%;height:min(56.25vw,100svh);overflow:hidden;background:#05050a}
.menu-frame .mm-root{--paper:#F4EFE3;--magenta:#FF2EAA;--font-display:'Bowlby One','Oswald',sans-serif;--font-label:'Oswald',sans-serif;--font-body:'Rajdhani',sans-serif;width:1920px;height:1080px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--menu-scale,calc(100vw / 1920px)));transform-origin:center;overflow:hidden}
.mm-bg{background-image:url('assets/menu/city.webp')}
.mm-character-layer{background-image:url('assets/menu/character.webp')}
.mm-hand-card-layer{background-image:url('assets/menu/hand-card.webp')}
.mm-wordmark-art{--mm-wordmark-mask:url('assets/menu/wordmark.svg')}
.mm-wordmark-image{max-width:none}
.menu-release{font-family:var(--font-label);font-size:22px;font-weight:400;text-align:center;color:rgba(244,239,227,.7);margin:18px 0 0;line-height:1.5}
.menu-frame .motion-control{position:absolute;z-index:40;left:auto;right:22px;bottom:20px;font-family:Rajdhani,sans-serif;font-size:15px}
.mm-actions a{display:grid;text-decoration:none}
.mm-actions a:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.motion-paused .mm-root *,.motion-paused .mm-root *::before,.motion-paused .mm-root *::after{animation-play-state:paused!important}
.website-trailer{width:min(1020px,calc(100% - 48px));margin:0 auto;padding:85px 0}
.website-trailer h1{font-family:'Bowlby One',sans-serif;font-size:clamp(27px,3.2vw,46px);line-height:1.18;max-width:800px;margin:0 auto 18px;text-align:center;letter-spacing:-.025em}
.website-trailer>p{color:#c8c6dc;text-align:center;max-width:720px;margin:auto;font-size:22px;line-height:1.5}
.website-trailer .trailer{margin-top:36px}
.website-trailer .video-link{font-size:18px}
/* Portrait phones keep the same artwork and menu, with readable web-sized controls. */
@media(max-width:700px){
  .menu-frame{height:820px}
  .menu-frame .mm-root{width:100%;height:100%;left:0;top:0;transform:none;--hand-card-offset-x:51px;--hand-card-offset-y:58px}
  .mm-bg{background-position:70% center}
  .mm-character-layer,.mm-hand-card-layer{inset:auto;left:calc(50% - 720px);top:0;width:960px;height:540px}
  .mm-character-layer{animation:none}
  .mm-hand-card-layer{animation:none;transform:translate3d(var(--hand-card-offset-x),var(--hand-card-offset-y),0)}
  .mm-card-glow,.mm-title-sparks,.mm-black-fade{display:none}
  .mm-stage{background:linear-gradient(0deg,#05050a 32%,transparent 69%)}
  .mm-brand{left:24px;top:408px;width:calc(100% - 48px)}
  .mm-logotype{width:100%;animation:none}
  .mm-wordmark-art{height:auto;aspect-ratio:1707/299}
  .mm-subtitle{position:static;margin:14px 0 0;font-size:22px;gap:9px}
  .mm-actions{position:static;width:100%;margin-top:25px;gap:10px}
  .mm-actions::before{margin-bottom:4px}
  .mm-button{width:100%;height:58px;padding:0 14px;animation:none}
  .mm-button-label{font-size:20px;letter-spacing:0}
  .menu-release{font-size:18px;margin-top:12px}
  .menu-frame .motion-control{display:none}
  .mm-root *,.mm-root *::before,.mm-root *::after{animation:none!important}
  .website-trailer{padding-block:55px}
  .website-trailer>p{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.mm-root *,.mm-root *::before,.mm-root *::after{animation:none!important;transition:none!important}.mm-black-fade{opacity:0}.mm-hand-card-layer{transform:translate3d(var(--hand-card-offset-x),var(--hand-card-offset-y),0)}.mm-card-glow{transform:translate(-50%,-50%) rotate(-8deg);opacity:.44}}

/* Short, load-aware entrance. No perpetual motion or pause switch. */
.mm-character-layer,.mm-hand-card-layer{opacity:0;animation:none!important;transition:none}
.mm-character-layer{transform:none}
.mm-hand-card-layer{transform:translate3d(var(--hand-card-offset-x),var(--hand-card-offset-y),0)}
.hero-art-ready .mm-character-layer,.hero-art-ready .mm-hand-card-layer{opacity:1;animation:websiteArtReveal 900ms ease-out both!important}
@keyframes websiteArtReveal{from{opacity:0;filter:brightness(.75)}to{opacity:1;filter:brightness(1)}}
.mm-wordmark-art,.mm-wordmark-image,.mm-wordmark-art::before,.mm-wordmark-art::after,.mm-wordmark-sheen,.mm-sparks i{animation:none!important}
.mm-sparks{display:none}
.mm-card-glow{animation:none;opacity:.44;transform:translate(-50%,-50%) rotate(-8deg)}
.menu-release{position:absolute;top:-132px;left:0;width:100%;margin:0;text-align:center;color:#f4efe3;line-height:1.1}
.menu-release strong{display:block;font-family:'Bowlby One',sans-serif;font-size:52px;font-weight:400;text-transform:uppercase;letter-spacing:.015em;text-shadow:0 3px 0 #000}
.menu-release span{display:block;margin-top:10px;font-family:Oswald,sans-serif;font-size:30px;letter-spacing:.06em;color:#b8e7ed}
@media(max-width:700px){
  .menu-frame{height:950px}
  .menu-release{position:static;width:auto;margin:24px 0 0}
  .menu-release strong{font-size:30px}
  .menu-release span{font-size:21px;letter-spacing:.02em;margin-top:8px}
  .mm-actions{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){
  .hero-art-ready .mm-character-layer,.hero-art-ready .mm-hand-card-layer{animation:none!important}
}

/* Centre the release message in the space from the last button to the scene edge. */
.mm-actions{height:calc(1080px - var(--title-top) - var(--menu-top))}
.mm-actions a,.mm-actions::before{flex-shrink:0}
.mm-actions .menu-release{position:static;flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;margin:0;line-height:1.15}
.mm-actions .menu-release strong{font-size:44px}
.mm-actions .menu-release .steam-logo{display:block;width:180px;height:auto;margin:18px auto 0;flex-shrink:0}
@media(max-width:700px){
 .menu-frame{height:900px}
 .mm-brand{bottom:0;display:flex;flex-direction:column}
 .mm-actions{height:auto;flex:1;min-height:0}
 .mm-actions .menu-release{margin:0}
 .mm-actions .menu-release strong{font-size:28px}
 .mm-actions .menu-release .steam-logo{width:130px;margin-top:14px}
}