/*
 * Ninja Arcade — core container styles.
 *
 * Shared shell rules for every arcade game. Per-game styles live in
 * games/<slug>/<slug>.css and are scoped to .ninja-arcade-<slug>.
 */

.ninja-arcade {
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    margin: var(--sprk-space-6, 24px) auto 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
}

.ninja-arcade *,
.ninja-arcade *::before,
.ninja-arcade *::after {
    box-sizing: border-box;
}

.ninja-arcade img {
    max-width: none;
}

/*
 * When an arcade container is auto-injected into Kadence's .page-load-status,
 * hide it until the infinite-scroll feed actually reaches its final state.
 * Kadence shows .page-load-status briefly during every in-flight page request;
 * without this gate, the game would flash into view on every scroll load and
 * then vanish again once the append completes.
 *
 * The library toggles `display: block` / `display: none` as an inline style
 * on .infinite-scroll-last and .infinite-scroll-error; :has() with an
 * attribute match lets CSS alone handle the visibility swap.
 */
.page-load-status .ninja-arcade {
    display: none;
}

.page-load-status:has(.infinite-scroll-last[style*="block"]) .ninja-arcade,
.page-load-status:has(.infinite-scroll-error[style*="block"]) .ninja-arcade {
    display: block;
}