/* loading: a game's plate. Fast in, slow out. */
#osloading { position: fixed; inset: 0; z-index: 88; background: #0E0F12; color: var(--bone); opacity: 0; transition: opacity .28s ease; overflow: hidden; }
#osloading.on { opacity: 1; }
#osloading.off { opacity: 0; pointer-events: none; transition: opacity .9s ease; }
#osloading .ld-plate { position: absolute; inset: 0; }
#osloading .ld-plate img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center 40%; filter: brightness(.9); transform: scale(1); animation: ld-drift 9s ease-out both; }
#osloading.no-plate .ld-plate img { display: none; }
#osloading .ld-loop { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center 40%; filter: brightness(.9); opacity: 0; transition: opacity .6s ease; }
#osloading.has-loop .ld-loop { opacity: 1; }
@keyframes ld-drift { from { transform: scale(1.03) translateY(.6%); } to { transform: scale(1) translateY(0); } }
#osloading .ld-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 15, 18, .96) 0, rgba(14, 15, 18, .72) 24%, rgba(14, 15, 18, .12) 52%, rgba(14, 15, 18, .3) 100%); }
#osloading .ld-copy { position: absolute; left: 56px; right: 56px; bottom: 64px; display: grid; gap: 14px; max-width: 900px; }
#osloading .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
#osloading .eyebrow .dot { width: 5px; height: 5px; background: #2BB673; box-shadow: 0 0 10px #2BB673; animation: ld-blink 1.2s steps(1) infinite; }
@keyframes ld-blink { 50% { opacity: .35; } }
#osloading .ld-title { margin: 0; font-family: 'Doto', var(--mono); font-weight: 800; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--bone); text-shadow: 0 0 24px rgba(255, 250, 248, .18); }
#osloading .ld-bar { position: relative; height: 2px; background: rgba(255, 250, 248, .14); margin-top: 4px; }
#osloading .ld-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--bone); box-shadow: 0 0 12px rgba(255, 250, 248, .55); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .9, .2, 1); }
#osloading .ld-pct { position: absolute; right: 0; bottom: 10px; font-family: 'Doto', var(--mono); font-weight: 800; font-size: 22px; line-height: 1; color: var(--bone); }
#osloading .ld-pct::after { content: '%'; font-size: 12px; margin-left: 2px; color: var(--bone-45); }
#osloading .ld-tip { margin: 6px 0 0; font: 400 13px/1.5 var(--sans); color: var(--bone-70); max-width: 620px; }
#osloading .ld-kagi { position: absolute; right: 56px; bottom: 60px; }
#osloading .ld-hint { position: absolute; right: 56px; top: 28px; margin: 0; font: 500 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 250, 248, .3); }
#osloading .ld-hint kbd { font: inherit; padding: 2px 4px; border: 1px solid rgba(255, 250, 248, .2); border-radius: 3px; margin-right: 6px; }
body.loading #oshand { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #osloading .ld-plate img, #osloading .eyebrow .dot { animation: none; } #osloading .ld-fill { transition: none; } }
@media (max-width: 700px) { #osloading .ld-copy { left: 24px; right: 24px; bottom: 96px; } #osloading .ld-kagi { right: 24px; bottom: 32px; } #osloading .ld-hint { right: 24px; } }