/* Boot screen: black, our owl mark, a looping block loader. The whole screen is the button. */
.boot {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: #000; color: var(--white); cursor: pointer;
  transition: opacity 0.6s ease;
}
.boot.is-leaving { opacity: 0; pointer-events: none; }
.boot:focus-visible { outline: none; }
.boot__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.boot__mark { width: 120px; height: 120px; }
.boot__name { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: 0.01em; }
.boot__name span { color: #f0a020; font-style: italic; }

.boot__bar {
  position: relative; width: 170px; height: 18px; margin-top: 18px;
  border: 2px solid #b2b2b2; border-radius: 5px; overflow: hidden;
}
.boot__bar span {
  position: absolute; top: 3px; width: 10px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, #8fb4ff, #2c5ad8 60%, #1b3fa8);
  animation: boot-blocks 2s linear infinite;
}
.boot__bar span:nth-child(2) { animation-delay: 0.12s; }
.boot__bar span:nth-child(3) { animation-delay: 0.24s; }
@keyframes boot-blocks { from { left: -30px; } to { left: 180px; } }

.boot__hint { margin: 6px 0 0; font-size: 13px; color: #9a9a9a; animation: boot-hint 2s ease-in-out infinite; }
@keyframes boot-hint { 50% { opacity: 0.35; } }
.boot__note {
  position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  margin: 0; text-align: center; font-size: 11px; color: #6f6f6f;
}