/* The screen joldi.in's home page dashes into when a game is opened, and the
   same screen on the game's own page until the game is ready, so the two are
   one (the owner: "Let's just keep one flying loading screen"). launch.js
   draws it; its colours are the game card's --slab, --hi and --lo. It carries
   its own colours and letters, since it sits on pages with different ones. */
@font-face { font-family: "Lilita One"; src: url("fonts/lilita-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@keyframes jStreak { from { transform: translateX(calc(max(100vw, 420px) + 50px)); } to { transform: translateX(calc(-1 * max(100vw, 420px) - 50px)); } }
@keyframes jBob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-5px); } }
@keyframes jSweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.streak { position: absolute; left: 0; border-radius: 8px; animation: jStreak linear infinite; }

.launch {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(80% 50% at 50% 45%, var(--hi) 0%, var(--slab) 45%, var(--lo) 100%);
  transition: opacity 0.25s ease-out;
}
.launch.gone { opacity: 0; pointer-events: none; }
.launch .streak { background: rgba(255, 255, 255, 0.35) !important; }
.launch-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.launch-icon {
  width: 156px; height: 156px; border-radius: 40px; border: 4px solid #1B1446; box-shadow: 0 8px 0 #1B1446; object-fit: cover;
  background: #FFFCF2; animation: jBob 1s ease-in-out infinite; animation-delay: var(--bob, 0s);
}
.launch-name {
  font: 32px/1 "Lilita One", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif; color: #FFFCF2;
  -webkit-text-stroke: 6px #1B1446; paint-order: stroke fill; text-shadow: 0 4px 0 #1B1446; text-align: center;
}
.launch-bar {
  position: relative; width: 210px; height: 20px; border-radius: 12px; border: 3px solid #1B1446; background: rgba(27, 20, 70, 0.35);
  overflow: hidden; transform: skewX(-12deg);
}
/* How long a game takes to open is not known, so the bar says only that it is opening. */
.launch-bar i {
  display: block; height: 100%; width: 40%; background: linear-gradient(180deg, #FFF08A 0%, #FFD21F 55%, #F5A300 100%);
  animation: jSweep 0.9s ease-in-out infinite; animation-delay: var(--sweep, 0s);
}