/* Peklo Čertovina — Pekelné selfie. Dark hellish theme, blackletter display font. */

:root {
    /* Peklo Čertovina brand — blood red + gold on near-black */
    --color-primary: #B11423;          /* blood red */
    --color-primary-hover: #8E0E1B;
    --color-secondary: #2A0A0A;        /* dark maroon */
    --color-secondary-hover: #1B0606;
    --color-accent: #E0B25A;           /* aged gold */
    --color-accent-soft: #C8923A;
    --color-background: #0B0606;        /* near-black */
    --color-surface: #1A0D0D;
    --color-surface-2: #240F0F;
    --color-text-primary: #F6E9DA;      /* warm parchment white */
    --color-text-secondary: #C7A89A;
    --color-border: #4A1E1E;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 6px 20px rgba(177, 20, 35, 0.5);

    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Grenze Gotisch", "Inter", system-ui, serif;
    --font-script: "Marck Script", "Dancing Script", cursive;   /* handwritten "pen" font for welcome (backup: Dancing Script) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    /* Hellfire glow rising from the bottom of the screen. */
    background-image:
        radial-gradient(120% 75% at 50% 115%, rgba(177, 20, 35, 0.55) 0%, rgba(120, 12, 20, 0.22) 38%, rgba(11, 6, 6, 0) 70%),
        radial-gradient(100% 80% at 50% -10%, #2A0A0A 0%, #0B0606 60%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Rising embers canvas — full viewport, behind the UI. */
#ember-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

.main-container,
.app-container {
    background-color: transparent !important;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
}

p {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* ====== LAYOUT ====== */

.main-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;          /* above the ember canvas */
}

.app-container {
    width: 100%;
    max-width: 393px;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    max-height: 950px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
}

/* ====== HEADER ====== */

.header {
    width: 100%;
    background: linear-gradient(180deg, rgba(20, 6, 6, 0.96) 0%, rgba(20, 6, 6, 0.78) 100%);
    border-bottom: 2px solid var(--color-accent-soft);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
}

.header-inner {
    height: 64px;
    max-width: 393px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
}

/* Flag logo top-left — doubles as the Home / reset trigger. */
.brand-logo {
    height: 52px;
    width: auto;
    cursor: pointer;
    user-select: none;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
    transition: transform 0.15s;
}
.brand-logo:hover { transform: translateY(1px) scale(1.04); }
.brand-logo:active { transform: scale(0.98); }

/* Centre wordmark in the nav bar — desktop only (hidden on phones). */
.header-center-logo { display: none; }

/* Language switch — zobrazena je POUZE aktivní vlajka; klik přepíná na druhý jazyk. */
.lang-switch { display: flex; align-items: center; gap: 8px; }

.lang-switch button {
    appearance: none;
    border: 2px solid var(--color-accent-soft);
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--color-accent-soft);
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    opacity: 1;
}

/* Neaktivní vlajka je kompletně skrytá — vidět je jen ta aktivní. */
.lang-switch button:not(.is-active) { display: none; }

.lang-switch button:hover { transform: scale(1.06); }
.lang-switch button:active { transform: scale(0.96); }

.lang-switch button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* ====== SCREENS ====== */

.screen {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-md);
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.screen.active { display: flex; }

h2 {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.0;
    text-align: center;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

h2 .accent { color: var(--color-accent); }

/* ====== BUTTONS ====== */

.button {
    display: inline-block;
    width: 100%;
    height: 54px;
    margin-top: var(--spacing-lg);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #C8182A 0%, var(--color-primary) 60%, #8E0E1B 100%);
    color: #FFF4E6;
    text-decoration: none;
    border: 1px solid rgba(224, 178, 90, 0.45);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: var(--shadow-primary);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
}

.button:hover {
    box-shadow: 0 8px 24px rgba(177, 20, 35, 0.6);
    transform: translateY(-1px);
}
.button:active { transform: scale(0.98); }

#retake-button { margin-top: var(--spacing-md); }

.button-secondary {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent-soft);
    box-shadow: none;
}
.button-secondary:hover {
    background: rgba(224, 178, 90, 0.12);
    box-shadow: none;
}

/* ====== WELCOME SCREEN ====== */

#welcome-screen {
    height: 100%;
    justify-content: center;
    padding: 24px 16px 92px;   /* +64px bottom = lifts parchment + button up ~32px (half the button height) */
}

/* Welcome = baked parchment image (pergamen s vypáleným textem a pečetí).
   Text + pečeť jsou součástí obrázku — žádné HTML overlay. */
.welcome-parchment {
    position: relative;
    width: 100%;
    max-width: 330px;
    margin: 0 auto var(--spacing-md);
}

#welcome-parchment-img {
    display: block;
    width: 100%;
    height: auto;
    /* Zachováme stejný drop-shadow jako původní pergamen. */
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

#start-button {
    height: 64px;
    font-size: 26px;
    letter-spacing: 0.04em;
    margin-top: 20px;
    max-width: 360px;
    /* Slow, calm "breathing" fiery glow so it clearly reads as the thing to tap. */
    animation: firePulse 4.2s ease-in-out infinite;
}

@keyframes firePulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(177, 20, 35, 0.5), 0 0 6px 0 rgba(255, 120, 30, 0.0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 8px 26px rgba(177, 20, 35, 0.7), 0 0 24px 6px rgba(255, 140, 45, 0.7);
        transform: scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    #start-button,
    #mood-confirm-button:not(:disabled),
    #result-confirm-button:not(:disabled) { animation: none; }
}

/* ====== LIMIT SCREEN (daily cap reached) ====== */

#limit-screen {
    height: 100%;
    justify-content: center;
    padding: 24px 16px 40px;
}

/* ====== GDPR SCREEN ====== */

#gdpr-screen { justify-content: flex-start; }

.gdpr-content {
    margin-top: var(--spacing-md);
    overflow-y: auto;
    max-height: 440px;
    text-align: left;
    padding-right: var(--spacing-sm);
}

.gdpr-content h2 {
    margin: 0 0 16px;          /* gap below the heading */
    font-size: clamp(12px, 3.9vw, 16px);
    text-align: left;
    white-space: nowrap;       /* keep the title on a single line */
    letter-spacing: 0;
}

.gdpr-content h4 {
    margin: 14px 0 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent);
    letter-spacing: 0.05em;
    font-family: var(--font-family);
}

.gdpr-content p,
.gdpr-content .gdpr-intro {
    color: var(--color-text-secondary);
    text-align: left !important;
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0 0 10px;
}

.gdpr-content .gdpr-list { list-style: none; padding: 0; margin: 0; }

.gdpr-content .gdpr-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    color: var(--color-text-secondary);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    border-top: 1px solid var(--color-border);
}
.gdpr-content .gdpr-list li:first-child { border-top: none; }
.gdpr-content .gdpr-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}
.gdpr-content .gdpr-list li strong { color: var(--color-text-primary); font-weight: 700; margin-right: 4px; }
.gdpr-content a { color: var(--color-accent); font-weight: 600; }

.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: var(--spacing-lg);
}
.button-group .button { margin-top: 0; height: 50px; }

/* ====== CAMERA SCREEN ====== */

/* Shared "content above the primary action" wrapper. Its fixed height anchors the
   primary action (shutter / Líbí / Sdílet) to the SAME screen height as the GDPR
   "Souhlasím" button (which is top-anchored by content flow), while space-evenly
   keeps even gaps between the items stacked above it. */
.step-top {
    width: 100%;
    flex-shrink: 0;        /* hold the anchor height; never collapse the gaps */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
}

/* ── FULLSCREEN CAMERA SCREEN ── */

/* Camera screen: breaks out of the centered app-container to span the full viewport width.
   Uses position:fixed so the camera feed fills edge-to-edge with no side gaps.
   The header (z-index:2) sits above this (z-index:1 inherited from .screen baseline,
   but we raise camera-screen to 1 and keep header at 2 so header stays on top). */
#camera-screen {
    padding: 0 !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    /* Full-bleed: leave room for the header at the top */
    position: fixed !important;
    top: 64px !important;    /* mobile header height */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Explicit pixel width prevents any inherited max-width from constraining the feed */
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 64px) !important;
    height: calc(100dvh - 64px) !important;
}

/* Fullscreen camera feed — base layer, fills #camera-screen edge-to-edge.
   position:absolute relative to #camera-screen (position:fixed, width:100vw).
   object-fit:cover crops to fill — no black bars, no letterboxing. */
.camera-fullscreen-feed {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #000 !important;
    /* VÝKON (kiosek 2026-07-22, bod 5): translateZ(0) + will-change drží video ve
       vlastní kompozitované vrstvě, takže se přes něj poloprůhledné scrimy jen
       skládají na GPU a nenutí překreslovat celý snímek. Zrcadlení (scaleX(-1))
       zůstává beze změny. */
    transform: scaleX(-1) translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    z-index: 1 !important;
    /* display NENÍ vynucené — viditelnost (živý feed vs zmrazená fotka) řídí JS
       přes style.display; jinak by display:block!important přebilo display:none
       a zmrazená fotka by trvale překrývala živý náhled. */
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
}

/* Frozen photo in review mode — same stacking as live feed */
#camera-frozen-photo.camera-fullscreen-feed {
    transform: scaleX(-1) !important;
}

/* Fullscreen countdown — covers the entire viewport (including header area) */
.camera-countdown-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    border-radius: 0 !important;
    z-index: 200 !important;   /* above header (z-index:2) and all camera layers */
    background: rgba(11, 6, 6, 0.72) !important;
}

/* Fullscreen flash */
.camera-flash-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 0 !important;
    z-index: 15 !important;
}

/* UI overlay group — sits above the camera feed, below countdown/flash
   Fades out during countdown shot, fades in on review */
.camera-ui-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;   /* children turn pointer-events back on where needed */
    /* Transition for shoot → countdown fade */
    opacity: 1;
    transition: opacity 0.45s ease;
}

.camera-ui-overlay.is-hidden {
    opacity: 0;
    pointer-events: none !important;
}

/* Gradient scrims — top and bottom bands.
   VÝKON (bod 5): scrimy jsou statické, ale leží přes živé video. translateZ(0) je
   povýší na vlastní kompozitované vrstvy — rasterizují se jednou a dál se přes
   video jen skládají. Vzhled beze změny. */
.camera-scrim {
    position: absolute;
    pointer-events: none;
    transform: translateZ(0);
}

.camera-scrim-top {
    top: 0;
    left: 0;
    right: 0;
    height: 340px;
    /* B) Scrims zeslabeny — bylo 1.0/0.95/0.72, nyní 0.72/0.60/0.38 */
    background: linear-gradient(180deg,
        rgba(5, 0, 0, 0.72) 0%,
        rgba(60, 8, 8, 0.60) 30%,
        rgba(30, 5, 5, 0.38) 60%,
        rgba(11, 6, 6, 0) 100%);
    z-index: 1;
}

.camera-scrim-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 480px;
    /* B) Scrims zeslabeny — bylo 1.0/0.97/0.75, nyní 0.76/0.62/0.40 */
    background: linear-gradient(0deg,
        rgba(5, 0, 0, 0.76) 0%,
        rgba(60, 8, 8, 0.62) 30%,
        rgba(30, 5, 5, 0.40) 60%,
        rgba(11, 6, 6, 0) 100%);
    z-index: 1;
}

/* Left + right side vignette — separate pseudo-elements via extra overlay divs.
   We reuse camera-scrim with extra modifier classes so no new HTML is needed. */
.camera-scrim-top::after,
.camera-scrim-bottom::after {
    /* not used — side vignette handled by camera-ui-overlay::before */
    content: none;
}

/* 4-sided vignette: two side gradients drawn as the ui-overlay's ::before layer.
   Covers the full overlay area (same inset:0), sits below scrims (z-index 0).
   B) Bočnice zeslabeny — bylo 0.92/0.60, nyní 0.55/0.32 */
.camera-ui-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg,
            rgba(5, 0, 0, 0.55) 0%,
            rgba(20, 3, 3, 0.32) 12%,
            rgba(11, 6, 6, 0) 28%,
            rgba(11, 6, 6, 0) 72%,
            rgba(20, 3, 3, 0.32) 88%,
            rgba(5, 0, 0, 0.55) 100%);
}

/* Title layer — above the top scrim */
.camera-title-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 28px;
    pointer-events: none;
}

.camera-title-layer h2 {
    font-size: clamp(28px, 7vw, 42px);
    margin-bottom: 0;
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(177, 20, 35, 0.55);
    color: var(--color-text-primary);
}

/* Bottom controls layer — above the bottom scrim
   CHANGED (bod 1): padding-bottom 48px (bylo 18px) — cluster výš od okraje */
.camera-controls-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* CHANGED (bod 1): reduced bottom padding lifts the entire cluster higher */
    /* CHANGED (bod 1b): 68px (bylo 48px) — cluster posunut výš */
    padding: 0 var(--spacing-md) 68px;
    gap: 0;
    pointer-events: auto;
}

/* NEPOUŽÍVÁ SE (meeting 2026-07-22): přepínač vzdálenosti byl z UI odstraněn.
   Styly zůstávají, aby šel split-button v případě potřeby jednoduše vrátit.
   ────────────────────────────────────────────────────────────────────────────
   Distance toggle inside the overlay — single split button, zero gap, divider line.
   C) Žlutá outline stejná jako u #group-toggle-wrap .toggle-btn.is-active
   CHANGED (bod 1): max-width 640px (bylo 320px), font-size 30px (bylo 15px),
   padding 20px 16px (bylo 10px 8px), margin-bottom 24px (bylo 12px)
   CHANGED (bod 1b): ~17% zmenšení — max-width 530px, font-size 25px, padding 17px 16px */
.camera-controls-layer .distance-toggle-wrap {
    margin: 0 auto 20px;
    max-width: 530px;
    width: 100%;
    gap: 0;              /* override base gap:12px — no gap between halves */
    border-radius: var(--radius-lg);
    overflow: hidden;    /* clip the corners of child buttons */
    border: 2px solid var(--color-accent-soft);
}

.camera-controls-layer .distance-toggle-wrap .toggle-btn {
    flex: 1 1 0%;        /* equal width both halves */
    min-width: 0;
    max-width: none;
    font-size: 25px;
    padding: 17px 16px;
    border-radius: 0;    /* parent clips corners */
    border: none;        /* no individual borders */
    /* Divider between the two halves — right-side only on first button */
    border-right: 1px solid var(--color-border);
}

/* Remove the divider on the last (right) button */
.camera-controls-layer .distance-toggle-wrap .toggle-btn:last-child {
    border-right: none;
    border-left: none;
}

/* Active state override for split-button context */
.camera-controls-layer .distance-toggle-wrap .toggle-btn.is-active {
    background: var(--color-primary);
    border-color: transparent;
    color: #FFF4E6;
    box-shadow: none;
}

/* Shutter + group row — negative top margin so it slightly overlaps the distance toggle
   CHANGED (bod 1): cluster 2× větší; max-width 760px (bylo 380), min-height 230px (bylo 115),
   margin-top -20px (bylo -10px) — posunutí mírně výš
   CHANGED (bod 1b): ~17% zmenšení — max-width 630px, min-height 192px; padding-bottom zvýšen
   pro posunutí celého clusteru výš (větší odsazení od spodku) */
.camera-cluster-row {
    position: relative;
    width: 100%;
    max-width: 630px;
    min-height: 192px;
    margin: -20px auto 0;
    display: flex;
    align-items: center;
}

/* Group/Solo toggle — connected bar with shutter button in centre.
   Both side buttons are forced to identical width via flex:1 + width:0 base.
   CHANGED (bod 1): font-size 34px (bylo 17), padding 32px 12px (bylo 16px 6px)
   CHANGED (bod 1b): ~17% zmenšení — gap 188px (bylo 226px), font-size 28px, padding 26px 12px */
#group-toggle-wrap {
    width: 100%;
    margin: 0;
    display: flex;
    gap: 188px;   /* centre gap = shutter diameter (192px) - 2px overlap each side; bylo 226px */
}
#group-toggle-wrap .toggle-btn {
    flex: 1 1 0%;   /* 0% base width so both stretch equally from zero */
    min-width: 0;
    max-width: none;
    appearance: none;
    border: 2px solid var(--color-border);
    background: rgba(26, 13, 13, 0.88);
    color: var(--color-text-secondary);
    padding: 26px 12px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 28px;
    font-weight: 700;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    line-height: 1.1;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* Left button: round only left corners */
#group-toggle-wrap .toggle-btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
}
/* Right button: round only right corners */
#group-toggle-wrap .toggle-btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: none;
}
#group-toggle-wrap .toggle-btn .ico { font-size: 37px; line-height: 1; } /* CHANGED (bod 1b): 44px → 37px (~17% méně) */
#group-toggle-wrap .toggle-btn.is-active {
    background: rgba(177, 20, 35, 0.92);
    border-color: var(--color-accent-soft);
    color: #FFF4E6;
    box-shadow: var(--shadow-primary);
}
#group-toggle-wrap.is-hidden { display: none; }

/* Capture button — centred in group toggle row, touching both side buttons
   CHANGED (bod 1): 230px (bylo 115px), border 10px (bylo 5px)
   CHANGED (bod 1b): ~17% zmenšení — 192px (bylo 230px) */
#capture-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 192px;
    height: 192px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #C8182A, #6E0A14 70%);
    border: 10px solid var(--color-accent);
    cursor: pointer;
    z-index: 10;
    box-shadow:
        0 0 0 10px rgba(177, 20, 35, 0.4),
        0 10px 28px rgba(0, 0, 0, 0.75),
        0 0 36px rgba(177, 20, 35, 0.55);
    transition: transform 0.12s, box-shadow 0.2s;
}

#capture-button:active {
    transform: translate(-50%, -50%) scale(0.94);
}

/* Camera icon overlay — independent layer above the shutter button.
   Positioned absolutely inside #capture-button (which is position:absolute,
   so it forms the containing block). pointer-events:none lets all taps
   pass through to the button beneath. */
.capture-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 58%; height: 58%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Review mode confirm buttons — bigger, pushed higher via bottom anchor
   CHANGED (bod 2): max-width 570px (bylo 380px), padding-bottom 80px (bylo 32px) */
.camera-confirm-buttons {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 570px;
    /* CHANGED (bod 2): Extra bottom padding lifts the group further from the screen edge */
    padding-bottom: 80px;
}

/* CHANGED (bod 2): height 150px (bylo 100px, ×1.5), font-size 54px (bylo 36px, ×1.5) */
.camera-btn-big {
    height: 150px !important;
    font-size: 54px !important;
    margin-top: 0 !important;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-primary), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* CHANGED (bod 2): height 150px (bylo 100px), font-size 48px (bylo 32px) */
.camera-btn-big.button-secondary {
    height: 150px !important;
    font-size: 48px !important;
    box-shadow: none !important;
}

#camera-error {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    color: #FFD7D2;
    background-color: rgba(110, 10, 20, 0.88);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
}

/* ====== CONFIRM PHOTO SCREEN ====== */

#confirm-photo-screen { height: 100%; justify-content: flex-start; padding-top: 0; }
#confirm-photo-screen .step-top { height: 512px; }
#confirm-photo-screen img {
    max-width: 100%;
    max-height: 360px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 3px var(--color-accent-soft);
}
#confirm-photo-screen h2 { margin-bottom: 0; }
#confirm-photo-screen .button-group { margin-top: 0; }

/* Confirm photo buttons — column layout. Visibility toggled by JS (none during
   live shooting, flex after capture) — NO !important so inline display:none works. */
.confirm-button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin-top: 16px;
}
.confirm-button-group .button {
    margin-top: 0 !important;
    width: 100%;
    height: 54px;
}
.confirm-button-group #retake-button {
    margin-top: 0 !important;
}

/* ====== MOOD SCREEN (CATEGORIES) ====== */

/* mood-screen fills the full app height and distributes its zones evenly top→bottom */
#mood-screen {
    height: 100%;
    justify-content: flex-start;
    padding-bottom: var(--spacing-md);
}

/* mood h2 — reduced bottom margin because orientation toggle is below it */
#mood-screen h2 { margin-bottom: 16px; }

.mood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    column-gap: 18px;
    row-gap: 14px;
    width: 100%;
    flex: 1 1 0;          /* grow to fill remaining height below the toggle */
    min-height: 0;        /* allow shrink inside flex column */
}

.mood-button {
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    background: var(--color-secondary);
    color: #FFF4E6;
    border: 1px solid rgba(224, 178, 90, 0.35);
    box-shadow: var(--shadow-md);
    padding: 0;
}

.mood-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image, linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%));
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.mood-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 6, 6, 0.25) 0%, rgba(11, 6, 6, 0.78) 100%);
    z-index: 1;
}

.mood-button .mood-label {
    position: relative;
    z-index: 2;
    padding: 0 8px 12px;
    font-family: var(--font-display);
    font-size: clamp(20px, 6.2vw, 26px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.01em;
    word-break: break-word;
    hyphens: auto;
    color: #FFF4E6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

.mood-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.mood-button.selected { border-color: var(--color-accent); }
.mood-button.selected::after {
    background: linear-gradient(180deg, rgba(177, 20, 35, 0.35) 0%, rgba(177, 20, 35, 0.85) 100%);
}

/* ── POTVRZOVACÍ KROK (meeting 2026-07-22) ──────────────────────────────────
   Klik na dlaždici / náhled jen VYBERE; teprve „Potvrdit" pokračuje dál.
   Vizuál i názvosloví (.has-selection) převzaty z webové appky. */

/* Jakmile je něco vybráno, ostatní možnosti ztlumí a odbarví se. */
.mood-grid.has-selection .mood-button:not(.selected),
.result-grid.has-selection .result-image-container:not(.selected) {
    filter: grayscale(0.7) brightness(0.65);
    opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}

/* Tlačítko „Potvrdit" — schované, dokud uživatel nic nevybral; pak se plynule
   objeví a dýchá stejným ohnivým pulzem jako ostatní primární tlačítka. */
#mood-screen .button-group,
#select-result-screen .button-group {
    flex: 0 0 auto;
    margin-top: 16px;
    /* Odsazení od spodní hrany, ať se ohnivý pulz tlačítka neořezává. */
    margin-bottom: 24px;
    align-items: center;
}

#mood-confirm-button,
#result-confirm-button {
    height: 96px;
    max-width: 520px;
    font-size: clamp(24px, 3.4vw, 38px);
    transition: opacity 0.25s, background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

#mood-confirm-button:disabled,
#result-confirm-button:disabled {
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

#mood-confirm-button:not(:disabled),
#result-confirm-button:not(:disabled) {
    animation: firePulse 4.2s ease-in-out infinite;
}

/* Category background images. Gradient overlay for text legibility is handled by ::after. */
.mood-button[data-mood="Trune"]::before {
    background-image: url("assets/img/mood-trune.png");
    background-size: cover;
    background-position: center;
}
/* Bod 4 (dávka 4): předloha je na výšku (848×1268) a v široké dlaždici ji `cover`
   ořízne na střední pruh — siluetě zmizela hlava. `center top` posune výřez na
   horní část obrázku (= obrázek se v dlaždici posune níž), takže je hlava celá
   vidět. Ostatní dlaždice zůstávají na `center`. */
.mood-button[data-mood="Cert"]::before {
    background-image: url("assets/img/mood-cert.png");
    background-size: cover;
    background-position: center top;
}
.mood-button[data-mood="Kotel"]::before {
    background-image: url("assets/img/mood-kotel.png");
    background-size: cover;
    background-position: center;
}
.mood-button[data-mood="Klec"]::before {
    background-image: url("assets/img/mood-klec.png");
    background-size: cover;
    background-position: center;
}
.mood-button[data-mood="Mikulas"]::before     { background: linear-gradient(135deg, #B11423 0%, #E0B25A 130%); }
.mood-button[data-mood="Andel"]::before       { background: linear-gradient(135deg, #6E7BB8 0%, #E8E2D0 120%); }
.mood-button[data-mood="Zatracenec"]::before  { background: linear-gradient(135deg, #1B0606 0%, #C8182A 130%); }

/* Empty placeholder tiles — visually "coming soon", not interactive */
.mood-button-empty {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(224, 178, 90, 0.20);
    background: rgba(26, 13, 13, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    cursor: default;
    box-shadow: none;
}

.mood-empty-cross {
    font-family: var(--font-display);
    font-size: clamp(32px, 8vw, 48px);
    font-weight: 700;
    color: rgba(224, 178, 90, 0.18);
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

/* ====== GENERATING SCREEN ====== */

/* CHANGED (bod 4): generating-screen centruje skupinu (nadpis + spinner) flex sloupcem.
   position:relative bylo odebráno — .screen je position:absolute, nesmí být přepsáno.
   justify-content:center + align-items:center → skupina svisle i vodorovně na středu.
   CHANGED (bod 4b): padding-top:0 (bylo 40px) — flex center funguje bez bias nahoru */
#generating-screen {
    justify-content: center;
    align-items: center;
    padding-top: 0;
    gap: 0;
}
/* CHANGED (bod 4b): nadpis 2× větší — 76px (bylo 38px, zděděno z h2) */
#generating-screen h2 { margin-bottom: var(--spacing-md); color: var(--color-accent); font-size: 76px; }
#generating-screen p { margin-bottom: var(--spacing-md); }

/* CHANGED (bod 4): spinner 400px (bylo 200px, ×2); normální flex prvek (position NENÍ absolute —
   absolutní hack odstraněn, centrování zajišťuje flex rodič #generating-screen).
   @keyframes spin rotuje přes transform: rotate() bez konfliktu s translate. */
.spinner {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* conic-gradient od 0deg — rotace přes transform funguje správně */
    background: conic-gradient(from 0deg,
        rgba(177, 20, 35, 0) 0%,
        rgba(224, 100, 20, 0.4) 35%,
        rgba(255, 140, 30, 0.85) 70%,
        rgba(255, 180, 60, 1) 100%);
    /* Maska vytváří prstenec — transparent=vnitřek, #000=viditelný prsten */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 32px), #000 calc(100% - 31px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 32px), #000 calc(100% - 31px));
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
    /* CHANGED (bod 4b): margin-top 0 (bylo 48px) — flex justify-content:center zajišťuje střed */
    margin: 0 auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ====== SELECT RESULT SCREEN ====== */

/* The heading and both photos share one even vertical distribution, so the title
   sits centered between the nav bar and the first photo, and the photos spread down. */
#select-result-screen {
    height: 100%;
    justify-content: space-evenly;
    padding-top: var(--spacing-xs);
    /* Larger bottom padding lifts the whole evenly-spaced stack upward and keeps the
       gaps in the same ratio (just smaller), leaving ~double the free space at the bottom. */
    padding-bottom: clamp(54px, 10vh, 100px);
}
#select-result-screen h2 { margin-bottom: 2px; }
#select-result-screen p { margin-bottom: 0; }
.result-head { flex: 0 0 auto; width: 100%; }

/* contents → the two image containers become direct flex items of the screen,
   joining the heading in the even (space-evenly) distribution. */
.result-grid { display: contents; }

.result-image-container {
    position: relative;
    flex: 0 0 auto;
    width: min(62vw, 33vh);
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    background-color: var(--color-surface-2);
    box-shadow: var(--shadow-sm);
}
.result-image-container:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.result-image-container.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(224, 178, 90, 0.25), var(--shadow-md);
}
.result-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: none;
    border-radius: 0;
}

/* ====== FINAL SCREEN ====== */

#final-screen { height: 100%; justify-content: flex-start; padding-top: 0; }
#final-screen .step-top { height: 511px; }
#final-screen h2 { margin-bottom: 0; }
#final-screen p { margin-bottom: 0; }

#final-image-container {
    margin: 0;
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 3px var(--color-accent-soft);
    overflow: hidden;
}
#final-image-preview {
    display: block;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

#final-screen .button-group { margin-top: 0; }
#final-screen .button-group .button { height: 52px; }

/* ====== ERROR SCREEN ====== */

#error-screen { justify-content: center; padding-top: 120px; }
#error-screen h2 { color: var(--color-accent); }
#error-screen p { max-width: 28ch; margin: 0 auto; font-size: 15px; line-height: 1.6; }

/* ============================================================
   DESKTOP / LARGER SCREENS
   The PHONE layout is the source of truth and stays untouched.
   These overrides apply ONLY from 760px width up — they widen the
   centered column and scale text / elements up proportionally so the
   app doesn't sit as a tiny strip in the middle of a big screen.
   ============================================================ */
@media (min-width: 760px) {
    /* Taller nav bar spanning the full width: flag in the far-left corner,
       language toggle in the far-right corner, wordmark perfectly centred. */
    .header-inner {
        max-width: none;
        height: 124px;
        padding: 0 48px;
        position: relative;
    }
    .brand-logo { height: 84px; }
    .lang-switch button { width: 54px; height: 54px; }
    .header-center-logo {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 96px;
        width: auto;
        pointer-events: none;
        filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
    }

    .app-container {
        max-width: 720px;
        height: calc(100vh - 124px);
        height: calc(100dvh - 124px);
        max-height: none;     /* use the FULL screen height, not capped at 950px */
        overflow: hidden;     /* desktop must NOT scroll — everything fits the screen */
    }

    .screen { padding: 40px 28px; }

    h2 { font-size: 46px; margin-bottom: 22px; }
    p { font-size: 17px; }
    .button { height: 60px; font-size: 25px; }
    .button-group .button { height: 56px; }

    /* Welcome — parchment img sized by HEIGHT so it fills the screen but still leaves
       room for the button (no scroll). Baked PNG has 848×1264 ratio = portrait. */
    #welcome-screen { padding: 16px 16px 24px; justify-content: center; }
    .welcome-parchment {
        width: auto;
        max-width: 92%;
        margin: 0 auto var(--spacing-md);
        transform: translateY(calc(84px - 9.6vh));
    }
    #welcome-parchment-img {
        height: min(62vh, 700px);
        width: auto;
        max-width: 100%;
    }
    #start-button { height: 70px; font-size: 30px; max-width: 460px; margin-top: 28px; }

    /* Limit screen (same geometry as welcome on desktop) */
    #limit-screen { padding: 16px 16px 24px; justify-content: center; }

    /* GDPR */
    .gdpr-content { max-height: 58vh; }
    /* Drop the Souhlasím/Nesouhlasím buttons lower → bigger gap below the text.
       Scales with window height (uses the free space on tall windows) and never
       goes below the default 24px, so short desktop windows don't overflow. */
    #gdpr-screen .button-group { margin-top: max(24px, calc(34vh - 248px)); }
    .gdpr-content h2 { font-size: clamp(16px, 2.2vw, 22px); }
    .gdpr-content p,
    .gdpr-content .gdpr-intro,
    .gdpr-content .gdpr-list li { font-size: 14.5px; line-height: 1.6; }

    /* Camera — fullscreen on desktop too; title and buttons scale slightly larger
       CHANGED (bod 1+2): desktop hodnoty odpovídají 2× základu (cluster) a 1.5× (confirm buttons) */
    .camera-title-layer { padding-top: 44px; }
    .camera-title-layer h2 { font-size: clamp(36px, 5vw, 56px); }
    /* CHANGED (bod 1): cluster 2× — max-width 960px (bylo 480px), min-height 280px (bylo 140px) */
    /* CHANGED (bod 1b): ~17% zmenšení — max-width 796px, min-height 232px */
    .camera-cluster-row { max-width: 796px; min-height: 232px; }
    /* CHANGED (bod 1): padding-bottom 60px (bylo 24px) */
    /* CHANGED (bod 1b): 80px — cluster výš na desktopu */
    .camera-controls-layer { padding: 0 32px 80px; }
    /* CHANGED (bod 1): max-width 960px (bylo 480px) */
    /* CHANGED (bod 1b): ~17% zmenšení — max-width 796px */
    .camera-controls-layer .distance-toggle-wrap { max-width: 796px; }
    /* CHANGED (bod 1): font-size 38px (bylo 19px), padding 28px 32px (bylo 14px 16px) */
    /* CHANGED (bod 1b): ~17% zmenšení — font-size 32px, padding 23px 32px */
    .camera-controls-layer .distance-toggle-wrap .toggle-btn { font-size: 32px; padding: 23px 32px; min-width: 0; }
    /* CHANGED (bod 1): 280px (bylo 140px), border-width 12px (bylo 6px) */
    /* CHANGED (bod 1b): ~17% zmenšení — 232px */
    #capture-button { width: 232px; height: 232px; border-width: 12px; }
    /* CHANGED (bod 1): gap 276px (bylo 138px — = 2× 138) */
    /* CHANGED (bod 1b): ~17% zmenšení — gap 228px (= 232px - 4px overlap) */
    #group-toggle-wrap { gap: 228px; }
    /* CHANGED (bod 1): font-size 38px (bylo 19px), padding 36px 28px (bylo 18px 14px) */
    /* CHANGED (bod 1b): ~17% zmenšení — font-size 32px, padding 30px 28px */
    #group-toggle-wrap .toggle-btn { font-size: 32px; padding: 30px 28px; }
    /* CHANGED (bod 2): 1.5× desktop — height 174px (bylo 116px), font-size 60px (bylo 40px) */
    .camera-btn-big { height: 174px !important; font-size: 60px !important; }
    .camera-btn-big.button-secondary { height: 174px !important; font-size: 54px !important; }
    /* CHANGED (bod 2): max-width 720px (bylo 480px), padding-bottom 100px (bylo 48px) */
    .camera-confirm-buttons { max-width: 720px; padding-bottom: 100px; }

    /* Confirm photo — the preview is framed at the SAME size as the camera preview
       in the previous step (so the button drops down to match, like the camera). */
    #confirm-photo-screen .step-top { height: min(820px, 73vh); }
    #confirm-photo-screen img { max-width: min(640px, 60vh); max-height: min(640px, 60vh); }

    /* Final — generated image framed at the SAME size as the camera preview
       (min(640px,60vh)); the share/download buttons follow down evenly. */
    #final-screen .step-top { height: min(840px, 75vh); }
    #final-image-preview { max-width: min(640px, 60vh); max-height: min(640px, 60vh); }

    /* Mood / categories — more breathing room below the heading and between rows */
    #mood-screen h2 { margin-bottom: 16px; }
    .mood-grid { column-gap: 24px; row-gap: 20px; }
    .mood-button { height: 100%; }
    .mood-button .mood-label { font-size: clamp(26px, 3vw, 34px); }

    /* Orientation toggle — desktop sizing matches mood-button scale */
    .orientation-toggle-wrap { gap: 24px; margin-bottom: 28px; }
    .orientation-toggle-wrap .toggle-btn { height: 96px; font-size: clamp(22px, 2.8vw, 30px); }

    /* Generating — CHANGED (bod 4): 400px (bylo 200px), absolutní pozice zachována z base */
    .spinner { width: 400px; height: 400px; }

    /* Select result — bigger stacked photos */
    .result-image-container { width: min(40vh, 400px); }

    #error-screen p { max-width: 36ch; font-size: 18px; }

    /* Kiosk attract — tablet/desktop scaling */
    .attract-headline { font-size: clamp(48px, 5.5vw, 80px); }
    .attract-sub { font-size: clamp(18px, 2.2vw, 26px); }
    /* Grenze Gotisch is denser — keep line-height a bit looser on desktop */
    .attract-print-hint { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; }
    .button-attract { height: 144px; font-size: 58px; max-width: 520px; }
    /* .attract-slideshow zde ODSTRANĚNO (meeting 2026-07-22, bod 1): pravidlo bylo
       stejně mrtvé — pozdější základní `.attract-slideshow` (sekce KIOSK: ATTRACT
       SCREEN) ho při stejné specificitě přebíjelo. Velikost okna je nyní řešená
       jediným responzivním pravidlem tam. */

    /* Kiosk camera — full-bleed: adjust top offset for taller desktop header */
    #camera-screen {
        top: 124px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 124px) !important;
        height: calc(100dvh - 124px) !important;
    }

    /* Print screen — desktop / kiosek.
       OPRAVA (kiosek 2026-07-22, bod 3): tady byla DRUHÁ, konkurenční verze
       shifted-up přes `inset` + `max-height` obrázku. Právě ta na kiosku (šířka
       1080 px → tahle větev je aktivní) způsobovala skok: obrázek měnil max-height
       bez transition. Zmenšení i posun teď dělá výhradně `transform` na rámu
       (viz #print-photo-wrap dole), takže tu zůstává jen výchozí velikost fotky. */
    .print-preview-img { max-height: 74vh; }
    /* OPRAVA (kiosek 2026-07-22, bod 2): pravidlo `.qr-img` tu bylo mrtvé —
       stejná specificita, ale v souboru DŘÍV než základní `.qr-img { width:300px }`,
       takže se nikdy neuplatnilo (naměřeno 300 px místo 360 px). Tiskový QR má
       vlastní, konkrétnější selektor, aby skutečně vyhrál. */
    #print-qr .qr-img { width: 360px; height: 360px; }

    /* 4-grid on large screen
       CHANGED (bod 5): větší karty na desktopu, max-height 44vh (bylo 36vh)
       CHANGED (bod 5b): max-height 56vh, margin-top 64px — fotky dole na středu */
    .result-grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
    .result-grid-4 .result-image-container { width: auto; aspect-ratio: 3 / 4; max-height: 56vh; }
    /* CHANGED (bod 5): nadpis 2× na desktopu — 92px (bylo 46px) */
    #select-result-screen h2 { font-size: 92px; }
    /* CHANGED (bod 5b): podnadpis <p> na desktopu */
    #select-result-screen .result-head p { font-size: 38px !important; }
}

/* ====== KIOSK: ATTRACT SCREEN ====== */

#attract-screen {
    height: 100%;
    justify-content: flex-start;
    padding: 12px 16px 16px;
    overflow: hidden;
}

.attract-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 0;
    /* 3 zóny (nadpis+podnadpis / fotka / tlačítko) — stejnoměrné mezery
       i nad prvním a pod posledním prvkem. */
    justify-content: space-evenly;
}

/* Nadpis + podnadpis jako JEDEN blok, nalepené k sobě (žádná mezera mezi nimi). */
.attract-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.attract-flag {
    height: 80px;
    width: auto;
    filter: drop-shadow(0 4px 16px rgba(177, 20, 35, 0.7));
    animation: firePulse 4s ease-in-out infinite;
}

.attract-headline {
    font-family: var(--font-display);
    font-size: clamp(37px, 10.5vw, 64px);
    font-weight: 800;
    color: var(--color-text-primary);
    text-shadow: 0 2px 16px rgba(177, 20, 35, 0.7), 0 0 40px rgba(224, 178, 90, 0.3);
    line-height: 1.05;
    text-align: center;
    margin: 0;
}

.attract-sub {
    font-size: clamp(14px, 3.5vw, 18px);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 30ch;
    line-height: 1.4;
    margin: 0;
}

/* Hint o tisku na attract obrazovce — Grenze Gotisch blackletter */
.attract-print-hint {
    font-family: var(--font-display);
    font-size: clamp(19px, 4.8vw, 24px);
    line-height: 1.25;
    color: var(--color-accent);
    font-weight: 600;
    text-align: center;
    margin: 0;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 8px rgba(177, 20, 35, 0.5);
}

/* Slideshow
   CHANGED (meeting 2026-07-22, bod 1): náhledové okno prezentace ZVĚTŠENO,
   ale zůstává ČTVERCOVÉ (klient výslovně: čtverec zůstává, jen větší).
   Dřív: width 100%/max 420px × height clamp(230px, 44vh, 460px) → 420×460 (0,91:1).
   Teď: čtverec (aspect-ratio 1/1) široký, co dovolí menší ze tří mezí:
     • 100 %   — šířka obsahu obrazovky (na kiosku 720px kontejner − 32px padding = 688px),
     • 700px   — strop, aby okno nepřerostlo kontejner na širokých displejích,
     • 100vh − 500px — výšková rezerva pro hlavičku, nadpis, podnadpis, START a mezery,
                        takže se okno na nižších displejích samo zmenší a nic nepřekryje. */
.attract-slideshow {
    position: relative;
    width: min(100%, 700px, calc(100vh - 500px));
    min-width: 220px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 4px auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 2px var(--color-accent-soft);
}

.slideshow-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
}

.slide.is-visible { opacity: 1; }

/* ── Ken Burns: pan & zoom animations ──────────────────────────────────────
   4 variants, alternating by slide index (index % 4), no Math.random().
   Each lasts 6 s — enough for the full zoom to travel before crossfade.
   The img inside the slide carries the animation; the .attract-slideshow
   clip (overflow:hidden) prevents the scaled image from bleeding out.
   prefers-reduced-motion: only plain fade, no motion.               */

@keyframes kb-zoom-left {
    /* Variant 0 — zoom in, pan right (originates from left) */
    from { transform: scale(1.0)  translate(0%,    0%); }
    to   { transform: scale(1.15) translate(3.5%,  1%); }
}
@keyframes kb-zoom-right {
    /* Variant 1 — zoom in, pan left (originates from right) */
    from { transform: scale(1.0)  translate(0%,    0%); }
    to   { transform: scale(1.15) translate(-3.5%, 1%); }
}
@keyframes kb-zoom-up {
    /* Variant 2 — zoom in, pan downward (originates from top) */
    from { transform: scale(1.0)  translate(0%, 0%); }
    to   { transform: scale(1.15) translate(0%, 2.5%); }
}
@keyframes kb-zoom-down {
    /* Variant 3 — zoom in slightly, pan upward */
    from { transform: scale(1.05) translate(2%, 2%); }
    to   { transform: scale(1.18) translate(-2%, -1%); }
}

/* The img inside each slide gets the animation when the slide is active.
   We use CSS classes .kb-0…kb-3 set by JS on each .slide element.
   `animation-play-state: paused` when slide is hidden so invisible slides
   don't consume GPU unnecessarily. */

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-play-state: paused;
    transform-origin: center center;
}

.slide.is-visible img {
    animation-play-state: running;
}

.slide.kb-0 img { animation-name: kb-zoom-left;  }
.slide.kb-1 img { animation-name: kb-zoom-right; }
.slide.kb-2 img { animation-name: kb-zoom-up;    }
.slide.kb-3 img { animation-name: kb-zoom-down;  }

/* Respect reduced-motion: keep crossfade, kill zoom */
@media (prefers-reduced-motion: reduce) {
    .slide img {
        animation: none !important;
        transform: none !important;
    }
}

/* Coloured placeholder slides (demon-themed) */
.slide-placeholder { background-size: cover; background-position: center; }
.slide-1 { background: radial-gradient(ellipse at 30% 70%, #7A0E1A 0%, #2A0A0A 70%); }
.slide-2 { background: radial-gradient(ellipse at 70% 40%, #C8182A 0%, #1B0606 65%); }
.slide-3 { background: radial-gradient(ellipse at 50% 50%, #E05A00 0%, #2A0A0A 70%); }

/* .slide-real, .slide-sample, .slide-drive img styling is covered by .slide img above */

/* START button */
.button-attract {
    height: 100px;
    font-size: 42px;
    letter-spacing: 0.04em;
    width: 100%;
    max-width: 420px;   /* stejně široké jako náhledová fotka (.attract-slideshow) */
    animation: firePulse 4.2s ease-in-out infinite;
    margin-top: 0;
}

/* ====== KIOSK: PAYMENT SCREEN ====== */

#payment-screen {
    height: 100%;
    justify-content: center;
    padding: 32px 20px;
}

.payment-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
}

.payment-icon {
    font-size: 72px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(177, 20, 35, 0.6));
}

.payment-price {
    font-family: var(--font-display);
    font-size: clamp(28px, 8vw, 46px);
    font-weight: 800;
    color: var(--color-accent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.payment-desc {
    font-size: 15px;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 28ch;
    margin: 0;
}

/* Payment title — force single line, shrink to fit */
.payment-title-nowrap {
    white-space: nowrap;
    font-size: clamp(20px, 6vw, 38px);
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* ====== KIOSK: CAMERA SCREEN — fullscreen portrait ====== */
/* (fullscreen styles are now in the base camera section above) */

.camera-hint {
    font-size: 13px;
    color: var(--color-accent);
    margin-top: 6px;
    text-align: center;
}

/* Toast shown when user taps capture without group selection */
.camera-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(177, 20, 35, 0.95);
    color: #FFF4E6;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(224, 178, 90, 0.5);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 100;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    animation: toastIn 0.25s ease-out;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Distance toggle — centred, no label */
.distance-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 330px;
    margin: 8px auto 4px;
}

.toggle-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-weight: 600;
}

.distance-toggle-wrap .toggle-btn {
    flex: 0 0 auto;
    min-width: 120px;
    appearance: none;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.1;
    white-space: nowrap;
}

.distance-toggle-wrap .toggle-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-accent-soft);
    color: #FFF4E6;
    box-shadow: var(--shadow-primary);
}

/* ADDED (bod 3): keyframes pro pulzující neonově červený stín na orientation tlačítkách */
/* CHANGED (bod 3b): silnější záře, používá se na obou stavech (aktivní i neaktivní) */
@keyframes neonRedPulse {
    0%, 100% {
        box-shadow: var(--shadow-md),
                    0 0 8px 2px rgba(255, 26, 26, 0.35),
                    0 0 18px 4px rgba(255, 26, 26, 0.18);
    }
    50% {
        box-shadow: var(--shadow-md),
                    0 0 22px 7px rgba(255, 26, 26, 0.80),
                    0 0 44px 14px rgba(255, 26, 26, 0.38),
                    0 0 70px 20px rgba(180, 0, 0, 0.18);
    }
}

/* Orientation toggle — above category grid, styled as mood-button cards */
.orientation-toggle-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: 100%;
    margin: 0 auto 14px;   /* mezera mezi orientací a mřížkou kategorií */
}

/* CHANGED (bod 3): přidána animace neonRedPulse 2s; velikost beze změny */
.orientation-toggle-wrap .toggle-btn {
    height: 72px;
    width: 100%;
    margin: 0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--color-secondary) 0%, #3A1010 100%);
    color: #FFF4E6;
    border: 1px solid rgba(224, 178, 90, 0.35);
    box-shadow: var(--shadow-md);
    padding: 0;
    font-family: var(--font-display);
    font-size: clamp(18px, 5.5vw, 24px);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    /* CHANGED (bod 3b): silnější pulz neonově červeného stínu, 3.2s (bylo 2s) */
    animation: neonRedPulse 3.2s ease-in-out infinite;
}

/* CHANGED (bod 3): odstraněn box-shadow z hover — neonRedPulse animace by byla přepsána;
   transform zůstává pro vizuální feedback při najetí */
.orientation-toggle-wrap .toggle-btn:hover {
    transform: translateY(-2px);
}

/* CHANGED (bod 3b): aktivní stav ZACHOVÁVÁ animaci pulzu — obě tlačítka pulzují současně;
   animation není přepsáno (zděděno s stejným 3.2s → synchronní pulz) */
.orientation-toggle-wrap .toggle-btn.is-active {
    background: linear-gradient(135deg, #7A0E1A 0%, #C8182A 60%, #8E0E1B 100%);
    border-color: var(--color-accent-soft);
    color: #FFF4E6;
}

/* Locked capture button — still clickable so the toast can fire, but visually dimmed */
#capture-button.is-locked {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ====== KIOSK: COUNTDOWN OVERLAY ====== */

.countdown-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 6, 6, 0.72);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.countdown-number {
    font-family: var(--font-display);
    /* ~2× bigger than before; clamp ensures it stays usable across screen sizes */
    /* CHANGED (bod 2): ~15% větší — clamp(368px, 83vw, 782px) */
    font-size: clamp(368px, 83vw, 782px);
    font-weight: 900;
    color: var(--color-accent);
    text-shadow:
        0 0 80px rgba(224, 178, 90, 0.9),
        0 0 160px rgba(224, 178, 90, 0.5),
        0 8px 32px rgba(177, 20, 35, 0.95);
    line-height: 1;
    display: block;
    /* Nudge slightly above exact center so it reads better when standing far away */
    transform: translateY(-12%);
}

@keyframes countdownPulse {
    0%   { transform: scale(1.3); opacity: 0.4; }
    40%  { transform: scale(1.0); opacity: 1;   }
    100% { transform: scale(0.92); opacity: 1;  }
}

.countdown-pulse {
    animation: countdownPulse 0.5s ease-out forwards;
}

/* ====== KIOSK: SELECT RESULT — 4-grid ====== */

/* CHANGED (bod 5): justify-content flex-start, gap/padding pro vertikální distribuci */
#select-result-screen {
    height: 100%;
    justify-content: flex-start;
    padding: 16px var(--spacing-md) var(--spacing-md);
    overflow-y: auto;
}

/* CHANGED (bod 5): nadpis 2× — font-size 76px (bylo 38px) */
#select-result-screen h2 {
    font-size: 76px;
    margin-bottom: 4px;
}

/* CHANGED (bod 5b): podnadpis je <p>, ne h2 — zvětšit explicitně.
   Bez !important ho přebíjí obecné p { font-size:14px } a desktop p { font-size:17px } */
#select-result-screen .result-head p {
    font-size: 32px !important;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* CHANGED (bod 5): margin-top 32px (bylo 12px) — grid posunut dolů;
   gap 16px (bylo 12px) pro větší karty
   CHANGED (bod 5b): margin-top 56px — grid výrazněji dolů, fotky na svislém středu */
.result-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    margin-top: 56px;
}

/* CHANGED (bod 5): větší karty — max-height zvýšen na 42vh (bylo implicitní/auto)
   CHANGED (bod 5b): 54vh — větší fotky, výrazněji viditelné na TV */
.result-grid-4 .result-image-container {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 54vh;
}

/* Bod 4 (kiosek 2026-07-22): když se povede jen část variant, nepoužité sloty se
   schovají (JS) a mřížka se přizpůsobí — jinak by 1 nebo 2 fotky visely v levém
   horním rohu. Třídu nastavuje startGeneration() podle počtu obrázků. */
.result-grid-4.count-1 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.result-grid-4.count-1 .result-image-container { max-width: 62vh; }
.result-grid-4.count-3 { grid-template-columns: 1fr 1fr; }

/* Bod 1 (dávka 6): kiosek generuje 2 varianty a displej stojí NA VÝŠKU, takže
   obě fotky patří POD SEBE, ne vedle sebe. Mřížka se roztáhne přes celé zbylé
   místo mezi nadpisem a tlačítkem „Potvrdit" (flex: 1) a dva stejně vysoké
   řádky (`grid-auto-rows: minmax(0, 1fr)`) si ho rozdělí — dlaždice jsou tak
   co největší a nic nepřeteče. Šířku dopočítá aspect-ratio 3/4 z výšky řádku,
   `max-width: 100%` ji na širokém displeji uřízne. Platí jen pro count-2;
   count-1 i count-3/4 zůstávají beze změny. */
.result-grid-4.count-2 {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    justify-items: center;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    /* Souměrné okraje: nahoře pod podnadpisem, dole nad „Potvrdit" (základních
       56 px nahoře by dole nechalo jen mezeru tlačítka a fotka by se ho dotýkala). */
    margin-top: 32px;
    margin-bottom: 32px;
}
.result-grid-4.count-2 .result-image-container {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: none;
}

/* Bod 5 (dávka 4): jediná fotka by při `justify-content: flex-start` visela
   nahoře s prázdnou spodní půlkou. Automatické svislé okraje pohltí volné
   místo, takže se řádek vysvisle vycentruje mezi nadpis a tlačítko „Potvrdit".
   Vodorovně centruje sám grid. (count-2 řeší flex: 1 výše.) */
.result-grid-4.count-1 {
    margin-top: auto;
    margin-bottom: auto;
}

/* ====== KIOSK: PRINT SCREEN ====== */

/*
 * Layout: všechny potomci jsou position:absolute.
 * Fotka se zobrazí okamžitě ve středu, pak odjede nahoru.
 * Spinner překrývá fotku přes průhledné tmavé pozadí.
 * QR a tlačítko vyjíždějí zespoda.
 */
#print-screen {
    height: 100%;
    padding: 0;
    overflow: hidden;
    /* position: absolute je zděděno z .screen */
}

/* ── Fotka ── viditelná hned, velká uprostřed; pak PLYNULE zmenší a odjede nahoru.
   OPRAVA (kiosek 2026-07-22, bod 3): původní řešení animovalo `inset` a měnilo
   `max-height` obrázku i `align-items` — max-height obrázku ale nebyl v transition
   vůbec a `bottom: 0 → auto` není animovatelné, takže fotka SKOKEM problikla.
   Nově se rám nehýbe vůbec a animuje se jediná vlastnost — `transform` (scale +
   posun) — kterou umí kompozitor, takže je přechod plynulý a bez skoků. */
#print-photo-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 12px 0;
    box-sizing: border-box;
    z-index: 1;
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* shifted-up: fotka se plynule zmenší na 62 % a vyjede nahoru, aby uvolnila
   spodní polovinu obrazovky pro QR. Jeden transform = jedna plynulá animace.
   Hodnoty jsou zvolené tak, aby na kiosku 1080×1920 zůstala mezi spodkem fotky
   a horní hranou QR bloku mezera přes 200 px při jakémkoli poměru stran fotky. */
#print-photo-wrap.shifted-up {
    transform: translateY(-24vh) scale(0.62);
}

/* Fotka má PEVNOU max-výšku — nemění se během animace (o zmenšení se stará
   výhradně scale na rámu), takže nemůže „přeskočit". */
.print-preview-img {
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* Záměrně BEZ border-radius ani box-shadow — fotka čistě bez UI rámečku */
}


/* Spinner / tiskový status — byl fullscreen tmavý překryv, nyní skrytý.
   Spinner a text jsou přesunuty mimo fotku; overlay sám je průhledný a neinteraktivní. */
#print-status-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    z-index: 10;
    background: transparent;
    transition: opacity 0.4s ease;
    pointer-events: none;
    /* Spinner a text skryty — fotka musí být vidět bez překryvu */
    opacity: 0;
}

#print-status-wrap.hidden {
    opacity: 0;
}

/* ── QR vyjíždí zespoda na uvolněné místo pod fotkou ──
   OPRAVA (kiosek 2026-07-22, bod 2): QR byl `z-index: 0`, tedy POD fotkou
   (`#print-photo-wrap` má z-index 1), a startoval na `translateY(-45vh)` — tedy
   přímo v místě fotky. Cestou dolů proto část QR mizela za fotkou a na kiosku to
   vypadalo, že QR fotku podlézá. Nově je QR NAD fotkou (z-index 6) a vyjíždí
   zespoda, takže se s fotkou nikdy nepotká.
   288px = 80px (spodek tlačítka) + 108px (výška tlačítka) + 100px mezera */
#print-qr-wrap-anim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 288px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* NAD fotkou — QR musí být za všech okolností celý vidět */
    z-index: 6;
    /* Výchozí stav: kousek pod cílovou pozicí, průhledný */
    transform: translateY(56px);
    opacity: 0;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
}

#print-qr-wrap-anim.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* ── Bod 6 (dávka 4): kód pro recepci VEDLE QR ──
   QR i kód leží v jednom řádku; QR si drží svou velikost (360 px + rám) a kód
   dostane zbytek. Žádný druhý QR — na recepci se kód jen řekne. */
.print-qr-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 0 12px;
}

/* QR si drží svou velikost (360 px, dávka 3) — smrsknout se smí jen blok s kódem. */
.print-qr-row .qr-placeholder {
    flex: 0 0 auto;
    padding: 12px 12px 10px;
}

.print-code-block {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 12px;
    border: 2px solid var(--color-accent-soft);
    border-radius: var(--radius-lg);
    background: #0B0606;
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(224,178,90,0.18);
}

.print-code-intro {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.12;
    color: var(--color-text-primary);
    text-align: center;
}

.print-code-hint {
    margin: 0;
    font-size: 18px !important;
    color: var(--color-text-secondary);
    text-align: center;
}

.print-code-value {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: 76px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.1em;
    /* Poslední znak nese pravý letter-spacing — odsazením ho vrátíme na střed. */
    text-indent: 0.1em;
    color: var(--color-accent);
    text-shadow: 0 3px 18px rgba(224,178,90,0.45);
    white-space: nowrap;
}

/* ── Tlačítko „Vyfotit další" — kotveno nad spodkem ──
   CHANGED (bod 8): bottom 32px (bylo 96px — ale teď je tlačítko 2× vyšší, posuneme níž k okraji)
   CHANGED (bod 8b): bottom 80px — tlačítko výš od dolního okraje */
#print-another-wrap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 80px;
    z-index: 4;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#print-another-wrap.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* CHANGED (bod 8): tlačítko 2× — height 108px (bylo 54px z .button), font-size 44px (bylo 22px) */
#another-button {
    max-width: 360px;
    margin: 0 auto;
    display: block;
    height: 108px;
    font-size: 44px;
    animation: firePulse 4.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    #another-button { animation: none; }

    /* Bod 3: bez pohybu — fotka i QR se rovnou objeví v cílové poloze,
       jen s krátkým prolnutím. Žádné zmenšování ani vyjíždění. */
    #print-photo-wrap { transition: none; }
    #print-qr-wrap-anim {
        transform: none;
        transition: opacity 0.3s ease;
    }
    #print-qr-wrap-anim.is-visible { transform: none; }
}

/* QR placeholder */
.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    border: 2px solid var(--color-accent-soft);
    border-radius: var(--radius-lg);
    background: #0B0606;
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(224,178,90,0.18);
}

/* CHANGED (bod 8): QR obrázek větší — 300px (bylo 220px) */
.qr-img {
    width: 300px;
    height: 300px;
    display: block;
    border-radius: var(--radius-sm);
    /* White QR on dark panel — invert the default black-on-white QR */
    background: #fff;
    padding: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.qr-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0;
    letter-spacing: 0.02em;
}

.print-reset-hint {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

#print-reset-countdown {
    font-weight: 700;
    color: var(--color-accent);
}

/* Generating sub-text */
/* CHANGED (bod 4b): font-size 26px (bylo 14px) — viditelné na velké TV */
.generating-sub {
    margin-top: var(--spacing-sm);
    font-size: 26px;
    color: var(--color-text-secondary);
}

/* Camera screen layout override for kiosk — now handled by fullscreen styles above */

/* Mood grid — 2×3 kiosk layout (defined in base mood section above) */

/* ====== KIOSK LOCK — web-level protection ====== */

/* Disable text selection everywhere */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Allow text selection inside any element that explicitly needs it (none in this app) */

/* Prevent drag (images, etc.) */
img, button, a { -webkit-user-drag: none; user-drag: none; }

/* Touch-action: no pinch-zoom, no double-tap zoom at page level */
html, body {
    touch-action: pan-x pan-y;
}

/* All interactive elements: no zoom on double-tap (iOS) */
button, input, select, textarea, a {
    touch-action: manipulation;
}

/* ====== FRAME EDITOR SCREEN ====== */

#frame-editor-screen {
    height: 100%;
    justify-content: flex-start;
    padding: 12px var(--spacing-md) var(--spacing-md);
    overflow: hidden;   /* no scroll — everything must fit on screen */
    gap: 8px;
}

#frame-editor-screen h2 {
    font-size: clamp(22px, 6vw, 34px);
    margin-bottom: 4px;
}

/* Canvas preview — preserves photo aspect ratio, max height so it fits on screen */
.editor-preview-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* Host: exactly wraps the canvas so the overlay can be positioned relative to it.
   overflow: visible so the corner handle (which extends -18px outside the overlay)
   is not clipped. Visual border/shadow live on the canvas element itself. */
.editor-canvas-host {
    position: relative;
    display: inline-block;  /* shrinks to canvas natural size */
    line-height: 0;         /* remove inline gap below canvas */
}

.editor-canvas {
    display: block;
    max-width: 100%;
    /* CHANGED (bod 6): výrazně větší — clamp(300px, 54vh, 560px) (bylo clamp(200px, 36vh, 340px)) */
    max-height: clamp(300px, 54vh, 560px);
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 3px var(--color-accent-soft);
    object-fit: contain;
    background: var(--color-surface-2);
}

/* ── Interactive text overlay ── */

/* The overlay is positioned in the center of the canvas host by default.
   JS moves it via CSS transform (translate + rotate + scale).
   touch-action: none → pointer events take full control, no browser pan/zoom. */
.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    /* Initial transform set by JS on every render */
    transform-origin: center center;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    /* Do not let the host clip drag handles */
    overflow: visible;
}

.text-overlay:active { cursor: grabbing; }

.text-overlay-label {
    display: block;
    color: #ffffff;          /* pure white */
    font-family: var(--font-display);  /* Grenze Gotisch — medieval blackletter, Czech diacritics supported */
    font-size: 20px;         /* base size; scaled via JS transform */
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: none;
    /* Subtle drop shadow only — no hard outline/stroke */
    text-shadow:
        1px 2px 6px rgba(0, 0, 0, 0.9),
        0   1px 3px rgba(0, 0, 0, 0.8);
}

/* Corner handle — bottom-right of the overlay element.
   Drag it to scale + rotate. Sized 36 px so a fingertip hits it comfortably.
   The ::before pseudo-element renders the resize-arrows icon so we don't
   need an extra DOM node. */
.text-overlay-handle {
    position: absolute;
    bottom: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid #0B0606;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    cursor: nwse-resize;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Diagonal double-arrow icon */
.text-overlay-handle::before {
    content: "\2922";   /* ⤢  U+2922 NORTH EAST AND SOUTH WEST ARROW */
    font-size: 16px;
    color: #0B0606;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

/* Section wrapper */
.editor-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    text-align: left;
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Infinite carousel ── */

/* Outer viewport: clips to show only the visible portion of the track.
   overflow-x: auto lets the browser handle scrolling; we prevent default
   selection so pointer drag works cleanly.
   CHANGED (bod 7): max-width omezuje viditelný počet na ~4 thumby (4 × 96px = 384px + mezery) */
.frame-carousel {
    width: 100%;
    max-width: 400px;  /* ~4 thumby × (84px + 12px gap) = 384px; trochu rezervy */
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* scroll-behavior is intentionally NOT set here — smooth scrolling is
       applied selectively via scrollTo({behavior:'smooth'}) for deliberate
       snaps only. Setting it globally causes the invisible teleport jumps
       (scrollLeft = x) to animate and produce the "self-returning" glitch. */
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Allow horizontal scroll/pan on touch; block vertical to prevent page scroll */
    touch-action: pan-x;
}
.frame-carousel::-webkit-scrollbar { display: none; }
.frame-carousel:active { cursor: grabbing; }

/* Inner track — flex row of all tiles (3 copies of the list) */
.frame-carousel-track {
    display: flex;
    flex-direction: row;
    gap: 12px;          /* = THUMB_GAP in JS */
    padding: 4px 2px 6px;
    /* No wrap — single scrollable line */
    flex-wrap: nowrap;
    width: max-content;
}

/* Individual frame thumbnail button — tile sized to photo orientation */
.frame-thumb {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    padding: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 84px;        /* = THUMB_W in JS */
    /* Let the carousel handle touch scrolling horizontally */
    touch-action: manipulation;
}

.frame-thumb.is-active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(224, 178, 90, 0.3), var(--shadow-sm);
}

/* "Bez rámečku" text-only tile — match height of canvas tiles */
.frame-thumb-none-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-align: center;
    /* Height matches canvas tile: 112 * 9/16 = 63px */
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1.2;
    white-space: nowrap;
}

.frame-thumb.is-active .frame-thumb-none-label {
    color: var(--color-accent);
}

/* Mini 16:9 canvas inside a frame thumb */
.frame-thumb-canvas {
    display: block;
    width: 84px;
    height: 47px;   /* 84 * 9/16 ≈ 47 */
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-surface-2);
}

/* Portrait thumbnail canvas: 9:16 ratio */
.frame-thumb-canvas.is-portrait {
    width: 47px;
    height: 84px;
}

/* Portrait thumb tile: narrower, taller */
.frame-thumb.is-portrait-thumb {
    width: 60px;   /* narrower tile for portrait canvas */
}

/* Portrait "none" label matches portrait canvas height */
.frame-thumb-none-label.is-portrait {
    height: 84px;
    width: 47px;
}

.frame-thumb-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frame-thumb.is-active .frame-thumb-label {
    color: var(--color-accent);
}

/* Text input section */
.editor-text-section {
    gap: 4px;
}

.editor-text-input {
    width: 100%;
    height: 48px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 16px;   /* 16px prevents iOS zoom on focus */
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s;
    /* Allow text selection inside the input */
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.editor-text-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.editor-text-input:focus {
    border-color: var(--color-accent-soft);
    box-shadow: 0 0 0 2px rgba(200, 146, 58, 0.2);
}

.editor-text-hint {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-align: right;
    margin: 0;
}

.editor-profanity-msg {
    font-size: 13px;
    font-weight: 600;
    color: #FF8C8C;
    margin: 0;
    text-align: center;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: rgba(177, 20, 35, 0.25);
    border: 1px solid rgba(177, 20, 35, 0.5);
}

/* ── Editor category tabs ── */

.editor-tabs {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
}

/* CHANGED (bod 6): editor-tab 1.25× — height 47.5px→48px (bylo 38px), font-size 17.5px→18px (bylo 14px) */
.editor-tab {
    flex: 1 1 0%;
    height: 48px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    padding: 0 5px;
    white-space: nowrap;
    touch-action: manipulation;
}

.editor-tab.is-active {
    background: linear-gradient(180deg, #C8182A 0%, var(--color-primary) 60%, #8E0E1B 100%);
    border-color: var(--color-accent-soft);
    color: #FFF4E6;
    box-shadow: var(--shadow-primary);
}

.editor-tab:not(.is-active):active {
    background: var(--color-surface-2);
    border-color: var(--color-accent-soft);
    color: var(--color-text-primary);
}

/* ── Editor tab panels ── */

.editor-tab-panel {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* No overflow-y here — panel content must fit; carousel handles its own scroll */
}

/* ── Watermark toggle row ── */

.watermark-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* Bod 1 (dávka 4): přepínač vodoznaku Zapnuto/Vypnuto. Nevybraný = tmavý obrys,
   vybraný (.is-on) = červený gradient jako ostatní vybrané prvky v appce.
   Velikost je dělaná na prst, ne na myš. */
.watermark-toggle-btn {
    flex-shrink: 0;
    display: block;
    width: 100%;
    height: 64px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    touch-action: manipulation;
    letter-spacing: 0.02em;
}

.watermark-toggle-btn.is-on {
    background: linear-gradient(180deg, #C8182A 0%, var(--color-primary) 60%, #8E0E1B 100%);
    border-color: var(--color-accent-soft);
    color: #FFF4E6;
    box-shadow: var(--shadow-primary);
}

.watermark-toggle-btn:active { transform: translateY(1px); }

/* ── Watermark overlay on canvas host ── */

.watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center center;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: visible;
}

.watermark-overlay:active { cursor: grabbing; }

/* ODSTRANĚNO (dávka 4): průsvitný „duch" vypnutého vodoznaku. Vypnutý vodoznak
   se teď skryje úplně (display:none z JS) — zpátky ho zapne tlačítko. Třída
   .is-off už se nenasazuje; pravidla ponechána jen jako neutralizovaná stopa. */
.watermark-overlay.is-off { display: none; }

.watermark-overlay-img {
    display: block;
    /* Default size: ~30% of canvas width, set precisely by JS */
    width: 100px;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    border: none;
    border-radius: 0;
    max-width: none;
}

.watermark-overlay-handle {
    /* inherits .text-overlay-handle base; positioned bottom-right of watermark img */
    bottom: -18px;
    right: -18px;
}

/* Editor action buttons */
.editor-button-group {
    margin-top: 4px;
    gap: 8px;
}

.editor-button-group .button {
    height: 50px;
    font-size: 20px;
    margin-top: 0;
}

/* ── Bod 2 (dávka 4): PEVNÁ pozice „Hotovo" a „Zpět" ──
   Dřív byla tlačítka posledním prvkem v toku, takže je každá záložka (rámeček /
   můj vzkaz / vodoznak) posunula jinam — při přepnutí skákala nahoru a dolů.
   Nově jsou ukotvená absolutně k #frame-editor-screen (ten je position:absolute,
   height:100 %), takže jejich souřadnice na výšku obsahu záložky vůbec nereagují.
   `bottom: 340px` = spodní polovina obrazovky a zároveň TĚSNĚ NAD klávesnicí
   (panel klávesnice je vysoký 319 px a je fixed u spodní hrany) — tlačítka tak
   drží jednu pozici i s otevřenou klávesnicí a nezmizí pod ní. */
#frame-editor-screen .editor-button-group {
    position: absolute;
    left: var(--spacing-md);
    right: var(--spacing-md);
    bottom: 340px;
    width: auto;
    margin: 0;
    z-index: 5;
}

/* Aby obsah záložek nikdy nepodlezl ukotvená tlačítka, drží spodní odsazení
   obrazovky výšku bloku tlačítek + jejich odsazení od spodní hrany.
   340px bottom + 2 × 50px tlačítko + 8px mezera + 24px vzduch = 472px. */
#frame-editor-screen {
    padding-bottom: 472px;
}

/* Desktop overrides for editor */
@media (min-width: 760px) {
    /* Bod 2 (dávka 4): spodní odsazení musí i tady držet místo pro ukotvená
       tlačítka — 340px bottom + 2 × 56px + 8px mezera + 24px vzduch = 484px. */
    #frame-editor-screen {
        padding: 16px 28px 484px;
        gap: 10px;
        overflow: hidden;
    }

    /* CHANGED (bod 6): výrazně větší na desktopu — clamp(380px, 58vh, 680px) */
    .editor-canvas {
        max-height: clamp(380px, 58vh, 680px);
    }

    /* Larger carousel tiles on desktop */
    .frame-thumb {
        width: 112px;   /* = THUMB_W in JS desktop variant */
    }

    /* CHANGED (bod 7): na desktopu ~4 thumby — 4 × (112px + 12px gap) = 496px */
    .frame-carousel {
        max-width: 512px;
    }

    .frame-thumb-canvas {
        width: 112px;
        height: 63px;   /* 112 * 9/16 = 63 */
    }

    .frame-thumb-none-label {
        height: 63px;
    }

    .editor-text-input { font-size: 18px; height: 54px; }

    .editor-button-group .button { height: 56px; font-size: 22px; }
}

/* ====== VLASTNÍ KLÁVESNICE ====== */

/* Poloprůhledný overlay za panelem — klik = zavřít */
.keyboard-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    /* průhledné — jde jen o zachycení tapů mimo panel */
    background: transparent;
}

/* Panel klávesnice — vyjíždí ze spodku */
.keyboard-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 901;
    background: linear-gradient(180deg, #1A0A0A 0%, #0D0404 100%);
    border-top: 2px solid var(--color-accent-soft);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.75);
    padding: 8px 6px 12px;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    /* Bezpečnostní oblast (notch) */
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    touch-action: none;   /* zamez posouvání stránky přes klávesnici */
}

/* Otevřený stav */
.keyboard-panel.is-open {
    transform: translateY(0);
}

/* Overlay viditelnost řídí JS (keyboard.js) — display:none/block */

/* Pomocný toolbar — hint + tlačítko zavřít */
.keyboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 6px;
    border-bottom: 1px solid rgba(74, 30, 30, 0.6);
    margin-bottom: 6px;
}

.keyboard-hint {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.keyboard-close-btn {
    appearance: none;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    color: var(--color-text-secondary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    touch-action: manipulation;
}
.keyboard-close-btn:active {
    background: var(--color-secondary);
    border-color: var(--color-accent-soft);
    color: var(--color-accent);
}

/* Kontejner všech řad kláves */
.keyboard-keys {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

/* Jeden řádek kláves — full-width, klávesy vyplní celou šířku */
.kb-row {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    gap: 4px;
    width: 100%;
    padding: 0 2px;
    box-sizing: border-box;
}

/* Základní klávesa — roztáhne se přes celou šířku řádku */
.kb-key {
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    /* Žádný max-width — klávesy vyplní celou šířku displeje */
    height: 48px;
    background: #2A0F0F;
    border: 1px solid #4A1E1E;
    border-radius: 6px;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 #1A0808, inset 0 1px 0 rgba(255,255,255,0.05);
    transition: background 0.08s, transform 0.05s;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* Řádek diakritiky — menší výška, plná šířka zachována (flex: 1 1 0) */
.kb-row:first-child .kb-key {
    font-size: 14px;
    height: 40px;
    /* Bez max-width — klávesy se rovnoměrně rozdělí přes celou šířku */
}

.kb-key:active {
    background: #4A1010;
    transform: translateY(1px);
    box-shadow: 0 1px 0 #1A0808, inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Shift klávesa — 1.5× šířka normální klávesy */
.kb-key.key-shift {
    background: #1A0606;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    font-size: 20px;
    flex: 1.5 1 0;
}

/* Shift aktivní (upper case) */
.kb-key.key-shift-active {
    background: var(--color-primary);
    border-color: var(--color-accent-soft);
    color: #FFF4E6;
    box-shadow: 0 2px 0 #6E0A14, inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Backspace — 1.5× šířka normální klávesy */
.kb-key.key-backspace {
    background: #1A0606;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    font-size: 18px;
    flex: 1.5 1 0;
}

/* Enter / nový řádek — stejná šířka jako backspace */
.kb-key.key-enter {
    background: #1A0606;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    font-size: 18px;
    flex: 1.5 1 0;
}
.kb-key.key-enter:active {
    background: #2A0A0A;
    transform: translateY(1px);
}

/* Mezerník */
.kb-key.key-space {
    flex: 1 1 auto;
    max-width: none;
    min-width: 80px;
    letter-spacing: 0.05em;
}

/* Tlačítko Hotovo / Done — 2× šířka normální klávesy */
.kb-key.key-done {
    background: linear-gradient(180deg, #C8182A 0%, var(--color-primary) 60%, #8E0E1B 100%);
    border-color: rgba(224, 178, 90, 0.45);
    color: #FFF4E6;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 2px 0 #6E0A14, 0 0 8px rgba(177,20,35,0.3);
    flex: 2 1 0;
    letter-spacing: 0.02em;
}
.kb-key.key-done:active {
    background: linear-gradient(180deg, #8E0E1B 0%, #6E0A14 100%);
    transform: translateY(1px);
}

/* Přepínací klávesa režimu (123 / ABC / !@#) — 1.5× šířka normální klávesy */
.kb-key.key-mode {
    background: #1A0606;
    border-color: var(--color-border);
    color: var(--color-accent-soft);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    flex: 1.5 1 0;
    letter-spacing: 0.03em;
}
.kb-key.key-mode:active {
    background: #2A0A0A;
    color: var(--color-accent);
    transform: translateY(1px);
}

/* Editor field vizuální stav když je klávesnice otevřena */
.editor-text-input {
    cursor: pointer;
}
.editor-text-input:focus {
    border-color: var(--color-accent-soft);
}

/* REMOVED (bod 7): původní pravidlo zmenšovalo canvas při otevřené klávesnici —
   klávesnice je position:fixed (z-index:901) a leží VE VRSTVĚ NAD obsahem,
   nesmí měnit velikost žádného prvku. Pravidlo bylo:
   #frame-editor-screen.keyboard-open .editor-canvas { max-height: clamp(120px, 18vh, 200px); }
   Nyní zneškodněno — canvas zůstává stejně velký. */

/* ====== CAPTURE FLASH OVERLAY ====== */

/* Bílý záblesk přes oblast kamery při vyfocení.
   Sedí v .camera-wrapper (position:relative), přesně překrývá náhled.
   pointer-events:none — nikdy neblokuje tlačítka pod ním. */
.capture-flash {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 25;   /* nad countdown-overlay (z-index 20) */
}

@keyframes captureFlash {
    0%   { opacity: 0.95; }
    100% { opacity: 0; }
}

.capture-flash.is-flashing {
    animation: captureFlash 280ms ease-out forwards;
}