.loading { overflow: hidden; }
.loading-screen {
 position: fixed;
 inset: 0;
 z-index: 10;
 color: #87e9d8;
 overflow: hidden;
 touch-action: none;
}
.loading-screen[hidden] { display: none; }
.portal-veil { position: absolute; inset: 0; display: block; }
.portal-position { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.portal-expansion { width: 256px; height: 256px; transform-origin: center; will-change: transform; }
.portal-ring {
 display: block;
 width: 100%;
 height: 100%;
 filter: drop-shadow(0 0 3px #6ddcca55);
 animation: rune-orbit 14s linear infinite;
}
@keyframes rune-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
 .portal-ring { animation: none; }
}
.loading-progress {
 position: absolute;
 bottom: max(32px, env(safe-area-inset-bottom));
 left: 24px;
 right: 24px;
 text-align: center;
 font: 16px/1.5 'Trebuchet MS', 'Segoe UI', sans-serif;
 color: #c8dfd6;
}
.loading-screen[data-state='opening'] .loading-progress { visibility: hidden; }
.loading-screen[data-state='error'] {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 24px;
 padding: 32px;
 background: #101916;
 text-align: center;
 font: 18px/1.6 'Trebuchet MS', 'Segoe UI', sans-serif;
}
.loading-screen[data-state='error'] .portal-veil,
.loading-screen[data-state='error'] .portal-position,
.loading-screen[data-state='error'] .loading-progress { display: none; }
.loading-retry {
 padding: 12px 24px;
 border: 1px solid #87e9d8;
 background: #20362e;
 color: #eff7ec;
 font: inherit;
 cursor: pointer;
 touch-action: manipulation;
}
.loading-retry:focus-visible { outline: 2px solid #eff7ec; outline-offset: 4px; }