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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Language switch — 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 = an aged infernal parchment (úpis) with a wax seal; the title is
   handwritten over the blank upper area in a pen-cursive font. */
.welcome-parchment {
    position: relative;
    width: 100%;
    max-width: 330px;
    aspect-ratio: 636 / 950;
    margin: 0 auto var(--spacing-md);
    background-image: url("assets/img/peklo-parchment.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#welcome-screen .welcome-copy {
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    text-align: center;
}

#welcome-screen h2 {
    font-family: var(--font-script);
    font-weight: 700;
    /* Title is split into two lines via <br> in the locale, so it can be larger. */
    font-size: clamp(32px, 10.5vw, 44px);
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
    margin: 0 auto;
    color: #170704;            /* deep iron-gall ink */
    /* Thicken the thin cursive strokes so they read clearly on the parchment. */
    -webkit-text-stroke: 0.4px #170704;
    text-shadow: 0 1px 1px rgba(255, 248, 230, 0.55);
}

#welcome-screen p.welcome-sub {
    font-family: var(--font-script);
    font-weight: 600;
    font-size: clamp(17px, 5.4vw, 23px);
    line-height: 1.3;
    white-space: nowrap;       /* keep the subtitle on a single line */
    margin: 46px 0 0;          /* larger gap below the title (title untouched) */
    color: #3a1206;            /* dark brown ink */
    text-shadow: 0 1px 1px rgba(255, 248, 230, 0.5);
}

#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 { animation: none; }
}

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

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

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

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

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

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

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

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

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

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

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

#camera-screen { height: 100%; justify-content: flex-start; padding: 0 var(--spacing-md) var(--spacing-lg); }
#camera-screen .step-top { height: 499px; }
#camera-screen h2 { margin-bottom: 0; font-size: 30px; }

/* Shutter + solo/group toggle as one row, vertically centred on the Souhlasím line:
   the round shutter sits in the gap between the two toggle buttons. */
.camera-cluster {
    position: relative;
    width: 100%;
    max-width: 330px;
    min-height: 76px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

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

#camera-feed {
    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;
    transform: scaleX(-1);
}

#capture-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    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);
}

#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 */
#group-toggle-wrap {
    width: 100%;
    margin: 0;
    display: flex;
    gap: 100px;   /* centre gap leaves room for the shutter button between the two toggles */
}
#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;
}
#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; }
#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; }

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

#mood-screen h2 { margin-bottom: 88px; }

.mood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 40px;
    width: 100%;
}

.mood-button {
    height: 104px;
    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%);
}

/* Category background gradients (hellish palette). */
.mood-button[data-mood="Trune"]::before      { background: linear-gradient(135deg, #7A0E1A 0%, #C8182A 60%, #E0B25A 130%); }
.mood-button[data-mood="Cert"]::before        { background: linear-gradient(135deg, #2A0A0A 0%, #7A0E1A 100%); }
.mood-button[data-mood="Kotel"]::before       { background: linear-gradient(135deg, #FF6A00 0%, #8E0E1B 100%); }
.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 spans both columns. */
.mood-grid .mood-button:last-child:nth-child(odd) { grid-column: 1 / -1; }

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

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

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

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

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

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

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

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

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

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

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

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

    .screen { padding: 40px 28px; }

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

    /* Welcome — parchment sized by HEIGHT so it fills the screen but still leaves
       room for the button (no scroll). Tall aspect ratio means width follows. */
    #welcome-screen { padding: 16px 16px 24px; justify-content: center; }
    .welcome-parchment {
        width: auto;
        height: min(62vh, 700px);
        max-width: 92%;
        margin: 0 auto var(--spacing-md);
        /* Lift the parchment visually (transform = no layout shift, so the
           "Vstoupit do Pekla" button stays exactly where it is) to balance the
           gap above (nav bar) with the gap below (button). The lift scales with
           window height so the two gaps stay equal at every viewport. */
        transform: translateY(calc(84px - 9.6vh));
    }
    #welcome-screen h2 { font-size: clamp(38px, 5vw, 56px); }
    #welcome-screen p.welcome-sub { font-size: clamp(22px, 3vw, 32px); margin-top: 14px; }
    #start-button { height: 70px; font-size: 30px; max-width: 460px; margin-top: 28px; }

    /* 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 { 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. */
    .camera-cluster { max-width: min(640px, 60vh); min-height: 92px; }
    #capture-button { width: 92px; height: 92px; z-index: 10; }
    #group-toggle-wrap { gap: 46px; }
    #group-toggle-wrap .toggle-btn { font-size: 15px; padding: 12px 8px; }
    #group-toggle-wrap .toggle-btn .ico { font-size: 22px; }

    /* 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: 128px; }
    .mood-grid { column-gap: 24px; row-gap: 56px; }
    .mood-button { height: 150px; }
    .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; }
}