/* JS / 本 CSS が来る前の地色と起動文言。
   html/body/#root に色を残すと、レイヤー無しのため本 CSS（@layer base）より強く、
   OS ダーク × アプリライトで本文が地色と同色になり消える。data-theme が付いたら手放す。 */
html,
body {
  margin: 0;
}

html:not([data-theme]),
html:not([data-theme]) body,
html:not([data-theme]) #root,
html:not([data-theme]) .auth-boot {
  min-height: 100dvh;
  background: #e6e0d6;
  color: #2b261f;
  font-family: system-ui, sans-serif;
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]),
  html:not([data-theme]) body,
  html:not([data-theme]) #root,
  html:not([data-theme]) .auth-boot {
    background: #2c2926;
    color: #f4ede4;
  }
}

.auth-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 16px 20px;
}

.auth-boot-status {
  margin: 0;
  text-align: center;
}

.auth-boot-retry {
  color: inherit;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  animation: boot-retry-show 0s linear 8s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .auth-boot-retry {
    animation: none;
    opacity: 1;
    pointer-events: auto;
  }
}

.auth-boot-retry[data-visible="1"] {
  opacity: 1;
  pointer-events: auto;
}

@keyframes boot-retry-show {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}