/* Gambler's fallacy (/gamblers-fallacy): what is its own - the canvas stage and what is drawn over it. The buttons and the accent
   come from the app kit (css/app-kit, docs/app-kit.md); the sliders and checkboxes are the shared app controls.
   Loaded only on this app's page (StylePaths). The stage is the canvas's own box, not the kit's padded
   .ak-stage column; the phone layout is the shared one for canvas apps in landing/seo-pages.css. */

.filter-landing-stage.coinflip-landing-stage {
    position: relative;
    display: block;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    background-image: none;
}

.filter-landing-stage.coinflip-landing-stage {
    background-color: #f4efe6;
}

.coinflip-landing-stage:focus {
    outline: none;
}

.coinflip-landing-stage:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.7);
    outline-offset: -2px;
}

.coinflip-landing-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.coinflip-landing-app .ak-btn.coinflip-flip-btn.coinflip-flip-btn--go {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

body.filter-app-mode .coinflip-landing-stage {
    box-shadow: none;
}

@media (max-width: 600px) {
    .filter-landing-stage.coinflip-landing-stage {
        aspect-ratio: 3 / 4;
    }

    body.filter-app-mode .filter-landing-app.coinflip-landing-app:not(.is-panel-collapsed) > .filter-landing-stage.coinflip-landing-stage {
        aspect-ratio: 3 / 4;
        max-height: max(100dvw, calc(100dvh - var(--seo-chrome-height) - 11rem)) !important;
    }
}

.coinflip-landing-stage.coinflip-stage--transparent {
    background: var(--component-checkerboard);
}