html, body { min-height:100%; }

.title-screen {
  position:fixed;
  inset:0;
  z-index:10000;
  overflow:hidden;
  background:#090b08;
  touch-action:manipulation;
}

.title-screen-art {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}

.run-start-hotspot {
  position:absolute;
  right:2.2%;
  bottom:2.5%;
  width:22%;
  height:24%;
  min-width:120px;
  min-height:72px;
  padding:0;
  border:0;
  border-radius:28px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.run-start-hotspot:focus-visible {
  outline:4px solid #f0ca38;
  outline-offset:-8px;
}

.title-screen.is-leaving {
  animation:title-screen-exit 260ms ease-out forwards;
  pointer-events:none;
}

body.title-active {
  overflow:hidden;
  background:#090b08;
}

body.title-active #gameShell {
  visibility:hidden;
}

@keyframes title-screen-exit {
  to { opacity:0; transform:scale(1.015); }
}

@media (prefers-reduced-motion:reduce) {
  .title-screen.is-leaving { animation-duration:1ms; }
}

/* Preserve the whole 16:9 title artwork on taller portrait screens. */
@media (orientation:portrait) {
  .title-screen-art {
    object-fit:contain;
  }

  .run-start-hotspot {
    right:2%;
    bottom:calc((100vh - min(100vw * .5625, 100vh)) / 2 + 1%);
    width:25%;
    height:min(20vw, 120px);
  }
}