/* The invisible preparation keeps CSS/font loading out of the visible dialog. */
.ui.modal.modal-tarjetas.is-card-preparing {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none;
}
.ranking-card-loading[hidden] { display: none; }
.ranking-card-loading {
    /* Host bridge: Fomantic's dimmer occupies layer 1000. */
    z-index: 2001;
    position: fixed;
    inset-block-end: var(--space-4, 16px);
    inset-inline-start: 50%;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    max-inline-size: calc(100% - var(--space-4, 16px) * 2);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--overlay-border, #dedede);
    border-radius: var(--radius-sm, 2px);
    background: var(--overlay-bg, #fafafa);
    color: var(--overlay-fg, #151515);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: var(--text-sm, 13px);
    line-height: var(--lh-normal, 1.45);
}
.ranking-card-loading button {
    appearance: none;
    min-block-size: var(--ctrl-block-h-md, 44px);
    padding-inline: var(--space-2, 8px);
    border: 1px solid var(--border-default, #aaa);
    border-radius: var(--radius-sm, 2px);
    background: var(--bg-surface, #fafafa);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.ranking-card-loading button:focus-visible { outline: 2px solid var(--focus-ring, #6251a1); outline-offset: 2px; }