.loading-screen-active { overflow: hidden; }
.loading-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 25%, #183e31, #071b17 75%); color: #fff8de; pointer-events: auto; touch-action: none; }
.loading-screen__card { width: min(360px, 100%); text-align: center; }
.loading-screen__logo-wrap { position: relative; margin: 0 auto 20px; width: min(270px, 85%); overflow: hidden; border-radius: 24px; animation: loading-logo-bob 2.8s ease-in-out infinite; }
.loading-screen__logo { display: block; width: 100%; height: auto; }
.loading-screen__logo-wrap::after { content: ''; position: absolute; inset: -30%; background: linear-gradient(110deg, transparent 42%, #fff6 50%, transparent 58%); transform: translateX(-120%); animation: loading-logo-glint 4s ease-in-out infinite; pointer-events: none; }
.loading-screen__title { margin: 0 0 12px; font-size: 1.5rem; }
.loading-screen__status { min-height: 2.8em; margin: 0 0 16px; line-height: 1.4; }
.loading-screen__progress { height: 12px; overflow: hidden; border-radius: 99px; background: #ffffff24; border: 1px solid #ffffff30; }
.loading-screen__fill { height: 100%; width: 0; background: linear-gradient(90deg, #83d960, #ffdc6a); border-radius: inherit; }
.loading-screen__percent { margin: 10px 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.loading-screen__hint { min-height: 2.8em; color: #e6edd0; font-size: .85rem; line-height: 1.4; }
@keyframes loading-logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes loading-logo-glint { 0%, 65% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.reduce-motion .loading-screen__logo-wrap, .reduce-motion .loading-screen__logo-wrap::after { animation: none; }
.reduce-motion .loading-screen__logo-wrap::after { display: none; }
@media (prefers-reduced-motion: reduce) { .loading-screen__logo-wrap, .loading-screen__logo-wrap::after { animation: none; } .loading-screen__logo-wrap::after { display: none; } }

@media (orientation: landscape) and (max-height: 600px) {
 .loading-screen { padding: 12px max(16px, env(safe-area-inset-left)); }
 .loading-screen__card { width: min(680px, 100%); display: grid; grid-template-columns: minmax(110px, 32%) 1fr; column-gap: 24px; align-items: center; }
 .loading-screen__logo-wrap { grid-column: 1; grid-row: 1 / 7; width: 100%; max-width: 200px; margin: 0; }
 .loading-screen__title, .loading-screen__status, .loading-screen__progress, .loading-screen__percent, .loading-screen__hint { grid-column: 2; }
 .loading-screen__title { font-size: 1.15rem; margin-bottom: 8px; }
 .loading-screen__status { min-height: 1.4em; margin-bottom: 10px; font-size: .9rem; }
 .loading-screen__hint { min-height: 1.4em; margin: 4px 0; }
}