/* Live version of the trailer end card. All geometry scales with the 16:9 screen. */
@font-face{font-family:RoadsterPixel;src:url('assets/fonts/VT323-Regular.ttf') format('truetype');font-display:swap}
.viewport{container-type:inline-size}
.viewport:has(.title-screen:not([hidden])){overflow:hidden}
.intro.title-screen{background:transparent;isolation:isolate;overflow:hidden}
#title-atmosphere{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 62%,#391019 0%,#0e0e15 48%,#07080c 75%);z-index:-1}
.title-grid{position:absolute;left:-26.0417%;right:-26.0417%;top:59.2593%;height:87.963%;transform:perspective(27.0833cqw) rotateX(61deg);transform-origin:center top;background-image:linear-gradient(#f53d3b70 1px,transparent 1px),linear-gradient(90deg,#f53d3b55 1px,transparent 1px);background-size:6.25cqw 5.2083cqw;animation:title-grid-travel 2.8s linear infinite}
.title-horizon{position:absolute;top:58.9815%;width:100%;height:.15625cqw;background:#ff3c32;box-shadow:0 0 2.0833cqw .5208cqw #ff3c3266}
.title-star{position:absolute;background:#d9e6e8;opacity:.3;animation:title-twinkle 4s ease-in-out infinite}
.title-tagline,.title-instructions{position:absolute;left:0;width:100%;font-family:RoadsterPixel,monospace;font-weight:400;line-height:1;text-align:center;z-index:6;text-shadow:0 0 .7cqw #9fe7e61c;pointer-events:none}
.title-tagline{top:7.5%;font-size:1.8cqw;line-height:1.35;letter-spacing:.13cqw;color:#9fe7e6}
.title-tagline span{color:#f8f2df}
.title-instructions{top:84.4%;font-size:1.71875cqw;letter-spacing:.15625cqw;color:#9fe7e6}
.title-screen #start{top:76.3%;bottom:auto;left:50%;transform:translate(-50%,-50%);border:.15625cqw solid #f8f2df;border-radius:0;background:#080a0daa;color:#f8f2df;box-shadow:none;font:400 3.22917cqw/1 RoadsterPixel,monospace;letter-spacing:.15625cqw;padding:.625cqw 2.0833cqw;min-width:0;min-height:0;text-align:center;text-shadow:0 0 .5cqw #f8f2df22;animation:title-button-arrive .4s ease-out both;transition:background .18s,box-shadow .18s,color .18s}
.title-screen #start:hover{transform:translate(-50%,-50%);background:#f8f2df;color:#101014;box-shadow:0 0 1.6cqw #ff3c3240;text-shadow:none}
.title-screen #start:active{transform:translate(-50%,-48%);box-shadow:none}
.title-screen #start:focus-visible{outline:.16cqw solid #9fe7e6;outline-offset:.42cqw}
.title-screen::after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px);box-shadow:inset 0 0 7cqw #0009;opacity:.65}
#intro-animation::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0004 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.intro:not(.title-screen) #title-atmosphere,.intro:not(.title-screen) .title-tagline,.intro:not(.title-screen) .title-instructions{display:none}
.title-screen.leaving{animation:title-depart .78s ease-in both;pointer-events:none}
.title-screen.leaving .title-tagline,.title-screen.leaving .title-instructions{opacity:0;transition:opacity .2s}
@keyframes title-grid-travel{to{background-position:0 5.2083cqw}}
@keyframes title-twinkle{0%,100%{opacity:.15}50%{opacity:.45}}
@keyframes title-button-arrive{from{opacity:0}to{opacity:1}}
@keyframes title-depart{0%,25%{opacity:1}100%{opacity:0}}
@media(max-width:480px){.title-screen #start{font-size:3.7cqw;padding:1.2cqw 2.6cqw;min-height:36px}.title-instructions{top:87%;font-size:2cqw}}
@media(prefers-reduced-motion:reduce){.title-grid,.title-star,.title-screen #start,.title-screen.leaving{animation:none}.title-screen.leaving{opacity:0}}

/* The title fills its bezel. The instrument tray unfolds only on Start. */
.arcade{--instrument-height:116px}
.arcade .console{overflow:hidden;height:var(--instrument-height);transition:height .72s cubic-bezier(.22,1,.36,1),padding .72s,border-color .5s;visibility:visible}
.arcade:has(.title-screen:not([hidden]):not(.leaving)) .console{height:0;padding-top:0;padding-bottom:0;border-top-color:transparent;border-top-width:0;visibility:hidden;pointer-events:none}
.arcade:has(.title-screen.leaving:not([hidden])) .console{visibility:visible;pointer-events:none}
.console-right{transition:opacity .4s .6s,transform .5s .55s;opacity:1;transform:translateY(0)}
.arcade:has(.title-screen:not([hidden])) .console-right{opacity:0;transform:translateY(12px)}
@media(max-width:800px){.arcade{--instrument-height:98px}}
@media(max-width:480px){.title-tagline{font-size:2.1cqw;top:6.5%}}
@media(prefers-reduced-motion:reduce){.arcade .console,.console-right{transition:none}}

/* The player owns the idle dimming and fade so the first tap never swaps logos. */