/* 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) */
    /* KÓD PRO RECEPCI — jediné místo v appce, kde jde o přesnost, ne o ozdobu.
       Ozdobné fonty (Grenze Gotisch na kiosku, Pirata One na /tisk) mají číslice
       stavěné na atmosféru: v Pirata One je 0 jen o chlup užší 8, takže kód 206
       lidé četli jako 286. Host si kód pamatuje cestou k pultu a obsluha ho podle
       něj hledá — jedna přečtená číslice navíc = špatná fotka.
       Inter má 0 jako čistý ovál bez vnitřní příčky (8 má dvě uzavřená bříška),
       1 s praporkem proti 7 s vodorovnou hlavou a 5 s otevřeným bříškem proti
       uzavřenému 6. Žádný nový font se nestahuje — Inter appka načítá už teď
       (index.html, photo.html i tisk.html) jako --font-family, takže kód nepůsobí
       cize a na kiosku nepřibyl ani jeden request navíc.
       POZOR: Google Fonts servíruje statické řezy Interu BEZ volitelných OpenType
       vlastností — `font-feature-settings: "zero" 1` (přeškrtnutá nula) ani "ss02"
       se neprojeví (ověřeno renderem). Čitelnost proto stojí na základních
       tvarech číslic, ne na feature, která by tiše nefungovala. */
    --font-code: "Almendra", "Inter", system-ui, serif;
}

* { 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;
}

/* ====== OBRAZOVKA SOUHLASU SE ZPRACOVÁNÍM OSOBNÍCH ÚDAJŮ ====== */
/*
 * Převzato z webové appky (peklo-certovina-selfie, #gdpr-screen) a přepsáno do
 * kioskových rozměrů — základní (nemediální) styly jsou v tomhle souboru vždycky
 * ty kioskové, telefon si je zmenšuje v bloku `max-width: 759px` (viz M8 dole).
 *
 * DVĚ VĚCI SE OD WEBU LIŠÍ ZÁMĚRNĚ:
 *   1) Nadpis je VENKU ze scrollovací plochy (na webu scrolloval s textem).
 *      Host na kiosku scrolluje prstem a bez nadpisu by po pár tazích netušil,
 *      co vlastně odsouhlasuje.
 *   2) V textu není JEDINÝ klikací odkaz — pravidlo `.gdpr-content a` (na webu
 *      obarvovalo mailto) je proto pryč. Kiosek stojí v parku; kdyby se z něj
 *      dal otevřít prohlížeč nebo poštovní klient, host se z appky prokliká
 *      pryč a kiosek zůstane viset na cizí stránce. Adresy v textu ZŮSTÁVAJÍ,
 *      jen jako prostý text (.gdpr-plain). Hlídá tests/run_gdpr_screen_test.js.
 */

#gdpr-screen {
    height: 100%;
    justify-content: flex-start;
    padding-bottom: var(--spacing-md);   /* stejně jako #mood-screen */
}

#gdpr-screen h2 {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

/* Scrollovací plocha se zněním. `flex: 1` → zabere přesně to, co zbyde mezi
   nadpisem a tlačítky, takže tlačítka drží svoji pozici bez ohledu na délku
   překladu (angličtina je o kus delší než čeština). */
.gdpr-content {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(26, 13, 13, 0.55);
}

/* Posuvník v barvách appky (jinak by byl šedý systémový).
   ZÁMĚRNĚ se tu NEPOUŽÍVÁ standardní `scrollbar-width` / `scrollbar-color`:
   Chrome jim dává přednost před ::-webkit-scrollbar a vykreslí tenký šedý
   proužek.
   POZOR — na DOTYKOVÉM zařízení (a v headless Chrome) jsou posuvníky
   „overlay": objeví se až během tažení a nezabírají místo (naměřeno:
   offsetWidth − clientWidth = 2px, tedy jen rámeček). Že text pokračuje dál,
   proto na kiosku prozrazuje hlavně ostře uříznutý řádek u spodní hrany
   rámečku — stejně jako ve webové appce. */
.gdpr-content::-webkit-scrollbar { width: 14px; }
.gdpr-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 7px;
}
.gdpr-content::-webkit-scrollbar-thumb {
    background: var(--color-accent-soft);
    border-radius: 7px;
    border: 2px solid rgba(0, 0, 0, 0.45);
}

/* 30px: na kioskovém panelu se čte vestoje z ~50 cm, takže webových 14,5px je
   málo. Zároveň je to velikost, při které se znění do plochy NEVEJDE a musí se
   scrollovat — o to jde: host má vidět, že text pokračuje, ne ho mít celý
   naráz drobným písmem. Hlídá tests/run_gdpr_screen_test.js. */
.gdpr-content p,
.gdpr-content .gdpr-intro {
    color: var(--color-text-secondary);
    text-align: left !important;
    font-size: 30px;
    line-height: 1.5;
    margin: 0 0 18px;
}

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

.gdpr-content .gdpr-list li {
    position: relative;
    padding: 14px 0 14px 34px;
    color: var(--color-text-secondary);
    font-size: 30px;
    line-height: 1.45;
    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: 6px;
    top: 30px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
}
.gdpr-content .gdpr-list li strong { color: var(--color-text-primary); font-weight: 700; margin-right: 4px; }

/* Adresy a kontakty (e-mail, sídlo) — jen zvýrazněný PROSTÝ text, nikdy odkaz. */
.gdpr-content .gdpr-plain {
    color: var(--color-accent);
    font-weight: 600;
    white-space: nowrap;
}

.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. */
/* #gdpr-screen je ve výčtech níž ZÁMĚRNĚ: tlačítka souhlasu mají mít stejnou
   velikost a dvojice má být ukotvená na stejnou spodní hranu jako „Potvrdit" na
   dalších krocích, aby host klepal pořád do stejného pruhu obrazovky. Sdílené
   pravidlo (místo opsaných hodnot) je jediný způsob, jak se to časem nemůže
   rozejít.
   POZOR: pravidlo používají i #mood-screen a #select-result-screen. Cokoli, co
   se má týkat JEN obrazovky souhlasu, patří do vlastního pravidla — jinak se
   posunou i kroky, na které se sahat nemá (Sebastian, 19. 8. 2026). */
#mood-screen .button-group,
#select-result-screen .button-group,
#gdpr-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,
#gdpr-agree-button,
#gdpr-decline-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;
}

/* „Souhlasím" je primární akce → stejný ohnivý pulz jako „Potvrdit".
   „Nesouhlasím" zůstává klidné, aby se dvě stejně velká tlačítka nepletla. */
#gdpr-agree-button { animation: firePulse 4.2s ease-in-out infinite; }

#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;
}
/* Obžerství (2026-07-30): předloha je na výšku (848×1264) — silueta sedí v horní
   polovině, prostřený stůl je ve spodní. Při `center` by širší dlaždici ukrojila
   hlavu jen o pár pixelů, proto `center 40%`: výřez se posune nahoru, nad hlavou
   zůstane rezerva a stůl s jídlem je pořád vidět.
   `background-color` je pojistka — kdyby obrázek chyběl, dlaždice zůstane tmavě
   vínová a použitelná. Odstín drží kategoriovou barvu ze statistik ztmavenou na
   48 % (2026-07-31: #A32A5D → #4E142D; dřív indigová #634BC9 → #2F2461, ta ale
   z pekelné palety vypadávala). */
.mood-button[data-mood="Obzerstvi"]::before {
    background-color: #4E142D;
    background-image: url("assets/img/mood-obzerstvi.png");
    background-size: cover;
    background-position: center 40%;
}
/* Lakota (2026-08-04): předloha je na výšku (848×1264), sedící silueta na hromadě
   pokladu. Hlava začíná na 26 % výšky, chodidla končí na 77 %. Při `center` by
   v širší dlaždici (typicky ~1,38:1) výřez začínal na 25,7 % a hlavu by ukrojil
   o pár pixelů — stejná past jako u Obžerství. `center 40%` posune výřez nahoru
   na 20,6 %, nad hlavou zůstane ~70 px rezervy a hromada mincí je pořád vidět.
   `background-color` je pojistka pro případ chybějícího obrázku; drží
   kategoriovou barvu ze statistik (#E3E829 sirná žlutá) ztmavenou na 48 %. */
.mood-button[data-mood="Lakota"]::before {
    background-color: #6D6F14;
    background-image: url("assets/img/mood-lakota.png");
    background-size: cover;
    background-position: center 40%;
}
.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 ====== */
/* #blocked-screen (snímek neprošel bezpečnostní kontrolou) má stejnou stavbu
   — nadpis, odstavec, jedno tlačítko — proto sdílí i vzhled. */

#error-screen, #blocked-screen { justify-content: center; padding-top: 120px; }
#error-screen h2, #blocked-screen h2 { color: var(--color-accent); }
#error-screen p, #blocked-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; }

    /* SOUHLAS SE ZPRACOVÁNÍM ÚDAJŮ tady ZÁMĚRNĚ žádné overridy nemá.
       Základní styly jsou v tomhle souboru kioskové (viz hlavička bloku
       „MOBILNÍ ZOBRAZENÍ" dole) a obrazovka souhlasu je stavěná rovnou na
       kiosek: scrollovací plocha si bere zbylou výšku přes `flex: 1`, takže se
       na nižším desktopovém okně sama zmenší a nic nepřeteče. Původní overridy
       zděděné z webové appky (max-height: 58vh, malé písmo, posun tlačítek přes
       34vh) tu byly na obrazovku, která v kiosku vůbec neexistovala, a musely
       pryč — jinak by přebily kioskové rozměry. */

    /* 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, #blocked-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; }
    /* ZDE BYLO `#print-qr .qr-img { width: 360px; height: 360px; }` — velikost QR
       ke stažení na závěrečné obrazovce. QR je od 2026-08-17 zrušený (zadání
       klientky „Konec sdílení z obrazovky“, viz #print-code-wrap-anim v index.html),
       takže selektor neměl na co sedět. Základní `.qr-img` ZŮSTÁVÁ — jede podle něj
       QR na platební obrazovce (#payment-qr-img). */

    /* 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).

   CHANGED (2026-08-19): čtverec ZRUŠEN → okno je NA VÝŠKU v poměru FOTKY.
   Čtvercové okno fotku s `object-fit: cover` po stranách i nahoře/dole
   ořezávalo (Sebastian: „ten formát nemůže být čtverec, protože to pak
   uřezává, musí to být normálně ten správný formát").

   ⚠ POMĚR JE 848 / 1264 A NENÍ TO PŘEKLEP — NEZAOKROUHLOVAT NA 2 / 3! ⚠
   Fotky ze sady jsou 848×1264, což NENÍ 2:3: 848 × 1,5 = 1272, ne 1264.
   Skutečný poměr je 1:1,4906, kdežto 2:3 je 1:1,5. S hezkým `2 / 3` proto
   `object-fit: cover` pořád ukrajoval 0,63 % šířky (na kiosku ~1,5px z každé
   strany) — a ořez je přesně to, co se tímhle zadáním rušilo. Se `848 / 1264`
   je ořez NULOVÝ v obou osách (změřeno v prohlížeči). Kdyby se někdy měnila
   sada ukázek, musí se sem přepsat rozměr NOVÝCH fotek, ne se to „opravit"
   na kulaté číslo. Ze stejného důvodu je i násobitel níž 848/1264, ne 2/3 —
   ta dvě čísla MUSÍ zůstat stejná, jinak přestane sedět výška (viz dál).

   OPRAVA (2026-08-19, tentýž den): první pokus poměr vyrobil ZVÝŠENÍM okna
   (šířka zůstala, výška × 1,5) — na kiosku 688×688 → 688×1032. Tím se
   .attract-content (`justify-content: space-evenly`) přepočítal a POSUNUL
   nadpis i tlačítko START. Sebastian to poznal okamžitě a opakovaně: s
   ostatními prvky se hýbat NESMÍ. Poměru se proto dosahuje ZÚŽENÍM, ne
   zvýšením: okno si drží PŘESNĚ tu výšku, kterou měl čtverec, a šířka z ní
   vyjde jako výška × 848/1264. Na kiosku 688×688 → 462×688 — svisle stejné
   místo, takže se ostatní prvky nemají kam pohnout (změřeno, viz níž).

   Rozhoduje tedy VÝŠKA, a tu pořád určuje NEJMENŠÍ ze tří původních mezí
   (logika i rezerva zůstaly beze změny, jen se vztahují k výšce místo šířky):
     • 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 — rezerva na hlavičku, nadpis, podnadpis, START a mezery.
   Výsledek se násobí 848/1264 → šířka. Protože `aspect-ratio` z té šířky
   dopočítá výšku zpátky (× 1264/848), je výška IDENTICKÁ se stranou původního
   čtverce — to je celý trik a drží jen díky tomu, že násobitel a aspect-ratio
   jsou TÁŽ dvojice čísel. Na kiosku 1080×1920 je binding mez pořád `100 %` →
   výška 688px, šířka 462px; třetí mez tam vychází 1420px a neuplatní se.
   `min-width` je ze stejného důvodu obrácené: původní čtverec měl dolní mez
   220px na STRANU, takže dolní mez výšky musí zůstat 220px → min-width =
   220 × 848/1264 = 147,6px (okno pak nikdy nevyjde nižší než 220px, stejně
   jako dřív). Na velmi nízkých oknech (1366×768, 375×667) je binding právě
   ono a okno vyjde 148×220px — svisle přesně tolik jako dřívějších 220×220. */
.attract-slideshow {
    position: relative;
    width: calc(min(100%, 700px, 100vh - 500px) * 848 / 1264);
    min-width: calc(220px * 848 / 1264);
    height: auto;
    aspect-ratio: 848 / 1264;
    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: přiblížení ZE STŘEDU ────────────────────────────────────────
   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.

   CHANGED (2026-08-19): ŽÁDNÉ PANORÁMOVÁNÍ. Do 19. 8. každá varianta kromě
   přiblížení obraz i posouvala (`translate(±3,5%, …)`), takže snímek při
   zvětšování ujížděl do strany — Sebastian: „ty animace těch fotek se zvětšují
   jenom do nějaké strany, chci aby se zvětšovaly do středu". Ve všech čtyřech
   variantách proto zůstalo POUZE `scale()`; s `transform-origin: center center`
   (níž na `.slide img`) tím střed obrazu drží na místě a přiblížení je
   symetrické do všech stran.

   Čtyři varianty ZŮSTALY, jen se odlišují ROZSAHEM přiblížení místo směru
   posunu — jinak by po sobě všechny snímky jely úplně stejně. Všechny se jen
   ZVĚTŠUJÍ (žádné oddalování), liší se výchozím měřítkem a tím, o kolik
   narostou, takže mají znatelně jiné tempo. Díky tomu se nemusel sahat na
   KB_VARIANTS v main.js (pořád kb-0…kb-3) a nezůstala žádná mrtvá třída.
   Délka (6 s) ani prolínání se NEMĚNÍ — mění se jen dráha pohybu. */

@keyframes kb-zoom-center-1 {
    /* Varianta 0 — celý rozsah, z nezvětšeného obrazu */
    from { transform: scale(1.00); }
    to   { transform: scale(1.15); }
}
@keyframes kb-zoom-center-2 {
    /* Varianta 1 — začíná mírně přiblížená, stejné tempo */
    from { transform: scale(1.04); }
    to   { transform: scale(1.19); }
}
@keyframes kb-zoom-center-3 {
    /* Varianta 2 — nejmírnější, pomalejší nárůst */
    from { transform: scale(1.00); }
    to   { transform: scale(1.10); }
}
@keyframes kb-zoom-center-4 {
    /* Varianta 3 — nejvýraznější nárůst, nejrychlejší tempo */
    from { transform: scale(1.02); }
    to   { transform: scale(1.20); }
}

/* 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-center-1; }
.slide.kb-1 img { animation-name: kb-zoom-center-2; }
.slide.kb-2 img { animation-name: kb-zoom-center-3; }
.slide.kb-3 img { animation-name: kb-zoom-center-4; }

/* 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;
}

/* Fotka NA ŠÍŘKU na obrazovce výběru varianty.
   Dlaždice měla natvrdo `aspect-ratio: 3 / 4` a obrázek `object-fit: cover`,
   takže se fotka na šířku cpala do portrétního rámu a `cover` jí uřízl 55 %
   šířky (nové 3:2) resp. 62 % (staré 16:9) — z fotky zbyl svislý výřez ze
   středu a vodoznak s logem v PRAVÉM DOLNÍM rohu zmizel úplně.
   Dlaždice proto dostane SKUTEČNÝ poměr obrázku; hodnotu --result-ar nasazuje
   markResultOrientation() v assets/js/ui.js podle naturalWidth/naturalHeight
   načteného náhledu, takže to sedí na 3:2 i na 16:9 i na cokoli dalšího, co
   model vrátí. `contain` je pojistka pro případ, že rozměr dlaždice zkrátí
   max-width / max-height (málo místa) a poměr rámu tím přestane sedět na fotku:
   pak zbydou po stranách pruhy podkladu, ale fotka zůstane celá.
   Poměr NENÍ napsaný natvrdo ani tady — 3 / 2 je jen záloha pro případ, že by
   se třída objevila dřív než rozměr.
   Fotek NA VÝŠKU (bez .is-landscape) se to netýká — zůstává 3/4 + cover. */
.result-grid-4 .result-image-container.is-landscape {
    aspect-ratio: var(--result-ar, 3 / 2);
}
.result-grid-4 .result-image-container.is-landscape .result-image {
    object-fit: contain;
}

/* Dvě varianty pod sebou (ostrý provoz): dlaždice brala výšku celého řádku
   (`height: 100%`), takže by široké fotce zbyly nahoře a dole pruhy podkladu
   uvnitř dlaždice — a rámeček výběru by objímal prázdno místo fotky. Šířku
   proto určuje řádek a výšku dopočítá poměr fotky; `max-height: 100%` hlídá,
   aby dlaždice nikdy nepřerostla svůj řádek (u málo široké fotky na úzkém
   displeji), a `align-self: center` ji v řádku posadí na střed. */
.result-grid-4.count-2 .result-image-container.is-landscape {
    width: 100%;
    height: auto;
    max-height: 100%;
    align-self: center;
}

/* ====== 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ší a vyjede nahoru, aby uvolnila spodní
   polovinu obrazovky pro blok s kódem. Jeden transform = jedna plynulá animace.

   HISTORIE ZADÁNÍ — čti obojí, druhé ruší jen ČÁST prvního:
   • 2026-08-17 (uživatel): odebrání QR ze závěrečné obrazovky se těchto hodnot
     NETÝKÁ. Mezidobě tu stálo `translateY(-17vh) scale(0.72)`, což kromě fotky
     POSUNULO i celou obrazovku — vráceno zpět.
   • 2026-08-19 (Sebastian): „náhled fotografie i kód udělat větší, je tam teď
     místo". Zvětšení je tedy nově VÝSLOVNĚ chtěné — ale platí pořád, že se nic
     nesmí posunout. Proto se změnilo JEDINÉ číslo: měřítko 0,62 → 0,76.
     `translateY(-24vh)` zůstává přesně jako dřív, takže fotka roste kolem svého
     středu a nikam neodjíždí; nemění se ani `max-height` obrázku.

   PROČ PRÁVĚ 0,76 (naměřeno na kiosku 1080×1920, nejvyšší možný snímek 2:3):
   horní hrana fotky sedí na y = 184,7 px, tedy 58,7 px pod zlatou linkou
   hlavičky (y = 126) — fotka se pod hlavičku nedostane. Spodní hrana je
   y = 978,2 px, do horní hrany rámečku s kódem (y = 1271,8) zbývá 293,6 px.
   Poměr stran fotky je vždy 2:3 nebo 3:2 (tvrdě si ho vynucuje
   generationConfig.imageConfig v netlify/functions/stylize.js), takže vyšší
   snímek než 2:3 sem přijít nemůže. */
#print-photo-wrap.shifted-up {
    transform: translateY(-24vh) scale(0.76);
}

/* 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;
}

/* ── Kód pro recepci vyjíždí zespoda na uvolněné místo pod fotkou ──
   OPRAVA (kiosek 2026-07-22, bod 2): blok 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 mizela za fotkou a na kiosku to
   vypadalo, že podlézá fotku. Nově je 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

   PŘEJMENOVÁNO 2026-08-17 z #print-qr-wrap-anim: QR ke stažení se z obrazovky
   zrušil a v tomhle rámu zůstal JEN kód pro recepci. Starý název by lhal. */
#print-code-wrap-anim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 288px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* NAD fotkou — kód 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-code-wrap-anim.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* ── Řádek, ve kterém stál QR vedle bloku s kódem (dřív `.print-qr-row`) ──
   QR je od 2026-08-17 pryč, ROZMĚRY, které tenhle řádek držel, ale ZŮSTÁVAJÍ.
   Zadání uživatele: „když zmizí QR, rámeček s kódem se dostane doprostřed,
   protože se vlevo uvolní místo — jinak všechno zůstává tak, jak je."
   Mění se tedy JEDINÁ věc: blok už není přisazený vpravo, ale vystředěný
   (`justify-content: center` byl v pravidle i dřív a teď se konečně projeví).
   Velikost bloku ani jeho svislá poloha se nehnou.

   `min-height` je výška, kterou řádku dával QR: 360 px obrázek + 2× 8 px jeho
   vnitřní okraj + rám 12/12/10 + 2× 2 px linka + 10 px mezera a popiska pod ním
   = 416 px (naměřeno na produkci). Bez ní by se řádek smrskl na výšku bloku
   a celý spodek obrazovky by povyskočil o ~110 px níž. */
.print-code-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 12px;
    min-height: 416px;
}

/* Šířka bloku s kódem.
   DO 2026-08-18 tu bylo `calc(100% - 408px)` = 288 px na kioskovém rozvržení —
   přesně ta šířka, kterou blok měl, když vedle něj stál QR (388 px i s rámem
   + 20 px mezera).

   ZVĚTŠENO 2026-08-19 na 420 px — ZADAL SEBASTIAN: „na konečné obrazovce bych
   obě okna chtěl udělat větší, hlavně ten kód; teď je tam místo, protože se
   odstraněním QR uvolnilo." Uvolněné místo je právě to vodorovné po QR, takže
   se využívá přesně tam, kde vzniklo. Odčítá se proto 276 px místo 408 px:
   na řádku o vnitřní šířce 696 px (.app-container 720 px − 2× 12 px odsazení)
   z toho vyjde 420 px a po stranách zůstává 138 px vzduchu.
   Zápis přes `calc` zůstává, aby blok držel i na jiných šířkách appky.

   DŮSLEDEK, KTERÝ MÁ BÝT VIDĚT: vnitřní šířka bloku je 392 px, takže se do ní
   nejdelší úvodní věta („Want your photo printed at the reception?" = 352 px)
   vejde NA JEDEN ŘÁDEK; dřív se při 260 px lámala na dva. Písma úvodní věty
   ani nápovědy se NEMĚNÍ (24 px / 18 px) — mění se jen šířka okna.
   Blok je pořád svisle vystředěný v .print-code-row, které si drží svých
   416 px, takže se ani po zvětšení nehne NIC pod ním (kód, odpočet, tlačítko). */
.print-code-block {
    flex: 0 0 calc(100% - 276px);
    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;
    /* Čitelný font místo ozdobného — viz --font-code v :root. Tučnost i zlatá
       zůstávají. Váha 800 (ne 900): index.html načítá Inter v řezech 400–800,
       900 by prohlížeč jen synteticky ztloustl a číslice by zbytečně zaplácl. */
    font-family: var(--font-code);
    /* ZVĚTŠENO 2026-08-19 ze 76 px — ZADAL SEBASTIAN: kód je to hlavní, co si
       host z obrazovky odnáší (nahlašuje ho na recepci), a po odebrání QR je na
       něj místo. Strop dává šířka bloku: nejširší trojice číslic („000") měří
       v Almendře 2,4758 × velikost písma, tedy 371,4 px při 150 px — do vnitřní
       šířky bloku (392 px) se vejde s rezervou 20,6 px. Výška bloku tím naroste
       na 249,4 px, což je pořád méně než 416 px, které si drží .print-code-row
       — nic pod blokem se proto nehne. */
    font-size: 150px;
    font-weight: 800;
    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)
 *
 * OPRAVA 2026-08-17 — anglický nápis přetékal z červené pilulky.
 * `.button` nemá žádné vodorovné odsazení (globální `* { padding: 0 }`), takže
 * text směl jít až na krajní pixel tlačítka. České „Vyfotit další" je krátké
 * a nevadilo to; anglické „Take another photo" má v Grenze Gotisch při 44 px
 * asi 355 px, tedy skoro celou vnitřní šířku 358 px — písmena ležela přímo
 * v zaoblených koncích pilulky (poloměr = polovina výšky) a vypadalo to, že
 * text z tlačítka leze ven.
 *
 * ŘEŠENÍ JE STRUKTURNÍ, ne číslo ušité na angličtinu:
 *   • `padding: 0 0.9em` — odsazení je v `em`, takže se samo přepočítá s každou
 *     velikostí písma (44 px → ~40 px, 22 px na telefonu → ~20 px). Do zaoblených
 *     konců se text nedostane při ŽÁDNÉ délce ani na žádném breakpointu.
 *   • text se smí zalomit a tlačítko ho vystředí (`display: flex` + `align-items`
 *     / `justify-content: center`, `text-wrap: balance`). Kapacita jsou tím pádem
 *     DVA plné řádky (2 × 46 px se do vnitřní výšky 106 px vejdou), tedy zhruba
 *     2,5násobek nejdelšího dnešního nápisu — delší jazyk se zalomí, místo aby
 *     přetekl.
 *
 * GEOMETRIE SE NEMĚNÍ: výška 108 px, max. šířka 360 px, poloha i pulzování
 * zůstávají — host mačká pořád na stejném místě. České znění se vejde na jeden
 * řádek úplně stejně jako dřív; `line-height` u jediného vystředěného řádku
 * polohu písma neposune, půlvedení je symetrické. */
#another-button {
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 108px;
    padding: 0 0.9em;
    font-size: 44px;
    line-height: 1.05;
    text-wrap: balance;
    animation: firePulse 4.2s ease-in-out infinite;
}

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

    /* Bod 3: bez pohybu — fotka i kód pro recepci 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-code-wrap-anim {
        transform: none;
        transition: opacity 0.3s ease;
    }
    #print-code-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 */
}

/* ZRUŠEN ZLATÝ PRSTENEC KOLEM NÁHLEDU (uživatel 2026-08-13: „Co je ten hnusnej
   divnej oranžový rámeček okolo?" nad QR_MENSI_1_editor_navysku.png).
   Byl to `0 0 0 3px var(--color-accent-soft)` = 3px kruh v barvě #C8923A těsně
   kolem plátna — v náhledu vypadal jako druhý, ošklivý rámeček přes ten ozdobný,
   který si host právě vybírá. Náhled má ukazovat FOTKU, ne rám kolem ní.
   Stín (--shadow-lg) zůstává, plátno se tedy pořád odděluje od pozadí.
   POZOR: mění se JEN náhled v editoru. Týž prstenec u jiných obrazovek
   (výběr varianty, tisk) zůstává — tam nic ozdobného nepřekrývá. */
.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);
    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;
    /* `pre` doplňuje JS (syncOverlay) kvůli \n; nezalamovat se nesmí v žádném
       případě — canvas při pálení nezalamuje taky, viz komentář v syncOverlay. */
    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: 84 * 2/3 = 56px (3:2) */
    height: 56px;
    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 3:2 canvas inside a frame thumb.
   ZMĚNA 16:9 → 3:2 (2026-08-03): landscape kompozit se skládá 3:2 (viz
   composeOnCanvas ve frame-editor.js, mini plátno 112×75). Box 84×47 byl
   16:9, takže `object-fit: cover` miniatuře uřízl ~15 % nahoře a dole —
   přesně ten ořez rámečku, který se opravuje u velkých fotek. */
.frame-thumb-canvas {
    display: block;
    width: 84px;
    height: 56px;   /* 84 * 2/3 ≈ 56 */
    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;
}

/* ── ZAČÁTEK BLOKU QR — zabrané místo pro QR kód v editoru ──
   Není to ovládací prvek. Na rozdíl od nápisu a vodoznaku nemá úchyt, nereaguje
   na dotyk (pointer-events: none) a leží NAD vším ostatním — přesně jako QR ve
   výsledné fotce, aby bylo vidět, že překryje i to, co si host přidá.
   Velikost, polohu, natočení i barvy nastavuje JS (syncQrPlaceholder ve
   frame-editor.js); tady je jen to, co se během života náhledu nemění.

   PROČ `.qr-misto` A NE `.qr-placeholder`: třída `.qr-placeholder` už v tomhle
   souboru existuje — je to panel s QR kódem na platební a tiskové obrazovce
   (výš v souboru, tmavé pozadí + zlatý rám). Stejné jméno by náhledu v editoru
   přisadilo rám a podklad, se kterými nemá nic společného. */
.qr-misto {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center center;
    pointer-events: none;   /* host s ním nehýbe — jen vidí, že je místo zabrané */
    user-select: none;
    -webkit-user-select: none;
    /* Nápis i vodoznak mají z-index auto, takže tohle je vždycky nad nimi. */
    z-index: 3;
    line-height: 0;
}

.qr-misto-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
}

/* Světlá ploška, kam přijde samotný kód. Barvu i velikost písma dosazuje JS
   z QR_STYLE, aby výměna vzhledu jedinou konstantou platila i pro náhled.

   ZRUŠEN PŘERUŠOVANÝ OBRYS (`outline: 2px dashed`, uživatel 2026-08-13).
   Měl říkat „tady něco teprve bude", jenže vypadal jako VÝBĚROVÝ RÁMEČEK
   z grafického editoru — tedy jako prvek, se kterým si host může hrát. Přesně
   opačně, než jak se náhled chová (nedá se s ním hýbat, nemá úchyt).
   Náhled teď ukazuje ploškou přesně to, co se do fotky vypálí: světlý podklad
   QR na minci, nic navíc.

   ŽE JE MÍSTO ZABRANÉ, se pozná JINAK NEŽ OBRYSEM — dvěma věcmi, které tam
   byly i dřív a obrys je jen přebíjel:
     • popiskou „QR kód" uprostřed plošky,
     • samotnou ploškou v barvě QR_STYLE.light na tmavé fotce.
   K tomu měkké zapuštění do materiálu (::before níž), aby ploška působila jako
   součást mince, ne jako nalepený štítek. */
.qr-misto-zona {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
}

/* Měkké zapuštění plošky do materiálu — vnitřní stín, ne obrys. Barvu bere
   z `currentColor`, kterou JS dosazuje z QR_STYLE.dark, takže výměna vzhledu
   jedinou konstantou platí i tady. Krytí je nízké schválně: má to být stín,
   ne linka. */
.qr-misto-zona::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 10px 3px currentColor;
    opacity: 0.22;
    pointer-events: none;
}

.qr-misto-popisek {
    font-family: var(--font-family);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── NEJVYŠŠÍ VRSTVA — plátek QR nad vším ostatním (Sebastian 2026-08-19) ──
   Nápis („vodoznak") i vzkaz hosta jsou živé HTML vrstvy NAD plátnem editoru,
   kdežto plátek se kreslí DO plátna — sám o sobě by tedy v náhledu skončil pod
   nimi, přestože ve vypálené fotce je úplně nahoře. Tahle vrstva to srovnává:
   z-index ji staví nad .text-overlay i .watermark-overlay (obě mají z-index
   auto) a nad dřívější .qr-misto (z-index 3).
   Polohu, velikost i obsah nastavuje syncQrVrstvu() ve frame-editor.js —
   obsah se KOPÍRUJE z plátna, ne kreslí znovu, takže náhled sedí s výtiskem.
   Host s ní nehýbá: pointer-events: none, aby tažení vodoznaku pod ní fungovalo
   dál a nic se hostovi nezakazovalo. */
.qr-vrstva {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    line-height: 0;
}
/* ── KONEC BLOKU QR ── */

/* 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: 75px;   /* 112 * 2/3 ≈ 75 (3:2, bylo 63 = 16:9) */
    }

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

    .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;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILNÍ ZOBRAZENÍ (telefon)
   ══════════════════════════════════════════════════════════════════════════
   Do 2026-07-31 tenhle soubor NEOBSAHOVAL jediný `max-width` breakpoint —
   základní (nemediální) styly jsou kioskové rozměry pro velký dotykový panel
   a telefon je dostával 1:1. Viz mobilní audit, nález K1.

   Hranice je 759px ZÁMĚRNĚ: všechny stávající overridy v tomhle souboru jsou
   v `@media (min-width: 760px)`, takže se s tímhle blokem nikde nepotkají a
   desktop/kiosek zůstává bit po bitu stejný.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 759px) {

    /* ── K1: ovládání fotoaparátu ──────────────────────────────────────────
       Na 375px zbývalo po odečtení pevné mezery 188px na obě tlačítka jen
       ~155px, zatímco „Je nás víc“ při 28px a `white-space: nowrap` potřebuje
       ~137px → text přetékal o 13px a spoušť o průměru 192px překrývala
       vnitřní půlky obou tlačítek („sem sá“ / „nás víc“).

       Spoušť zmenšena na 112px a mezera musí zůstat rovná jejímu průměru
       (mínus 4px překryv), jinak se spoušť a tlačítka rozejdou.
       `white-space: normal` je pojistka: kdyby se popisek na jeden řádek
       přece jen nevešel (320px, delší překlad), zalomí se místo přetečení. */
    .camera-cluster-row { min-height: 112px; }

    #capture-button {
        width: 112px;
        height: 112px;
        border-width: 6px;
        box-shadow:
            0 0 0 6px rgba(177, 20, 35, 0.4),
            0 6px 16px rgba(0, 0, 0, 0.75),
            0 0 20px rgba(177, 20, 35, 0.55);
    }

    #group-toggle-wrap { gap: 108px; }   /* = 112px spoušť − 4px překryv */

    #group-toggle-wrap .toggle-btn {
        font-size: 15px;
        padding: 14px 6px;
        gap: 3px;
        white-space: normal;
    }
    #group-toggle-wrap .toggle-btn .ico { font-size: 22px; }

    /* ══════════════════════════════════════════════════════════════════════
       DRUHÝ PRŮCHOD (2026-07-31) — zbytek obrazovek.
       První průchod řešil jen fotoaparát (K1 výše). Následující bloky M1–M7
       dolaďují navigační lištu, potvrzení fotky, generování, výběr varianty,
       editor a obrazovku s QR. Vše zůstává uvnitř `max-width: 759px`, takže
       se desktopu ani kiosku (1080×1920) nedotkne.
       ══════════════════════════════════════════════════════════════════════ */

    /* ── M1: logo v navigační liště ────────────────────────────────────────
       `.header-center-logo` má v základu `display: none` a zapíná se teprve
       v `min-width: 760px` → na telefonu v liště ŽÁDNÉ logo nebylo (naměřeno
       0 × 0 px). Wordmark je 999 × 338 px, při výšce 38 px je široký 112 px.
       Vlajka končí na x = 55 px, přepínač jazyka začíná na x = 315 px (na
       375px displeji), takže vystředěné logo 104–216 px se s nimi nepotká
       ani na 320px displeji. `pointer-events: none` — logo není tlačítko,
       domů se chodí přes vlajku vlevo. */
    .header-center-logo {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 38px;
        width: auto;
        pointer-events: none;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65));
    }

    /* ── M2: potvrzení fotky („Líbí!" / „Vyfotit znovu") ───────────────────
       Základ je kioskový: 150px vysoká tlačítka s písmem 54/48px. Na 375×667
       zabírala i s mezerou 324 px z 603 px použitelné výšky a přelepila celý
       náhled právě pořízené fotky. */
    .camera-btn-big { height: 60px !important; font-size: 24px !important; }
    .camera-btn-big.button-secondary { height: 60px !important; font-size: 22px !important; }
    .camera-confirm-buttons { gap: 12px; padding-bottom: 28px; max-width: 420px; }

    /* ── M3: obrazovka generování („pekelná kuchyně") ──────────────────────
       Nadpis 76px se lámal do tří řádků (228 px) a spinner 400 px se do
       343px široké plochy nevešel: `margin: 0 auto` se při přetečení chová
       jako 0, takže prstenec seděl nalepený vlevo (naměřený střed 216 px
       místo 187 px) a spodkem přetékal o 166 px pod obrazovku.
       Prstenec masky se musí zmenšit ve stejném poměru jako průměr
       (400 → 32 px odpovídá 150 → 12 px), jinak by byl neúměrně tlustý. */
    /* `#generating-screen` má `justify-content: center`, ale `.screen` nemá
       nastavenou výšku, takže se box smrskl na výšku obsahu a centrování
       nemělo co dělat — skupina visela u horní hrany. */
    #generating-screen { height: 100%; }
    #generating-screen h2 { font-size: 32px; margin-bottom: 10px; }
    #generating-screen p { margin-bottom: 10px; }
    .generating-sub { font-size: 14px; margin-top: 8px; }
    .spinner {
        width: 150px;
        height: 150px;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
                mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
    }

    /* ── M4: výběr varianty + potvrzovací tlačítka ─────────────────────────
       Produkce nabízí 2 varianty (VARIANT_COUNT v assets/js/api.js), mřížka
       tedy jede přes `.count-2` s `grid-auto-rows: minmax(0, 1fr)`. Kioskový
       nadpis 76px (152 px na dva řádky), podnadpis 32px (96 px) a odsazení
       mřížky 56 px sežraly na 375×667 tolik místa, že na obě dlaždice zbylo
       52 px výšky → náhledy byly 39 × 52 px, prakticky neviditelné. */
    #select-result-screen { padding-top: 8px; }
    #select-result-screen h2 { font-size: 30px; margin-bottom: 2px; }
    #select-result-screen .result-head p { font-size: 15px !important; }
    .result-grid-4 { margin-top: 12px; gap: 10px; }
    .result-grid-4.count-2 { margin-top: 10px; margin-bottom: 10px; }
    #mood-screen .button-group,
    #select-result-screen .button-group,
    #gdpr-screen .button-group { margin-top: 8px; margin-bottom: 10px; }
    #mood-confirm-button,
    #result-confirm-button,
    #gdpr-agree-button,
    #gdpr-decline-button { height: 52px; font-size: 20px; }

    /* ── M8: souhlas se zpracováním osobních údajů ─────────────────────────
       Základ je kioskový (nadpis 46px, znění 26px). Na 375×667 by se do
       použitelné výšky 603 px vešly sotva tři řádky textu a dvě 96px tlačítka
       by zabrala třetinu displeje. Tlačítka jedou se stejným zmenšením jako
       „Potvrdit" výše (52px) — geometrie se drží pohromadě i na telefonu. */
    #gdpr-screen h2 { font-size: 22px; margin-bottom: 8px; }
    .gdpr-content { padding: 10px 12px; }
    .gdpr-content p,
    .gdpr-content .gdpr-intro { font-size: 13px; margin-bottom: 10px; }
    .gdpr-content .gdpr-list li { font-size: 13px; padding: 7px 0 7px 20px; }
    .gdpr-content .gdpr-list li::before { top: 14px; left: 4px; width: 6px; height: 6px; }
    .gdpr-content::-webkit-scrollbar { width: 8px; }
    .gdpr-content::-webkit-scrollbar-thumb { border-width: 1px; }

    /* ── M5: editační obrazovka (rámeček / vzkaz / vodoznak) ───────────────
       Tlačítka „Hotovo" a „Zpět" jsou ukotvená na `bottom: 340px`, což je na
       kiosku 1080×1920 spodní třetina, ale na telefonu (použitelná výška
       603 px) to vyšlo doprostřed NÁHLEDU — obě tlačítka ležela přes fotku
       (naměřeno y = 221–329 px, canvas y = 113–473 px). Na tuhle hodnotu je
       navázané i `padding-bottom: 472px`, které na telefonu vytlačilo
       karusel rámečků (spodek 664 px) pod ořez `overflow: hidden`.
       Na telefonu proto tlačítka patří na spodní hranu a odsazení obsahu
       drží jen jejich skutečnou výšku: 12 px od kraje + 2 × 46 px + 8 px
       mezera + 26 px vzduch = 138 px. */
    #frame-editor-screen { padding: 10px var(--spacing-md) 138px; gap: 6px; }
    #frame-editor-screen h2 { font-size: 20px; margin-bottom: 2px; }
    #frame-editor-screen .editor-button-group { bottom: 12px; }
    .editor-button-group { gap: 8px; }
    .editor-button-group .button { height: 46px; font-size: 18px; }

    /* Náhled musí nechat místo na záložky (40 px) + panel (do 130 px)
       + ukotvená tlačítka (138 px). */
    .editor-canvas { max-height: clamp(150px, 32vh, 300px); }

    .editor-tab { height: 40px; font-size: 15px; }
    .editor-tabs { gap: 5px; }
    .watermark-toggle-btn { height: 48px; font-size: 20px; }

    /* Otevřená klávesnice je fixed panel vysoký 319 px (na 375×667 začíná na
       y = 348). S novým rozvržením zůstává NAD ní celý náhled (canvas končí
       na y = 317) — před opravou ho klávesnice půlila. Pole se vzkazem pod
       ní zmizí, ale psaný text je vidět živě v overlayi přímo na fotce.

       Náhled se ZÁMĚRNĚ nezmenšuje a obrazovka se ZÁMĚRNĚ neposouvá:
       pozici textového i vodoznakového overlaye dopočítá JS z rozměru
       canvasu při vykreslení a na pozdější CSS změnu velikosti nereaguje
       (`resize` listener ve frame-editor.js visí jen na window), takže by
       se overlaye od fotky odlepily. Přesně proto bylo v roce 2026-07-22
       zneškodněné i původní pravidlo, které canvas při psaní zmenšovalo.

       Ukotvená tlačítka se schovají — leží pod klávesnicí (y = 557), byla
       by tedy stejně nedostupná, a klávesnice má vlastní „Hotovo". */
    #frame-editor-screen.keyboard-open .editor-button-group { display: none; }

    /* ── M6: závěrečná obrazovka s kódem pro recepci ───────────────────────
       PŮVODNĚ (M6) tu vedle kódu stál ještě QR ke stažení: 300 px + rám = 328 px
       široký blok začínal na x = 0 (mimo vnitřní odsazení), takže na blok s kódem
       zbylo 28 px — text se zalomil do svislého proužku a třímístný kód končil
       48 px ZA pravou hranou displeje. QR je od 2026-08-17 zrušený, takže tenhle
       střet o šířku už nemůže nastat.

       VELIKOSTI ZŮSTÁVALY PŮVODNÍ (uživatel 2026-08-17) — po QR se blok
       NEZVĚTŠOVAL, jen se posunul vodorovně doprostřed.

       ZMĚNA 2026-08-19 (zadal Sebastian): blok s kódem se ZVĚTŠUJE, a to i tady
       — uvolněné místo po QR je vodorovné a na telefonu je stejně jako na
       kiosku. Zvětšuje se JEN šířka bloku a velikost kódu; písma úvodní věty
       i nápovědy zůstávají (13 px / 11 px).

       FOTKA SE NA TELEFONU NEZVĚTŠUJE. Nemá kam: blok povyroste ze 109,5 na
       132,8 px a jeho horní hrana tím sama vyjede nahoru, takže mezi fotkou
       a rámečkem s kódem zbývá jen ~40 px. Zvětšení fotky je proto výhradně
       kioskové (viz #print-photo-wrap.shifted-up).

       Fotka se na telefonu ani nezmenšuje přes `transform: scale()` — poměr mezi
       výškou fotky a výškou displeje je na telefonu úplně jiný než na kiosku
       a jedna dvojice (scale, translateY ve vh) nesedne na 375, 390 i 412 px
       zároveň. Místo toho si spodní blok rezervuje pevných 316 px odsazením
       rámu fotky, takže mezera nad kódem vychází stejně na všech třech šířkách. */
    .qr-label { font-size: 11px; }
    /* Výška řádku 181 px = výška, kterou tu držel QR — NEMĚNÍ SE, drží polohu
       všeho pod ní (odpočet, tlačítko).
       ŠÍŘKA BLOKU: do 18. 8. `100% − 170px` (na 390px displeji 200 px) = přesně
       to, co bloku zbývalo vedle QR (160 px i s rámem + 10 px mezera + 10 px
       odsazení řádku). Od 19. 8. se odčítá jen 80 px → na 390px displeji 290 px,
       na 375px 275 px, na 320px 220 px. I ta nejužší varianta má vnitřních
       204 px, takže se do ní vejde nejdelší úvodní věta na jeden řádek
       („Want your photo printed at the reception?" = 191 px při 13 px) i
       nejširší kód („000" = 183 px při 74 px). */
    .print-code-row { padding: 0 10px; min-height: 181px; }
    .print-code-block { flex: 0 0 calc(100% - 80px); padding: 8px 6px; gap: 1px; }
    .print-code-intro { font-size: 13px; }
    .print-code-hint { font-size: 11px !important; }
    /* ZVĚTŠENO 2026-08-19 z 38 px — zadal Sebastian, telefonní obdoba kioskových
       76 → 150 px. Výška bloku tím naroste na 132,8 px, pořád hluboko pod
       181 px, které si drží .print-code-row → nic pod blokem se nehne. */
    .print-code-value { font-size: 74px; }
    .print-reset-hint { font-size: 11px; }

    #print-code-wrap-anim { bottom: 96px; gap: 6px; }
    #print-another-wrap { bottom: 16px; left: 20px; right: 20px; }
    #another-button { height: 52px; font-size: 22px; max-width: 280px; }

    #print-photo-wrap {
        padding: 12px 12px 0;
        transition: padding-bottom 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /* 316 px = 96 px (spodek spodního bloku) + ~196 px (blok s popiskem a hintem)
       + 24 px vzduch mezi fotkou a blokem. NESAHAT: rezerva je původní, odebrání
       QR ji nemění (uživatel 2026-08-17 — fotka zůstává, jak byla). */
    #print-photo-wrap.shifted-up { transform: none; padding-bottom: 316px; }
    .print-preview-img {
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        transition: max-height 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /* 392 px = 64 px hlavička + 12 px horní odsazení + 316 px rezerva pro blok. */
    #print-photo-wrap.shifted-up .print-preview-img {
        max-height: calc(100vh - 392px);
        max-height: calc(100dvh - 392px);
    }
}

/* ── K2: telefon na šířku ──────────────────────────────────────────────────
   Landscape telefonu (844×390) spadl do desktopového bloku `min-width: 760px`,
   kde má .app-container výšku `calc(100dvh - 124px)` = 266px a `overflow:
   hidden` → obsah se ořízl a NEŠEL odscrollovat.

   Podmínka `max-height: 500px` cílí výhradně na nízké okno. Desktop 1366×768
   ani 1920×1080 do ní nespadá, takže se jich netýká. */
@media (min-width: 760px) and (max-height: 500px) {
    /* Nižší hlavička uvolní 60px pro obsah */
    .header-inner { height: 64px; padding: 0 24px; }
    .brand-logo { height: 44px; }
    .lang-switch button { width: 40px; height: 40px; }
    .header-center-logo { height: 48px; }

    .app-container {
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
        overflow: auto;      /* na nízkém okně se raději scrolluje, než ořízne */
    }

    .screen { padding: 16px 24px; }

    #camera-screen {
        top: 64px !important;
        height: calc(100vh - 64px) !important;
        height: calc(100dvh - 64px) !important;
    }

    /* Cluster se musí vejít do ~390px výšky i s titulkem */
    .camera-title-layer { padding-top: 8px; }
    .camera-title-layer h2 { font-size: clamp(18px, 3vw, 26px); }
    .camera-controls-layer { padding: 0 24px 12px; }
    .camera-cluster-row { max-width: 560px; min-height: 88px; margin-top: -8px; }
    #capture-button { width: 88px; height: 88px; border-width: 5px; }
    #group-toggle-wrap { gap: 84px; }    /* = 88px spoušť − 4px překryv */
    #group-toggle-wrap .toggle-btn { font-size: 14px; padding: 8px 8px; gap: 2px; }
    #group-toggle-wrap .toggle-btn .ico { font-size: 18px; }
    .camera-controls-layer .distance-toggle-wrap .toggle-btn { font-size: 16px; padding: 8px 16px; }

    .camera-btn-big { height: 56px !important; font-size: 24px !important; }
    .camera-btn-big.button-secondary { height: 56px !important; font-size: 22px !important; }
    .camera-confirm-buttons { padding-bottom: 12px; }
}