/* burst.css — Burst & GIF mode (burst.js): the "move!" badge during the
   first countdown and the GIF panel on the final screen. */

/* ---- Recording badge (first countdown) ---- */
#burst-rec {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    left: 50%;
    transform: translate(-50%, -8px);
    z-index: 1200;
    padding: 8px 18px 8px 34px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font: 800 clamp(14px, 1.6vw, 26px)/1.2 'PhotoboothFont', Arial, sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}
#burst-rec::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: 50%;
    background: #ff3b5c;
    animation: burst-blink 1s steps(2, start) infinite;
}
#burst-rec.on { opacity: 1; transform: translate(-50%, 0); }
@keyframes burst-blink { to { visibility: hidden; } }

/* ---- Final screen: strip + GIF on one row (TV / desktop) ---- */
#final-strip-overlay.has-burst {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    column-gap: 4vw;
    row-gap: 18px;
}
#final-strip-overlay.has-burst .burst-break {
    flex-basis: 100%;
    height: 0;
}
/* layoutFinalPanel() sets max-width: 62% inline: leave room for the GIF */
#final-strip-overlay.has-burst #final-strip-img {
    max-width: 44% !important;
}

.burst-panel {
    --burst-ar: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 44%;
}
.burst-label {
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: 800 clamp(16px, 1.5vw, 26px)/1.2 'PhotoboothFont', Arial, sans-serif;
    letter-spacing: 0.12em;
}
.burst-media {
    display: flex;
    align-items: center;
    justify-content: center;
}
.burst-gif,
.burst-wait {
    display: block;
    /* leaves room for the (bigger) QR under it and the buttons below */
    width: min(28vw, calc((100vh - 400px - clamp(60px, 9vh, 120px)) * var(--burst-ar)));
    max-width: 100%;
    aspect-ratio: var(--burst-ar);
    height: auto;
    object-fit: contain;
    border: 6px solid #00d9ff;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.5), 0 0 60px rgba(212, 61, 140, 0.4);
    background: #000;
    box-sizing: border-box;
}
.burst-wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #fff;
    font: 700 clamp(14px, 1.3vw, 22px)/1.3 'PhotoboothFont', Arial, sans-serif;
    text-align: center;
    padding: 12px;
}
.burst-spin {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #00d9ff;
    animation: burst-spin 0.9s linear infinite;
}
@keyframes burst-spin { to { transform: rotate(360deg); } }

.burst-foot {
    display: flex;
    align-items: center;
    gap: 12px;
}
.burst-qr {
    /* was 84-150 px (≈90 px on the 1280x720 kiosk): too small to scan.
       The white margin is the QR "quiet zone" phones need to lock on. */
    width: clamp(150px, 24vh, 300px);
    height: auto;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    image-rendering: pixelated;
}
.burst-qr-text {
    color: #fff;
    font: 700 clamp(14px, 1.2vw, 22px)/1.2 'PhotoboothFont', Arial, sans-serif;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

/* ---- Phones (mobile.css lays the final screen out as a column) ---- */
html.is-mobile #final-strip-overlay.has-burst {
    flex-wrap: nowrap;
}
html.is-mobile #final-strip-overlay.has-burst .burst-break {
    display: none;
}
html.is-mobile #final-strip-overlay.has-burst #final-strip-img {
    max-width: 100% !important;
}
html.is-mobile .burst-panel {
    flex: 0 0 auto;
    max-width: 100%;
}
html.is-mobile .burst-gif,
html.is-mobile .burst-wait {
    width: min(100%, 420px, calc((100dvh - 220px) * var(--burst-ar)));
}
html.is-mobile .burst-save {
    padding: 12px 24px;
    font-size: 20px;
}
@media (orientation: landscape) {
    html.is-mobile #final-strip-overlay.has-burst {
        flex-wrap: wrap;
    }
    html.is-mobile #final-strip-overlay.has-burst #final-strip-img {
        max-width: 42% !important;
    }
    html.is-mobile .burst-panel {
        max-width: 34%;
    }
    html.is-mobile .burst-gif,
    html.is-mobile .burst-wait {
        width: min(100%, calc((100dvh - 120px) * var(--burst-ar)));
    }
}

/* ---- Printing the final screen: the strip only, never the GIF ---- */
@media print {
    #final-strip-overlay #final-burst,
    #final-strip-overlay #final-burst *,
    #final-strip-overlay .burst-break,
    #burst-rec {
        display: none !important;
        visibility: hidden !important;
    }
}