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

/* Self-hosted blackletter display face (full Czech diacritics, no Google Fonts subsetting dependency). */
@font-face {
    font-family: 'Pirata One';
    src: url('assets/fonts/PirataOne.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

: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: "Pirata One", "Inter", system-ui, serif;
    --font-script: "Marck Script", "Dancing Script", cursive;   /* handwritten "pen" font for welcome (backup: Dancing Script) */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Language switch — only the currently active flag is visible; click cycles. */
.lang-switch { display: flex; align-items: center; }

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

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

.lang-switch button:not(.is-active) { display: 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, #limit-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),
    #confirm-photo-button,
    #agree-button,
    #capture-button,
    #share-button { animation: none; }
}

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

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

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

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

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

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

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

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

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

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

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

/* GDPR "Souhlasím" = the primary action → same breathing fire-pulse as the other
   primary buttons (#start-button / #mood-confirm-button / #share-button). */
#agree-button { animation: firePulse 4.2s ease-in-out infinite; }

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

#camera-screen { height: 100%; justify-content: flex-start; padding: 0 var(--spacing-md) var(--spacing-lg); }
#camera-screen .step-top { height: 499px; }
/* Camera + Confirm are the SAME step visually (live square window ↔ frozen square
   window), so both headings share one size — otherwise the window below them lands
   on a different y. */
#camera-screen h2,
#confirm-photo-screen h2 { margin-bottom: 0; font-size: 30px; }

/* Shutter + solo/group toggle as one row: the round shutter sits in the gap between
   the two toggle buttons. The cluster box IS the toggle bar (it shrinks to it), so
   the bar's TOP edge = the cluster's top edge — that is the edge that has to line up
   with the "Líbí!" button on the next step. The shutter is an overlay centred on the
   bar and deliberately sticks out above and below it. */
.camera-cluster {
    position: relative;
    width: 100%;
    max-width: 330px;
    /* --cam-bar-drop = by how much the confirm step-top's border box ends LOWER than
       the camera one (512px vs 499px). Dropping the bar by exactly that puts its top
       edge on the same y as the "Líbí!" button, whatever height the bar's text gives it.
       --cam-shutter-overhang reserves the space the round shutter sticks out BELOW the
       bar (it used to come from min-height), so it can never cover #camera-error. */
    --cam-bar-drop: 13px;
    --cam-shutter-overhang: 22px;
    margin: var(--cam-bar-drop) auto var(--cam-shutter-overhang);
    display: flex;
    align-items: center;   /* shutter (absolute, top:50%) stays centred on the bar */
}

.camera-wrapper {
    position: relative;
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
}

/* The live feed and the frozen snapshot are ONE framed window shared by two steps —
   identical box model (display:block kills the inline baseline gap under the video),
   identical size, identical frame. */
#camera-feed,
#photo-preview {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 3px solid var(--color-accent-soft);
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(177, 20, 35, 0.18);
    background: #000;
}

#camera-feed { transform: scaleX(-1); }

#capture-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #C8182A, #6E0A14 70%);
    border: 4px solid var(--color-accent);
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 0 0 4px rgba(177, 20, 35, 0.4), 0 8px 22px rgba(0, 0, 0, 0.55);
    /* Same breathing fiery glow as #start-button / #mood-confirm-button / #share-button
       (firePulse). The shutter is centred via translate(-50%,-50%), so it can't reuse
       firePulse directly (that keyframe animates transform: scale and would drop the
       centering). capturePulse pulses ONLY the box-shadow glow around the ring — no
       scaling — keeping the shutter centred and the icon untouched. */
    animation: capturePulse 2.2s ease-in-out infinite;
}

/* Glow-only sibling of firePulse for the shutter: keeps the red ring + dark drop and
   breathes the same warm orange halo, without any transform (centering is preserved). */
@keyframes capturePulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(177, 20, 35, 0.4), 0 8px 22px rgba(0, 0, 0, 0.55),
                    0 0 6px 0 rgba(255, 120, 30, 0.0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(177, 20, 35, 0.55), 0 8px 22px rgba(0, 0, 0, 0.55),
                    0 0 26px 8px rgba(255, 140, 45, 0.7);
    }
}

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

#camera-error {
    color: #FFD7D2;
    background-color: rgba(110, 10, 20, 0.6);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-top: var(--spacing-md);
}

/* Group/Solo toggle — one connected bar (no gap); the shutter sits ON TOP of the
   join in the centre. Like the kiosk: outer corners rounded, inner border removed. */
#group-toggle-wrap {
    width: 100%;
    margin: 0;
    display: flex;
    gap: 0;   /* buttons touch in the middle; the shutter overlaps the seam */
}
#group-toggle-wrap .toggle-btn {
    flex: 1;
    min-width: 0;
    appearance: none;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    padding: 8px 6px;
    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;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
/* Left button: round only the left corners, drop the middle border. Extra inner
   padding shifts its label toward the OUTER edge so the centred shutter never
   covers the "Jsem sám" / "Je nás víc" text. */
#group-toggle-wrap .toggle-btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
    padding-right: 52px;
}
#group-toggle-wrap .toggle-btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: none;
    padding-left: 52px;
}
#group-toggle-wrap .toggle-btn .ico { font-size: 18px; line-height: 1; }
#group-toggle-wrap .toggle-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-accent-soft);
    color: #FFF4E6;
    box-shadow: var(--shadow-primary);
}
#group-toggle-wrap.is-hidden { display: none; }

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

#confirm-photo-screen { height: 100%; justify-content: flex-start; padding-top: 0; }
/* 512px total keeps the Líbí! / Vyfotit znovu buttons exactly where they are, while
   the 13px bottom padding shrinks the CONTENT box to 499px = the camera step's
   step-top. Same content box + same content ⇒ heading and window land pixel-identical
   on both steps (both distribute with space-evenly). */
#confirm-photo-screen .step-top { height: 512px; padding-bottom: 13px; }
#confirm-photo-screen .button-group { margin-top: 0; }

/* "Líbí!" = primary action on the confirm step → same breathing fire-pulse as the
   other primary buttons (#start-button / #mood-confirm-button / #share-button). */
#confirm-photo-button { animation: firePulse 4.2s ease-in-out infinite; }

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

/* Grid stays anchored at the TOP (fixed-height .step-top holds heading + grid),
   and — because this step has only ONE button (no secondary below it, unlike the
   other steps) — the lone "Pokračovat" CTA is pushed to the BOTTOM of the screen
   via margin-top:auto. This is DELIBERATELY lower than the primary buttons on the
   other steps: the empty space now sits ABOVE the button (between grid and CTA),
   not as dead space below it. Bottom gap = the screen's own padding-bottom. */
/* ONE spacing token drives BOTH vertical gaps of the category block — heading→row 1
   and row 1→row 2 — so they are always identical. (space-evenly could not do that:
   it derives the heading gap from the leftover height, which made it drift against
   the grid's own row-gap.) Doubled vs. the previous row-gap, which also drops the
   whole tile block a bit lower into the free space above the CTA. */
/* Round 2 (2026-07-22): token raised by ~1/4 (44→55px / 5.2→6.5vh) ⇒ ~54.9px on a
   390×844 phone. The vh leg keeps short phones safe: it shrinks the gaps by itself,
   so the tiles never reach the bottom-anchored "Pokračovat". */
#mood-screen { height: 100%; justify-content: flex-start; padding-top: 0; --mood-gap: min(55px, 6.5vh); }
#mood-screen .step-top {
    height: 512px;
    justify-content: flex-start;   /* deterministic rhythm instead of space-evenly */
    padding-top: var(--spacing-sm);/* keeps the heading on its approved line */
    gap: var(--mood-gap);          /* gap 1: heading → Čert / V kotli row */
}
#mood-screen h2 { margin-bottom: 0; }
/* Lift the lone "Pokračovat" CTA a touch off the very bottom: it stays the bottom
   action but no longer sits glued to the edge (~72px above: 40px here + 32px screen pad). */
#mood-screen .button-group { margin-top: auto; margin-bottom: 40px; }

/* "Pokračovat" — hidden/inactive until a category is picked; then it fades in and
   picks up the same breathing fire-pulse as #start-button. */
#mood-confirm-button { transition: opacity 0.25s, background-color 0.2s, transform 0.1s, box-shadow 0.2s; }
#mood-confirm-button:disabled {
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}
#mood-confirm-button:not(:disabled) {
    animation: firePulse 4.2s ease-in-out infinite;
}

.mood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: var(--mood-gap, min(22px, 2.6vh));   /* gap 2: row → Na trůně — same token as gap 1 */
    width: 100%;
    /* Tiles are sized by height + portrait aspect-ratio (see .mood-button) and must
       NOT be stretched to the column width, or the aspect-ratio breaks. Center them
       instead so each tile keeps the exact 848×1264 image ratio. */
    justify-items: center;
}

.mood-button {
    /* Portrait tile matching the preview images (848×1264). Because the tile ratio
       equals the image ratio, background-size:cover fills it with ZERO crop and no
       empty space. Sized by height (responsive) → width follows the aspect-ratio. */
    aspect-ratio: 848 / 1264;
    height: min(190px, 25vh);
    width: auto;
    max-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); }

/* Selected category: strong gold outline + soft glow so it clearly reads as chosen. */
.mood-button.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent), 0 0 22px 5px rgba(224, 178, 90, 0.55), var(--shadow-md);
    transform: translateY(-2px);
}
.mood-button.selected::after {
    background: linear-gradient(180deg, rgba(177, 20, 35, 0.35) 0%, rgba(177, 20, 35, 0.85) 100%);
}

/* Once something is picked, the other categories desaturate / dim back. */
.mood-grid.has-selection .mood-button:not(.selected) {
    filter: grayscale(0.7) brightness(0.65);
    opacity: 0.7;
    transition: filter .2s, opacity .2s;
}

/* 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; }
.mood-button[data-mood="Cert"]::before        { background-image: url("assets/img/mood-cert.png");  background-size: cover; background-position: center; }
.mood-button[data-mood="Kotel"]::before       { background-image: url("assets/img/mood-kotel.png"); background-size: cover; background-position: center; }
.mood-button[data-mood="Mikulas"]::before     { background: linear-gradient(135deg, #B11423 0%, #E0B25A 130%); }
.mood-button[data-mood="Andel"]::before       { background: linear-gradient(135deg, #6E7BB8 0%, #E8E2D0 120%); }
.mood-button[data-mood="Zatracenec"]::before  { background: linear-gradient(135deg, #1B0606 0%, #C8182A 130%); }

/* Last card in an odd-count grid ("Na trůně") spans both columns, centred, and is
   made a good chunk BIGGER than the top two (taller → wider via the aspect-ratio).
   Still no crop: the tile keeps the 848×1264 ratio and cover fills it exactly. */
.mood-grid .mood-button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    height: min(236px, 31vh);
}

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

#generating-screen { justify-content: center; padding-top: 100px; }
#generating-screen h2 { margin-bottom: var(--spacing-lg); color: var(--color-accent); }
#generating-screen p { margin-bottom: var(--spacing-xl); }

.spinner {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(224, 178, 90, 0) 0%,
        rgba(224, 178, 90, 0.05) 25%,
        rgba(200, 24, 42, 0.5) 62%,
        rgba(255, 140, 40, 1) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
    animation: spin 0.9s linear infinite;
}

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

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

/* Mirrors the mood step: heading + both photos live in a growing .step-top with an
   even vertical distribution, and the "Pokračovat" CTA sits as the bottom action
   (lifted ~72px off the edge, same as #mood-screen after the tweak). */
#select-result-screen { height: 100%; justify-content: flex-start; padding-top: 0; }
#select-result-screen .step-top {
    flex: 1 1 auto;
    justify-content: space-evenly;
    padding-top: var(--spacing-xs);
}
#select-result-screen .button-group { margin-top: auto; margin-bottom: 40px; }
#select-result-screen h2 { margin-bottom: 2px; }
#select-result-screen p { margin-bottom: 0; }
.result-head { flex: 0 0 auto; width: 100%; }

/* "Pokračovat" — hidden/inactive until a photo is picked; then it fades in and picks
   up the same breathing fire-pulse as #mood-confirm-button. */
#result-confirm-button { transition: opacity 0.25s, background-color 0.2s, transform 0.1s, box-shadow 0.2s; }
#result-confirm-button:disabled {
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}
#result-confirm-button:not(:disabled) {
    animation: firePulse 4.2s ease-in-out infinite;
}

/* contents → the two image containers become direct flex items of .step-top,
   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); }
/* Selected photo: strong gold outline + soft glow, matching .mood-button.selected. */
.result-image-container.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent), 0 0 22px 5px rgba(224, 178, 90, 0.55), var(--shadow-md);
    transform: translateY(-2px);
}
/* Once one is picked, the other photo desaturates / dims back (like the mood grid). */
.result-grid.has-selection .result-image-container:not(.selected) {
    filter: grayscale(0.7) brightness(0.65);
    opacity: 0.7;
    transition: filter .2s, opacity .2s;
}
.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;
    /* Pinch/rotate/pan (touch) lifts the WHOLE framed photo (frame + image) above
       everything. The gesture transforms this container — so swallow browser gestures
       here and spring back via its transform. */
    touch-action: none;
    transform-origin: center;
    will-change: transform;
}
#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; }

/* Share = the primary action on the final screen → same breathing fire-pulse as
   #start-button / #mood-confirm-button so it draws the eye. */
#share-button { animation: firePulse 4.2s ease-in-out infinite; }

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

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

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

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

    .screen { padding: 40px 28px; }

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

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

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

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

    /* Camera. Desktop step-top heights track window height so the action button
       lands on the GDPR "Souhlasím" line (which itself drifts with viewport because
       its content is capped at 58vh). Live refs: 580px@800, 612px@1080 from top. */
    /* Big preview; the cluster below it follows down with even gaps.
       vh caps let it shrink on shorter desktop windows instead of clipping. */
    #camera-screen .step-top { height: min(820px, 73vh); }
    #camera-screen h2,
    #confirm-photo-screen h2 { font-size: 36px; }
    .camera-wrapper { max-width: min(640px, 60vh); }
    /* Controls span the preview width; the shutter sits in a layer ON TOP of the
       two toggles (overlap), no holes — one long bar tucked tight like on mobile. */
    /* Both step-tops are the same height on desktop (no padding-bottom compensation),
       so the bar needs no drop at all to sit on the "Líbí!" line. */
    .camera-cluster { max-width: min(640px, 60vh); --cam-bar-drop: 0px; --cam-shutter-overhang: 24px; }
    #capture-button { width: 112px; height: 112px; z-index: 10; }
    #group-toggle-wrap { gap: 0; }
    #group-toggle-wrap .toggle-btn { font-size: 15px; padding: 12px 8px; }
    /* Wider bar on desktop → push the labels further out so the bigger shutter clears them. */
    #group-toggle-wrap .toggle-btn:first-child { padding-right: 64px; }
    #group-toggle-wrap .toggle-btn:last-child { padding-left: 64px; }
    #group-toggle-wrap .toggle-btn .ico { font-size: 22px; }

    /* Confirm photo — identical step geometry to the camera step (the framed window
       is sized by the shared .camera-wrapper, so no extra size rule is needed here).
       Both step-tops are the same height on desktop → no bottom padding compensation. */
    #confirm-photo-screen .step-top { height: min(820px, 73vh); padding-bottom: 0; }

    /* 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 — step-top tracks window height like confirm-photo so the
       "Pokračovat" button lands on the same line; grid gets more breathing room. */
    /* Round 2 (2026-07-22): the two gaps grow by ~1/4 (32→40px / 3→3.75vh ⇒ ~33.8px
       at 900px height), matching the mobile step. The step-top's top padding is now a
       token of its OWN, frozen at the previously approved value, so ONLY the gaps grow
       — the heading keeps its line (as on mobile, where the padding is a fixed 8px)
       and the tiles keep their clearance to the bottom-anchored "Pokračovat". */
    #mood-screen { --mood-gap: min(40px, 3.75vh); --mood-pad-top: min(32px, 3vh); }
    #mood-screen .step-top { height: min(820px, 73vh); padding-top: var(--mood-pad-top); }
    #mood-screen h2 { margin-bottom: 0; }
    .mood-grid { column-gap: 24px; }
    /* Keep the portrait aspect-ratio + no-crop on desktop; just scale up by height.
       vh caps keep the 2+1 layout inside the step-top on short desktop windows. */
    .mood-button { height: min(300px, 25vh); }
    .mood-grid .mood-button:last-child:nth-child(odd) { height: min(360px, 31vh); }
    .mood-button .mood-label { font-size: clamp(26px, 3vw, 34px); }

    /* Generating */
    .spinner { width: 120px; height: 120px; }

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

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