@font-face {
  font-family: StartupPixel;
  src: url("assets/assets/fonts/gong-gothic/GongGothic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
#splash {
  --startup-text-scale: 1;
  position: fixed; inset: 0; z-index: 9999; display: flex;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow: auto; color: #ffe4af; background: #593d2b;
  font-family: StartupPixel, "Malgun Gothic", sans-serif; font-weight: 700;
}
#splash::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(#0f160d88, #0f160d88),
    url("assets/assets/images/exploration-hub-v1.webp") center/cover;
  image-rendering: pixelated;
}
.splash-card {
  width: min(100%, 480px); margin: auto; flex-shrink: 0; padding: 24px; text-align: center;
  background: #593d2b; border: 4px solid #b58a59;
  box-shadow: 0 0 0 3px #3c291d, inset 0 0 0 2px #8d633b;
}
#splash-img { display: block; margin: 0 auto 24px; width: 128px; height: 128px;
  object-fit: contain; image-rendering: pixelated; }
#splash-title { font-size: calc(36px * var(--startup-text-scale)); line-height: 1.35;
  overflow-wrap: anywhere; }
.splash-message { display: grid; place-items: center; min-height: 2.8em; margin-top: 12px;
  font-size: calc(14px * var(--startup-text-scale)); line-height: 1.35; }
.splash-message > span { grid-area: 1 / 1; }
.splash-reserve { visibility: hidden; }
.splash-loader { display: flex; justify-content: center; gap: 4px; height: 16px; margin-top: 20px;
  visibility: hidden; }
.splash-loader i { width: 10px; height: 16px; background: #d8b17a; }
#splash[data-phase="loading"] .splash-loader { visibility: visible; }
#splash[data-phase="loading"] .splash-loader i { animation: camp-light 1.2s steps(4, end) infinite; }
.splash-loader i:nth-child(2) { animation-delay: .15s !important; }
.splash-loader i:nth-child(3) { animation-delay: .3s !important; }
.splash-loader i:nth-child(4) { animation-delay: .45s !important; }
@keyframes camp-light { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
#splash-retry { margin: 0 auto; padding: 10px 16px; border: 3px solid #b58a59;
  background: #593d2b; color: #ffe4af; font: inherit; cursor: pointer; min-height: 48px; }
#splash[data-phase="error"] .splash-loader { display: none; }
@media (max-height: 420px) and (min-width: 480px) {
  .splash-card { display: flex; align-items: center; gap: 24px; }
  #splash-img { width: 80px; height: 80px; margin: 0; flex: none; }
  .splash-words { flex: 1; min-width: 0; }
  #splash-title { font-size: calc(26px * var(--startup-text-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  #splash[data-phase="loading"] .splash-loader i { animation: none; }
}