/* Shared first-load, game-launch and recovery surface: no image downloads needed. */
.arcade-loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 45% 35%, #173a6980, transparent 65%), radial-gradient(ellipse at 90% 90%, #30245055, transparent 60%), #071229; color: #f3f7ff; font-family: Inter, system-ui, sans-serif; text-align: center; }
.arcade-loading[hidden] { display: none; }
.arcade-loading-brand { font-size: 28px; font-weight: 700; letter-spacing: .23em; text-indent: .23em; line-height: 1.2; }
.arcade-loading-copy { margin: 0; color: #aec8eb; font-size: 14px; line-height: 1.6; max-width: 300px; }
.arcade-loading-dots { display: flex; gap: 10px; height: 18px; align-items: center; }
.arcade-loading-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ffdb65; box-shadow: inset 0 1px #fff8, 0 2px 5px #0005; animation: arcade-loading-pulse 900ms ease-in-out infinite alternate; }
.arcade-loading-dots i:nth-child(2) { background: #75b4ff; animation-delay: 150ms; }
.arcade-loading-dots i:nth-child(3) { background: #ff8173; animation-delay: 300ms; }
.arcade-loading-actions { display: grid; gap: 12px; width: min(100%, 300px); margin-top: 16px; }
.arcade-loading-actions button, .arcade-loading-actions a { display: block; box-sizing: border-box; min-height: 48px; padding: 13px 18px; border: 1px solid #4a6b93; border-radius: 13px; background: #122b48; color: #d2e5ff; font: 600 14px Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.arcade-loading-actions .loading-retry { background: linear-gradient(#ffe17a, #f4bc35); color: #1c2533; border-color: #ffe58e; }
.arcade-loading-actions :is(button,a):focus-visible { outline: 2px solid #e4f2ff; outline-offset: 4px; }
.arcade-loading-actions :is(button,a):active { transform: scale(.97); }
.arcade-game-frame { opacity: 0; pointer-events: none; background: #071229; color-scheme: dark; transition: opacity 160ms ease-out; }
[data-game-load="ready"] > .arcade-game-frame { opacity: 1; pointer-events: auto; }
::view-transition { background: #071229; }
@keyframes arcade-loading-pulse { to { opacity: .45; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .arcade-loading-dots i { animation: none; } .arcade-game-frame { transition: none; } }