/* Rotate-to-landscape gate (phones only, html.phone) and the loading screen with progress bar (every device). */
#gate, #loader { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 40%, #17171a 0%, #0d0d0f 62%); color: #f4f4f2; }
#gate { z-index: 100; gap: 26px; padding: 0 24px; text-align: center; }
#loader { z-index: 90; gap: 14px; }
html.phone.gate-on #gate { display: flex; }
html.loading:not(.gate-on) #loader { display: flex; }
html.loading #start { opacity: 0; pointer-events: none; }
html.phone.gate-on #pwaStatus, html.phone.gate-on #pwaDock, html.phone.gate-on #gearBtn { display: none !important; }

#gate svg { width: 132px; height: 132px; overflow: visible; }
#gate .ph { transform-origin: 66px 66px; animation: gateTurn 3.6s cubic-bezier(.6, .05, .25, 1) infinite; }
#gate .arc { animation: gateArc 3.6s ease-in-out infinite; }
@keyframes gateTurn { 0%, 18% { transform: rotate(0deg); } 52%, 82% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes gateArc { 0%, 12% { opacity: 0; } 30%, 60% { opacity: 1; } 78%, 100% { opacity: 0; } }
#gate p { font-size: 17px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { #gate .ph { animation: none; transform: rotate(-90deg); } #gate .arc { animation: none; opacity: 1; } }

#loader .row { width: min(280px, 64vw); display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 244, 242, .72); }
#loader .row b { font-weight: 700; color: #f4f4f2; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
#loader .track { width: min(280px, 64vw); height: 8px; border-radius: 3px; background: rgba(244, 244, 242, .12); border: 1px solid rgba(244, 244, 242, .16); overflow: hidden; }
#loader .track i { display: block; height: 100%; width: 100%; background: #d40000; transform-origin: left; transform: scaleX(0); transition: transform .25s ease-out; }
#loader.err .row span { color: #ffb400; }