/*
 * The start screen of the installed app, the offline screen and the reset page
 * (design system, screens "Home-screen app"; the admin site's twin in black and white, comic-bw tokens): the one sunburst of the top bar, the
 * stack of comics from the icon at the centre, the name in the wordmark's
 * lettering. One sheet for all three and for the "Updating..." screen the app
 * draws itself (packages/web-kit/src/start-screen.ts). It is its own small
 * file, linked from the page's head, so the first paint needs no script, and
 * the worker keeps it with the app's files. Its colours are the design tokens'
 * (packages/ui/src/styles/tokens.css); a guard test (splash.test.ts) says so.
 */
.start-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  text-align: center;
}
/* The rays, glow and dots are the shared sunburst's (sunburst.css, worn as a class); only the light's place is the screen's own. */
.start-screen.sunburst--page {
  --sunburst-x: 42%;
  --sunburst-y: 46%;
  --sunburst-reach-x: 70%;
  --sunburst-reach-y: 70%;
}
.start-screen--shown,
.start-screen[data-screen] {
  display: flex;
}
@media (display-mode: standalone) {
  .start-screen {
    display: flex;
  }
}
.start-screen img {
  width: min(52vmin, 240px);
  height: auto;
  aspect-ratio: 1;
}
.start-screen-word {
  margin: 0;
  font-family: Bangers, Anton, Impact, sans-serif;
  font-size: clamp(34px, 9vmin, 54px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d2d2d2;
  transform: rotate(-3deg) skewX(-8deg);
  text-shadow:
    -2px -2px 0 #111111,
    2px -2px 0 #111111,
    -2px 2px 0 #111111,
    2px 2px 0 #111111,
    0 -2px 0 #111111,
    0 2px 0 #111111,
    -2px 0 0 #111111,
    2px 0 0 #111111,
    3px 3px 0 #111111,
    4px 4px 0 #111111,
    5px 5px 0 #111111;
}
.start-screen-title {
  margin: 8px 0 0;
  font-family: Bangers, Anton, Impact, sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow:
    -1px -1px 0 #111111,
    1px -1px 0 #111111,
    -1px 1px 0 #111111,
    1px 1px 0 #111111,
    2px 2px 0 #111111;
}
.start-screen-note {
  margin: 0;
  max-width: 28em;
  font-family: 'Barlow Condensed', Barlow, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-shadow:
    -1px -1px 0 #111111,
    1px -1px 0 #111111,
    -1px 1px 0 #111111,
    1px 1px 0 #111111,
    0 0 4px #111111;
}
.start-screen-button {
  min-height: 48px;
  margin-top: 6px;
  padding: 8px 22px 6px;
  font-family: Bangers, Anton, Impact, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #111111;
  background: #d2d2d2;
  border: 3px solid #111111;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #111111;
  cursor: pointer;
}
.start-screen-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}