/* AfterBedtime retro interface: the TITLE SCREEN (first screen of a page load), the wipe between screens, and the small rules that keep the
   retro-only elements out of Classic and Modern. The title is index.html's static #title-screen, shown by <html class="ps-title"> under body.ps-ui
   (set before the first paint), and dismissed by ui-retro.js (any key, click or tap). Behind it is the world: the back of the house over the
   fence, at night, in the rain (main.js titleView). One pixel is --u, as everywhere in the retro sheets. */

/* ---- never visible outside the retro interface */
#title-screen { display: none; }
body:not(.ps-ui) #lobby-help, body:not(.ps-ui) .ps-made, body:not(.ps-ui) #ps-wipe { display: none !important; }
body:not(.ps1):not(.ps-ui) .settings-ui-row { display: none; }   /* (Modern: there is no interface to choose) */
body.ps-ui { background: #000; }

/* ---- the title screen */
html.ps-title body.ps-ui #title-screen { display: block; position: absolute; inset: 0; z-index: 5; cursor: default; }
html.ps-title body.ps-ui #lobby { visibility: hidden; }
body.ps-ui .title-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .56) 0 5%, rgba(0, 0, 0, .38) 5% 9%, rgba(0, 0, 0, .2) 9% 14%, transparent 14% 62%,
    rgba(0, 0, 0, .16) 62% 70%, rgba(0, 0, 0, .34) 70% 78%, rgba(0, 0, 0, .52) 78% 88%, rgba(0, 0, 0, .68) 88% 100%); }
/* the logo is a baked texture (tools/ui/bake-logo.mjs): 1 texel = 1 u, shown at a whole scale, hard-edged */
body.ps-ui .title-logo { position: absolute; left: 50%; top: var(--s8); width: calc(307 * var(--u)); height: calc(75 * var(--u)); margin-left: calc(-153 * var(--u));
  background: url(/img/logo-title.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
body.ps-ui .title-tag { position: absolute; left: 50%; top: calc(91 * var(--u)); width: calc(420 * var(--u)); margin: 0 0 0 calc(-210 * var(--u)); text-align: center; color: var(--tx); }
body.ps-ui .title-press { position: absolute; left: 0; right: 0; bottom: calc(12 * var(--u)); margin: 0; height: calc(26 * var(--u)); text-align: center; color: var(--tx-hi);
  font-size: var(--em2); line-height: calc(26 * var(--u)); text-shadow: var(--tsh2); }
body.ps-ui .title-press > span { animation: ps-blink 1s steps(1) infinite; }
html:not(.ps-title-ready) body.ps-ui .title-press :is(.tp-desk, .tp-touch) { display: none; }
html.ps-title-ready body.ps-ui .title-press .tp-load { display: none; }
html:not(.ps-title-ready) body.ps-ui .title-press .tp-load { color: var(--tx-dim); font-size: var(--em); animation: ps-blink 1.6s steps(1) infinite; }
html.ps-title-go body.ps-ui .title-press > span { animation: ps-blink .12s steps(1) infinite; }   /* the confirm: the line flashes, 60 ms on / 60 ms off */
body.ps-ui .title-hint { position: absolute; left: 0; right: 0; bottom: calc(4 * var(--u)); margin: 0; text-align: center; color: var(--tx-dim); }
html:not(.ps-title-ready) body.ps-ui .title-hint { visibility: hidden; }

/* phone (short screens): the small logo, the line at 1x under 380 px */
@media (max-height: 500px) {
  body.ps-ui .title-logo { top: var(--s10); width: calc(187 * var(--u)); height: calc(51 * var(--u)); margin-left: calc(-93 * var(--u)); background-image: url(/img/logo-title-s.png); }
  body.ps-ui .title-tag { top: calc(66 * var(--u)); width: calc(330 * var(--u)); margin-left: calc(-165 * var(--u)); }
  body.ps-ui .title-press { bottom: calc(22 * var(--u)); }
  body.ps-ui .title-hint { display: none; }
}
@media (max-height: 380px) {
  body.ps-ui .title-press { font-size: var(--em); line-height: var(--s14); height: var(--s14); text-shadow: var(--tsh); bottom: calc(18 * var(--u)); }
  body.ps-ui .title-logo { top: var(--s8); }
  body.ps-ui .title-tag { top: calc(62 * var(--u)); }
}

/* ---- the wipe between the title and the lobby: a flat black quad in 6 hard steps (a PS1 fade was never smooth) */
#ps-wipe { position: fixed; inset: 0; z-index: 100; background: #000; opacity: 0; pointer-events: none; }
#ps-wipe.out { animation: ps-wipe-out .25s steps(6) forwards; }
#ps-wipe.in { animation: ps-wipe-in .25s steps(6) forwards; }
@keyframes ps-wipe-out { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-wipe-in { from { opacity: 1; } to { opacity: 0; } }

/* ---- the pause page's red-pen line (ui-retro.js adds the element; only the paused card shows it) */
body.ps-ui .ctp-note { display: none; }
body.ps-ui .click-to-play[data-state="paused"] .ctp-note { display: block; margin: var(--s6) 0 0; color: var(--ink-red); text-shadow: none; }
@media (prefers-reduced-motion: reduce) { #ps-wipe { display: none; } }