/* Title screen over the whole window: the painted key art (it carries the lettering) drifting slowly, a dark foot for the menu, the studio notice. */
.title-open, .title-open body { overflow: hidden; }
.title-screen { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: 1fr auto auto auto; justify-items: center; align-items: end; gap: 12px; padding: 0 16px max(14px, env(safe-area-inset-bottom)); overflow: hidden; background: #030812; color: #f4f7f8; isolation: isolate; }
.title-screen[hidden] { display: none; }
.title-screen::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../../../assets/games/space-junk.webp') 30% 60% / cover no-repeat; transform-origin: 30% 60%; animation: title-drift 36s ease-in-out infinite alternate; }
.title-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 8, 18, 0) 52%, rgba(3, 8, 18, .55) 74%, rgba(3, 8, 18, .94) 100%); }
@keyframes title-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.reduced-motion .title-screen::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .title-screen::before { animation: none; } }
.title-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.title-eyebrow { grid-row: 2; margin: 0; font-size: var(--sj-label, 12px); font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: #ffd447; text-shadow: 0 2px 6px #000; }
.title-menu { grid-row: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.title-menu .button { min-width: 190px; min-height: 54px; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }
.title-notice { grid-row: 4; margin: 0; font-size: var(--sj-label, 12px); color: #c9d6de; text-shadow: 0 1px 4px #000; text-align: center; }
@media (max-height: 520px) {
  .title-screen { gap: 6px; padding-bottom: 8px; }
  .title-eyebrow { display: none; }
  .title-menu { gap: 10px; }
  .title-menu .button { min-width: 150px; min-height: var(--sj-hit, 44px); font-size: 1rem; padding: 6px 12px; }
}
.high-contrast .title-screen::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .92) 100%); }