/* workspace/starcode/css/cosmos-title.css */
/* SC-TITLE-SCREEN: the title screen over everything on every load. The markup
   is authored in index.html (#title) so it covers the first paint; js/title-
   screen.js runs it and removes it on Enter. It sits above every game surface
   and below the boot log (#_bootOverlay, inline z-index 99999), so a phone
   that fails to boot still shows its diagnostics. */
.title-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10030; background: #000; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity 1500ms ease; }
.title-screen.title-leaving { pointer-events: none; }
.title-curtain { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 1500ms ease; pointer-events: none; }
.title-screen.title-leaving .title-curtain { opacity: 1; }
.title-screen.title-gone { opacity: 0; }
/* While the title shows, the game under it is laid out but not painted:
   nothing under an opaque screen needs drawing. The body class goes the
   moment Enter is pressed (js/title-screen.js leave), so the ship interior
   is already showing as the title fades over it. */
body.title-showing .view, body.title-showing header, body.title-showing #bgStarfield { visibility: hidden; }
/* The galaxy canvas fills the screen and climbs from black under JS control;
   the word canvas is a band across the upper part, placed and sized by JS.
   Neither takes the pointer, so a tap lands on the screen itself and goes on
   to the document, where the soundtrack starts. */
.title-screen canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#titleGalaxy { opacity: 0; }
/* The Enter control: a small tracked word in a thin ring, low on the screen,
   faded in by JS once the title is fully in. 44px tall for a thumb. No
   backdrop blur: a blur over two moving canvases is re-rendered every frame
   and is one of the things that made a phone crawl. */
.title-enter { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); min-height: 44px; padding: 12px 30px 12px 34px;
  font: 600 13px var(--font-body); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(226, 232, 240, 0.86);
  background: rgba(8, 12, 24, 0.55); border: 1px solid rgba(226, 232, 240, 0.28); border-radius: 999px; cursor: pointer; opacity: 0;
  transition: border-color 200ms ease, color 200ms ease; }
.title-enter:hover, .title-enter:focus-visible { border-color: rgba(245, 158, 11, 0.7); color: #fff; outline: none; }
.title-enter[hidden] { display: none; }
/* The launch gate (js/launch-gate.js): a faint bar that fills, then a faint
   LAUNCH control in the middle of the black screen. The tap on it is what
   lets a phone start the theme, so the title begins with its music. Colours
   match the LOG button: white at eighteen percent. */
.title-launch { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 2; }
.title-launch-bar { position: absolute; left: 50%; top: 50%; width: 120px; height: 1px; margin-left: -60px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.title-launch-bar i { display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.28);
  transform: scaleX(0); transform-origin: left center; }
.title-launch-bar[hidden], .title-launch-label[hidden] { display: none; }
.title-launch-label { position: absolute; left: 0; right: 0; top: calc(50% + 12px); margin: 0; text-align: center;
  font: 10px/1 monospace; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.18); }
.title-launch-btn { bottom: auto; top: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.34);
  border-color: rgba(255, 255, 255, 0.16); background: none; transition: opacity 700ms ease, border-color 200ms ease, color 200ms ease; }
.title-launch-btn:hover, .title-launch-btn:focus-visible { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.34); }