/* Keep live board geometry measurable beneath the illustrated loading screen. */
html.game-loading body > :not(#game-loading):not(#account-entry) { opacity: 0 !important; pointer-events: none !important; }
/* Modal backdrops live above the loader even when their dialog has opacity: 0. */
html.game-loading dialog::backdrop { background: transparent !important; backdrop-filter: none !important; }
#game-loading {
  position: fixed; inset: 0; z-index: 100000; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: center;
  box-sizing: border-box; padding: 32px 24px max(5vh, env(safe-area-inset-bottom));
  background: #050e19; color: #f2ebdb; text-align: center; font: 14px/1.5 system-ui, sans-serif;
  opacity: 1; transition: opacity 180ms ease-out;
}
html.game-loading-leaving #game-loading { opacity: 0; }
#game-loading[hidden], #game-loading-actions[hidden] { display: none; }
#game-loading .game-loading__art {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 43%; z-index: -3;
  /* Keep the full-screen artwork steady through image decode and page handoff. */
  transform: none; animation: none;
}
#game-loading::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #030a1500 40%, #030a1533 60%, #030a15ed 100%);
}
.game-loading__light {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, #70e5ff45, transparent 38%);
  mix-blend-mode: screen; animation: rift-light 4s ease-in-out infinite alternate;
}
.game-loading__motes {
  position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, #a2f2ffd9 0 1px, transparent 2px), radial-gradient(circle, #efcf9277 0 1px, transparent 2px);
  background-size: 193px 229px, 307px 173px; background-position: 20px 80px, 130px 40px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 65%);
  animation: rift-motes 12s linear infinite;
}
.game-loading__content { width: min(100%, 440px); text-shadow: 0 2px 12px #000; }
.game-loading__eyebrow { color: #d8bd87; font: 600 12px/1.4 system-ui, sans-serif; letter-spacing: .4em; }
#game-loading h1 { margin: 8px 0 20px; font: 500 clamp(30px, 3.4vw, 52px)/1.1 Georgia, serif; letter-spacing: .035em; }
#game-loading p { margin: 14px 0 0; color: #bfd0de; font: 13px/1.5 system-ui, sans-serif; }
.game-loading__bar { position: relative; width: min(80%, 280px); height: 2px; margin: auto; overflow: hidden; background: #9cbac433; }
.game-loading__bar::after {
  content: ''; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(90deg, transparent, #b8edff, #e4c589, transparent);
  animation: rift-loading 1.8s ease-in-out infinite;
}
#game-loading-actions { margin-top: 20px; display: flex; gap: 20px; align-items: center; justify-content: center; }
#game-loading button { padding: 10px 22px; border: 1px solid #8fb4c6; border-radius: 6px; background: #183b4c; color: #fff; font: inherit; cursor: pointer; }
#game-loading a { color: #dfc185; }
.game-loading__home { display: inline-flex; align-items: center; gap: 7px; color: #ffe5aa; text-decoration: none; font-weight: 600; }
.game-loading__home img { width: 42px; height: 42px; object-fit: contain; transition: filter .15s; }
.game-loading__home:hover img { filter: brightness(1.25); }
#game-loading :focus-visible { outline: 2px solid #dfc185; outline-offset: 4px; }
#game-loading[data-error] .game-loading__bar::after { animation: none; width: 100%; background: #bc8068; }
@keyframes rift-light { from { opacity: .25; } to { opacity: .85; } }
@keyframes rift-motes {
  0% { transform: translateY(3%); opacity: 0; }
  20%, 80% { opacity: .5; }
  100% { transform: translateY(-5%); opacity: 0; }
}
@keyframes rift-loading { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (max-height: 500px) { #game-loading { padding-bottom: 18px; } #game-loading h1 { margin: 4px 0 12px; font-size: 28px; } }
@media (prefers-reduced-motion: reduce) {
  #game-loading { transition: none; }
  #game-loading .game-loading__art, .game-loading__light, .game-loading__motes, .game-loading__bar::after { animation: none; }
  .game-loading__bar::after { width: 100%; }
}