#lc-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #003B2E;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

#lc-loader.lc-active {
    opacity: 1;
    pointer-events: all;
}

#lc-loader .lc-shield {
    width: min(380px, 58vw);
    height: auto;
    display: block;
}

/* Contorno del escudo: se "dibuja" al activarse */
#lc-loader.lc-active .shield-outline {
    stroke-dasharray: var(--lc-path-len, 1500);
    stroke-dashoffset: var(--lc-path-len, 1500);
    animation: lc-draw 1.1s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}

@keyframes lc-draw {
    to { stroke-dashoffset: 0; }
}

/* Tiles del tablero: aparecen en cascada tras el contorno */
#lc-loader.lc-active .shield-group path:not(.shield-outline) {
    opacity: 0;
    animation: lc-tile 0.3s ease-in-out forwards;
    animation-delay: calc(1.1s + var(--lc-i, 0) * 0.022s);
}

@keyframes lc-tile {
    to { opacity: 1; }
}