/* Web-host-only styles: the loading indicator and Blazor's error banner. Player styles live in the RCL. */

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--tw-border, #ddd); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--tw-accent, #7a4b1f); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-family: system-ui, sans-serif; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; padding: 0.6rem 1.25rem; background: lightyellow; color: #222; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); font-family: system-ui, sans-serif; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }