/* Loaded before the game module so even the first paint is covered. */
body.is-loading #app, body.is-loading #hud-overlay { visibility: hidden; }
#game-loading {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 24px; box-sizing: border-box; color: #fff1cb; text-align: center;
  font-family: 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  background: radial-gradient(ellipse at 50% 35%, #39204f 0%, #170e29 48%, #0c0716 100%);
}
.loading-card { width: min(100%, 340px); }
.loading-crest {
  display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 28px;
  border: 1px solid #d5ad58; border-radius: 24px; font-size: 60px; color: #ffe393;
  background: linear-gradient(145deg, #422553, #1b102b);
  box-shadow: 0 0 60px #dfad4226, inset 0 0 22px #dfad4217;
}
.loading-eyebrow { font-size: 10px; letter-spacing: 4px; color: #c9ac79; margin: 0 0 10px; }
.loading-card h1 { font-size: 32px; letter-spacing: 8px; margin: 0; font-weight: 700; }
.loading-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: #d5ad58; font-size: 10px; }
.loading-divider::before, .loading-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #9c774e); }
.loading-divider::after { transform: rotate(180deg); }
#loading-status { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
.loading-track { height: 4px; border-radius: 8px; overflow: hidden; background: #ffffff14; }
.loading-track span { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, #a57136, #ffe6a0); border-radius: inherit; animation: castle-loading 1.8s ease-in-out infinite alternate; }
.loading-hint { margin: 16px 0 0; font-size: 11px; color: #a99ab9; letter-spacing: 2px; }
#loading-retry { margin-top: 20px; min-height: 44px; padding: 10px 24px; border: 1px solid #d5ad58; border-radius: 12px; background: #39204f; color: #fff1cb; cursor: pointer; }
#game-loading.loading-error .loading-track { display: none; }
@keyframes castle-loading { from { transform: translateX(0); } to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .loading-track span { animation: none; width: 100%; } }