.page-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100000; overflow: hidden; pointer-events: none; background: #e8b86d30; }
.page-progress::after { content: ''; display: block; width: 35%; height: 100%; background: #f0c276; animation: page-progress 1.2s ease-in-out infinite; }
@keyframes page-progress { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
.loading-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; color: #f4eddd; background: #0b1823; }
.loading-screen p { margin: 0; max-width: 35ch; font-size: 1.1rem; line-height: 1.5; }
.loading-screen .loading-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.loading-screen button, .loading-notice button { min-height: 44px; padding: 10px 18px; }
body[data-game-loading] > .shell { visibility: hidden; }
.loading-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid #e8b86d40; border-top-color: #f0c276; border-radius: 50%; animation: loading-spin .8s linear infinite; flex-shrink: 0; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
button[data-action-loading] { position: relative; }
button[data-action-loading] > :not(.loading-caption) { visibility: hidden; }
button[data-action-loading] { color: transparent !important; }
.loading-caption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; color: var(--ink, #f4eddd); font-size: .875rem; line-height: 1.15; }
button.primary .loading-caption { color: #09131a; }
.loading-caption .loading-spinner { width: 16px; height: 16px; border-width: 2px; }
.loading-notice { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); box-sizing: border-box; z-index: 100001; background: #182a3b; color: #f4eddd; padding: 16px; border: 1px solid #e8b86d; border-radius: 12px; box-shadow: 0 8px 30px #0008; }
.loading-notice p { margin: 0 0 12px; line-height: 1.4; }
.loading-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.loading-screen[hidden], .page-progress[hidden], .loading-notice[hidden], .loading-screen [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .page-progress::after, .loading-spinner { animation: none; } .page-progress::after { width: 100%; } }
button[data-action-loading]::before { display: none !important; }
button[data-action-loading] { opacity: 1 !important; cursor: progress; }
button.primary .loading-caption .loading-spinner { border-color: #09131a30; border-top-color: #09131a; }