/* ============================================================
   Couples quiz — Gemini Spark inspired: čistá, vzdušná, modrá→černá
   ============================================================ */

/* Serif písmo pro herní obsah (otázky/odpovědi) — méně "digitální", inspirováno claude.ai. */
:root {
    --couples-game-font: "STIX Two Text", "Charter", Georgia, "Times New Roman", serif;
}

/* Základní plocha — čistě bílá, plný viewport, hodně white space */
.couples-bg {
    background: #ffffff;
    background-image: none;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: "Google Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #202124;
}

/* Kontejner — bez rámečku, bez stínu, vzdušný centrovaný blok */
.couples-window {
    width: 100%;
    max-width: 880px;
    padding: 4rem 2rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* .centered-window ze skeletonu má backdrop-filter, který v couples nic nedělá (okno je průhledné),
       ale vytváří containing block a rozbil by position:fixed patičce .couples-brakes. Proto ho tady rušíme. */
    backdrop-filter: none;
}

.couples-window.couples-window-intro {
    max-width: 1600px;
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (max-width: 600px) {
    .couples-window {
        padding: 1.5rem 1.5rem 3rem;
    }
}

/* ── PILL ───────────────────────────────────────────────── */
/* "Coming soon" / kontextový mini-štítek nad nadpisem ve stylu Gemini */
.couples-pill {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 0.35rem 1rem;
    border: 1px solid #4285f4;
    border-radius: 999px;
    color: #1a73e8;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    letter-spacing: 0;
}

/* ── INTRO ──────────────────────────────────────────────── */
.couples-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-top: 1rem; /* Jemné posunutí intro bloku níž od horní hrany. */
}

/* Hlavní hero nadpis — gradient modrá → černá ve stylu "Gemini Spark" */
.couples-title {
    font-size: clamp(2rem, 6vw, 6.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.005em;
    word-spacing: 0.06em;
    margin: 0;
    color: #202124;
    white-space: nowrap; /* nadpis drží na řádcích podle <br> a nezalamuje se */
}

@media (max-width: 700px) {
    .couples-title {
        white-space: normal; /* na úzkých zařízeních pustíme zalomení */
        font-size: clamp(1.85rem, 7vw, 2.6rem);
    }
}

/* První slovo / značka v modrém gradientu */
.couples-title .accent {
    background: linear-gradient(90deg, #4285f4 0%, #1a73e8 50%, #4285f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding: 0 0.08em 0.08em; /* prostor pro descender (g) a okraje gradient textu */
    margin: 0 -0.08em;
}

.couples-subtitle {
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    color: #5f6368;
    margin: 2rem auto 0;
    max-width: 780px;
    line-height: 1.55;
    font-weight: 400;
}

.couples-btn-start {
    margin-top: 3rem;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    align-self: center;
}

.couples-relationship-section {
    margin-top: 2.4rem;
    width: min(920px, 100%);
}

.couples-relationship-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.couples-relationship-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.05rem;
    border: 1px solid #d7dce3;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s;
}

.couples-relationship-card strong {
    font-size: 1rem;
    color: #202124;
}

.couples-relationship-card span {
    font-size: 0.88rem;
    color: #5f6368;
    line-height: 1.35;
}

.couples-relationship-card.selected {
    border-color: #1a73e8;
    background: #fbfdff;
}

.couples-relationship-card.disabled {
    cursor: not-allowed;
    opacity: 0.62;
    background: #fafbfc;
}

@media (max-width: 850px) {
    .couples-relationship-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .couples-relationship-grid {
        grid-template-columns: 1fr;
    }
}

/* ── JMÉNO / FORMULÁŘ ───────────────────────────────────── */
.couples-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: center;
    text-align: center;
}

.couples-form-headline {
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    font-weight: 700;
    color: #202124;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 0.25rem;
}

.couples-label {
    font-size: 1rem;
    color: #5f6368;
    line-height: 1.55;
    max-width: 560px;
    margin-bottom: 53px;
}

/* Souhrn aktuální volby (typ vztahu + herní mód) + ikonové tlačítko pro rozbalení nastavení */
.couples-current-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: #5f6368;
    margin: 0.25rem 0 1.5rem;
}

.couples-options-toggle {
    font-size: 1rem;
    line-height: 1;
}

.couples-btn {
    align-self: center;
    margin-top: 0.5rem;
    border-radius: 999px;
}

/* ── OTÁZKA ─────────────────────────────────────────────── */
.couples-question {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    align-items: center;
    text-align: center;
    padding-bottom: 4.5rem; /* rezerva pod obsahem, aby ho nepřekrývala fixed patička .couples-brakes */
}

.couples-hint {
    font-size: 0.85rem;
    color: #1a73e8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* Mezikrok "hotovo — odeslat / přidat další": odeslání je vizuálně dominantní, přidání je decentní sekundární akce. */
.couples-addmore {
    gap: 1rem;
    justify-content: center;
    min-height: 50vh;
}

.couples-addmore-icon {
    font-size: 3rem;
    color: #1a73e8;
    line-height: 1;
}

.couples-addmore-title {
    font-family: var(--couples-game-font);
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    font-weight: 700;
    color: #202124;
    margin: 0;
    letter-spacing: -0.02em;
}

.couples-addmore-subtitle {
    font-size: 1rem;
    color: #5f6368;
    margin: 0;
    max-width: 460px;
}

.couples-addmore-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.couples-q-text {
    font-family: var(--couples-game-font);
    font-size: clamp(1.8rem, 5.5vw, 3rem);
    font-weight: 700;
    color: #202124;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.025em;
    max-width: 820px;
}

/* Inline tužka pro superadmina vedle textu otázky: decentní, výrazně menší než titulek,
   nesmí konkurovat samotné otázce - jen tichý vstup do editoru. */
.couples-edit-question {
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 0.5rem;
    color: #9aa0a6;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}

    .couples-edit-question:hover {
        opacity: 1;
        color: #5f6368;
    }

/* Mikropopisek (hint) pod titulkem otázky: tlumený, menší, bez ikony a rámečku - má splývat, ne křičet. */
.couples-q-hint {
    font-family: var(--couples-game-font);
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    font-weight: 400;
    color: #5f6368;
    margin: 0.5rem 0 0;
    line-height: 1.35;
    max-width: 640px;
}

.couples-options {
    display: flex;
    flex-direction: column;
    align-items: center; /* tlačítka nemají plnou šířku, bez tohoto padají doleva (start) */
    gap: 0.6rem;
    margin-top: 3.5rem;
    width: 100%;
    max-width: 560px;
    align-self: center;
}

.couples-options.answered {
    margin-top: 0.35rem;
}

/* Ztlumený řádek sekundárních akcí — ukotvený jako patička celé obrazovky (fixed),
   ne v toku otázky, aby byl vždy na stejném místě bez ohledu na délku otázky/počet odpovědí. */
.couples-brakes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.35rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(32, 33, 36, 0.08);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.85rem;
    z-index: 20;
}

.couples-brakes .btn-link,
.couples-brakes a {
    font-size: 0.8rem;
    color: #9aa0a6;
}

.couples-brakes .is-active {
    color: #0f766e;
    font-weight: 700;
}

/* Badge u textu otázky, když je aktuální otázka označená jako "jen pro mě". */
.couples-private-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 600;
}

.couples-path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.couples-path-card {
    border: 1px solid rgba(32, 33, 36, 0.14);
    border-radius: 8px;
    padding: 0.85rem;
    cursor: pointer;
    background: rgba(255,255,255,0.72);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.couples-path-card.selected {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12);
}

.couples-path-card strong,
.couples-path-card span {
    display: block;
}

.couples-path-card span {
    color: #5f6368;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.couples-option {
    background: #ffffff;
    border: 1.5px solid #dadce0;
    border-radius: 999px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: #202124;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

/* Hover jen na zařízeních, která ho skutečně mají (ne touch). */
@media (hover: hover) {
    .couples-option:hover {
        border-color: #1a73e8;
        background: #f8fbff;
        color: #1a73e8;
    }
}

.couples-option.selected {
    border-color: #1a73e8;
    background: #1a73e8;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.25);
    transform: scale(1.02);
    animation: couplesPop 0.32s ease-out;
}

/* Krátká scale-pulse pro selected bublinu / segment. */
@keyframes couplesPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.06); }
    100% { transform: scale(1.02); }
}
.couples-change-answer {
    color: #5f6368;
    font-size: 0.78rem;
    margin-top: -0.3rem;
    padding: 0.05rem 0.25rem;
}

@media (hover: hover) {
    .couples-change-answer:hover {
        color: #1a73e8;
        text-decoration: underline;
    }
}

/* Progress tečky 1/N nahoře. */
.couples-progress-dots {
    display: flex;
    gap: 0.45rem;
    justify-content: center;
    margin: 0 auto 0.25rem;
}
.couples-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dadce0;
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.couples-progress-dot.done {
    background: #1a73e8;
}
.couples-progress-dot.current {
    background: #1a73e8;
    width: 22px;
    border-radius: 999px;
}

/* ── SHARE ──────────────────────────────────────────────── */
.couples-share {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: center;
    text-align: center;
}

.couples-name-input {
    font-size: 1.05rem;
    max-width: 480px;
    width: 100%;
}

.couples-share-headline {
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    font-weight: 700;
    color: #202124;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
}

.couples-link-box {
    background: #f1f3f4;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    word-break: break-all;
    transition: background 0.15s, border-color 0.15s;
    max-width: 560px;
    width: 100%;
    text-align: left;
}

@media (hover: hover) {
    .couples-link-box:hover {
        background: #e8f0fe;
        border-color: #1a73e8;
    }
}

.couples-link-text {
    font-size: 0.85rem;
    color: #202124;
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

.couples-copy-hint {
    font-size: 0.78rem;
    color: #5f6368;
}

.couples-wa-btn {
    display: inline-flex;
    align-items: center;
    background: #25d366;
    color: #fff;
    border-radius: 999px;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    align-self: center;
}

@media (hover: hover) {
    .couples-wa-btn:hover {
        background: #1ebe5d;
        color: #fff;
        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    }
}

.couples-link-box.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.couples-wa-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
    background: #25d366;
    color: #fff;
    text-decoration: none;
}

/* ── REVEAL ─────────────────────────────────────────────── */
.couples-reveal {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    text-align: center;
}

.couples-reveal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e8eaed;
    width: 100%;
    max-width: 560px;
}

/* Primární akce reciprocity: hint + tlačítko jako jedna skupina. */
.couples-action-primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

/* Vysvětlení nad primárním tlačítkem – čte se jako popisek toho, co tlačítko udělá. */
.couples-action-hint {
    color: #5f6368;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

/* Sekundární akce je jiná věc (nový kvíz), ne pokračování – oddělíme ji mezerou a slůvkem „nebo". */
.couples-action-secondary-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.couples-action-or {
    color: #9aa0a6;
    font-size: 0.8rem;
    text-transform: lowercase;
}

.couples-action-secondary {
    color: #5f6368;
    font-size: 0.9rem;
}

/* ── UTILITY ────────────────────────────────────────────── */
.couples-loading,
.couples-error {
    font-size: 1rem;
    color: #5f6368;
    padding: 3rem 0;
    text-align: center;
}

.couples-error {
    color: #d93025;
}

/* ── MULTI-QUESTION ANSWER DETAILS ─────────────────────── */
/* Plynulý rozbalovací efekt — grid-rows 0fr → 1fr animuje auto-výšku bez skoku. */
.couples-answer-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 560px;
    animation: couplesExpand 0.28s ease-out;
    transform-origin: top center;
}

@keyframes couplesExpand {
    from { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}

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

/* Pilulky jistoty (druhý krok po výběru odpovědi) — viz couples-answer-card-confirm níže. */

.couples-reason-toggle {
    border: 0;
    background: transparent;
    color: #1a73e8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.15rem 0.35rem;
    font-family: inherit;
}

@media (hover: hover) {
    .couples-reason-toggle:hover {
        text-decoration: underline;
    }
}

.couples-reason-wrap {
    width: 100%;
    max-width: 560px;
    animation: couplesFadeIn 0.18s ease-out;
}

.couples-reason-field {
    width: 100%;
}

.couples-reason-counter {
    text-align: right;
    font-size: 0.75rem;
    color: #5f6368;
    margin-top: 0.25rem;
}

/* Primární CTA pod jistotou — širší, výraznější. */
.couples-btn-continue {
    min-width: 200px;
}

.couples-btn-next {
    min-width: 0;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: #1a73e8 !important;
    box-shadow: none !important;
    padding: 0.25rem 0.45rem !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    gap: 0.4rem;
}

.couples-btn-next i {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a73e8;
    background: #e8f0fe;
    font-size: 1.15rem;
    order: 2;
}

@media (hover: hover) {
    .couples-btn-next:hover {
        color: #0b57d0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .couples-btn-next:hover i {
        background: #d2e3fc;
        transform: translateX(1px);
    }
}

.couples-btn-next:disabled,
.couples-btn-next.disabled {
    opacity: 0.5;
}

/* ── MULTI-QUESTION REVEAL ─────────────────────────────── */
.couples-match-summary {
    font-size: clamp(2.75rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
}

.couples-match-summary.match {
    background: linear-gradient(90deg, #4285f4 0%, #1a73e8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.couples-match-summary.diff {
    color: #202124;
}

/* Doprovodná věta pod skóre — lidsky vysvětlí poměr shod. */
.couples-match-subtitle {
    color: #5f6368;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    line-height: 1.45;
    max-width: 540px;
    margin: 0.75rem auto 0;
}

.couples-reveal-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 720px;
}

/* Hlavička karty: otázka vlevo, badge shody vpravo, ať se výsledek čte hned. */
.couples-reveal-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.couples-reveal-card-head h3 {
    flex: 1 1 auto;
}

.couples-reveal-card-head .couples-card-result {
    flex: 0 0 auto;
    margin-top: 0;
}

.couples-reveal-card {
    border: 1px solid #e8eaed;
    border-radius: 18px;
    padding: 1.25rem;
    background: #fff;
    text-align: left;
    box-shadow: 0 3px 16px rgba(32, 33, 36, 0.06);
}

.couples-reveal-private {
    border: 1px dashed rgba(32, 33, 36, 0.24);
    border-radius: 10px;
    padding: 1rem;
    color: #5f6368;
    background: #fafafa;
}

.couples-moment-save {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef0f2;
}

.couples-moment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.couples-moment-saved {
    margin-top: 0.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f766e;
}

.couples-reveal-card h3 {
    color: #202124;
    font-size: clamp(1.1rem, 3vw, 1.45rem);
    line-height: 1.25;
    margin: 0;
}

.couples-reveal-divider {
    height: 1px;
    background: #e8eaed;
    margin: 1rem 0;
}

.couples-reveal-person {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.8rem 0;
}

/* Scéna odhalení: sekvence "odpověď -> tip" jako dva čitelné kroky s barevným railem. */
.couples-reveal-person.step-answer,
.couples-reveal-person.step-guess {
    position: relative;
    padding-left: 0.95rem;
    margin-left: 0.1rem;
}

.couples-reveal-person.step-answer::before,
.couples-reveal-person.step-guess::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    bottom: 0.7rem;
    width: 3px;
    border-radius: 3px;
}

.couples-reveal-person.step-answer::before {
    background: #1aa78f;
}

.couples-reveal-person.step-guess::before {
    background: #6475d8;
}

.couples-reveal-line {
    color: #202124;
    line-height: 1.45;
}

.couples-confidence-dots {
    color: #dadce0;
    letter-spacing: 0.12em;
    font-size: 0.96rem;
}

.couples-confidence-dots .filled {
    color: #1a73e8;
}

.couples-confidence-dots span:last-child {
    color: #5f6368;
    letter-spacing: 0;
    font-size: 0.82rem;
    margin-left: 0.35rem;
}

.couples-reveal-reason {
    color: #5f6368;
    font-style: italic;
    line-height: 1.45;
}

.couples-card-result {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin-top: 0.65rem;
    padding: 0.36rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.couples-card-result i {
    font-size: 0.9em;
}

/* Shoda = pozitivní (zelená). Rozdíl není chyba → tlumená jantarová, ne červená. */
.couples-card-result.match {
    color: #137333;
    background: #e6f4ea;
}

.couples-card-result.diff {
    color: #b06000;
    background: #fef7e0;
}

.couples-ai-box {
    max-width: 720px;
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 16px;
    color: #3c4043;
    line-height: 1.6;
    padding: 1rem;
    text-align: left;
}

@media (max-width: 600px) {
    /* Wrapper, do kterého Megacentral Button obaluje skutečný <button>. */
    .couples-answer-details > div:has(> .couples-btn-continue) {
        width: 100%;
        display: flex !important;
    }
    .couples-btn-continue {
        min-width: 0;
        width: 100% !important;
        max-width: 100%;
        justify-content: center;
    }

    .couples-reveal-card {
        border-radius: 14px;
        padding: 1rem;
    }

    .couples-options,
    .couples-answer-details,
    .couples-reveal-cards,
    .couples-ai-box {
        max-width: 100%;
    }

    /* Zhuštění mobilního layoutu — méně skrolování na malých displejích. */
    .couples-q-text {
        font-size: clamp(1.5rem, 5.2vw, 2.2rem);
    }
    .couples-question {
        gap: 0.9rem;
    }
    .couples-answer-details {
        gap: 0.7rem;
    }
    .couples-progress-dots {
        margin-bottom: 0.4rem;
    }
}

/* Respekt k prefers-reduced-motion — vypneme všechny dekorativní animace. */
@media (prefers-reduced-motion: reduce) {
    .couples-option,
    .couples-answer-details,
    .couples-progress-dot,
    .couples-reason-wrap,
    .couples-answer-card-confirm-wrap,
    .couples-answer-card-confirm {
        animation: none !important;
        transition: none !important;
    }
}

/* Finální CTA na poslední otázce — akcentový gradient + drobné svícení. */
.couples-btn-finish {
    background: linear-gradient(135deg, #1a73e8 0%, #6c47ff 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(108, 71, 255, 0.28);
}
@media (hover: hover) {
    .couples-btn-finish:hover {
        box-shadow: 0 8px 24px rgba(108, 71, 255, 0.38);
        filter: brightness(1.05);
    }
}

/* Reveal: chip s jistotou ve stejné logice jako třístupňová škála.
   Bez plného podkladu — dřív vypadal jako loading skeleton; teď je to jen tlumený metadata-řádek. */
.couples-confidence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #80868b;
    margin-top: 0.15rem;
}
.couples-conf-chip-dots {
    display: inline-flex;
    gap: 0.16rem;
}
.couples-conf-chip-dots span {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: #c9cdd2;
}
.couples-conf-chip-dots .filled {
    background: #1a73e8;
}
.couples-conf-chip-label { line-height: 1; }

/* Tlačítko zpět nad otázkou. */
.couples-back-btn {
    background: transparent;
    border: 0;
    color: #5f6368;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin: 0 auto 0.25rem 0;
    font-size: 0.9rem;
    border-radius: 8px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: inherit;
}
@media (hover: hover) {
    .couples-back-btn:hover {
        color: #1a73e8;
        background: #f1f3f4;
    }
}

/* Counter pro reason field — barevné varování při blížení limitu. */
.couples-reason-counter.warn { color: #f29900; }
.couples-reason-counter.danger { color: #d93025; font-weight: 600; }

/* Skrýt globální "spojení nestabilní" toast (slowconnection.js #connection-warning)
   na Couples flow stránkách — překrýval CTA. Couples flow má vždy .couples-bg
   na stránce, takže to detekujeme přes :has() na body. */
body:has(.couples-bg) #connection-warning {
    display: none !important;
}

/* Shrnutí aktuálního nastavení nad tlačítkem */
.couples-flags-summary {
    font-size: 0.86rem;
    color: rgba(0, 0, 0, 0.58);
    text-align: center;
    margin: 0.42rem 0 0.65rem;
    letter-spacing: 0.003em;
    line-height: 1.35;
}

/* Inline game flags pod intro formulářem — sdílený GameFlagsEditor v rámečku */
.couples-flags {
    width: 100%;
    max-width: min(720px, 100%);
    margin: 1.75rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    text-align: left;
}

.couples-flags-heading {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.32);
    text-align: center;
    margin-bottom: 1.25rem;
}

/* ── ODPOVĚDNÍ DLAŽDICE (text + vlastní text; jistota jako druhý krok po výběru) ─────────── */
.couples-options-cards {
    gap: 0;
}

.couples-options-cards .couples-answer-card + .couples-answer-card {
    /*border-top: 1px solid #e6e8eb;*/
    padding-top: 1.7rem;
}

.couples-answer-card {
    width: 100%;
    background: #ffffff;
    /*--border: 1.5px solid #e3e5e8;*/
    /*border-radius: 18px;*/
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

/* Vybraná/pending karta bez rámečku a stínu — zvýraznění nese jen modrá pilulka odpovědi. */
.couples-answer-card.selected,
.couples-answer-card.pending {
    border-color: transparent;
    box-shadow: none;
}

.couples-answer-card-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
}

/* Hlavní klikací zóna s textem odpovědi — dominantní, čte jako plné tlačítko. */
.couples-answer-card-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: auto;
    max-width: calc(100% - 3rem);
    background: transparent;
    border: 0;
    border-radius: 16px 16px 0 0; /* zakulatí hover bg nahoře bez nutnosti overflow: hidden na rodiči */
    padding: 0.35rem 1.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1a73e8; /* odpověď vypadá jako odkaz – akcentová modrá (sjednoceno s hover/selected) */
    font-family: var(--couples-game-font);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.couples-answer-card-chevron {
    font-size: 17px;
    opacity: 0.45;
    flex-shrink: 0;
    align-self: flex-start; /* u víceřádkových odpovědí má sedět u prvního řádku (u slova), ne uprostřed celé výšky */
    margin-top: 0.3em; /* opticky zarovná se středem výšky písmen prvního řádku */
    transition: opacity 0.15s, transform 0.15s;
    margin-right: 4px;
}

.couples-answer-card.selected .couples-answer-card-chevron,
.couples-answer-card.pending .couples-answer-card-chevron {
    opacity: 0.9;
    transform: rotate(90deg);
}

@media (hover: hover) {
    .couples-answer-card-main:hover {
        --background: #f0f4ff;
        color: #1a73e8;
    }
}

.couples-answer-card.selected .couples-answer-card-main,
.couples-answer-card.pending .couples-answer-card-main {
    background: #1a73e8;
    color: #fff;
}

.couples-answer-card-main:active {
    transform: scale(0.992);
}

.couples-answer-card-main:disabled {
    cursor: default;
    opacity: 0.6;
}

/* V pending stavu je hlavní text "zamčený" (už vybraný), ne prostě zašedlý disabled tlačítko. */
.couples-answer-card.pending .couples-answer-card-main:disabled {
    opacity: 1;
}

.couples-answer-card-custom-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    border: 0;
    background: transparent;
    color: #7f93ad;
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    transition: color 0.15s, opacity 0.15s, transform 0.15s;
}

.couples-answer-card:hover .couples-answer-card-custom-toggle {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: hover) {
    .couples-answer-card-custom-toggle:hover {
        color: #4f73a0;
    }
}

.couples-answer-card-custom-toggle.selected {
    color: #1a73e8;
}

.couples-answer-card-custom-toggle:active {
    transform: scale(0.96);
}

.couples-answer-card-custom-toggle:disabled {
    cursor: default;
    opacity: 0;
}

.couples-answer-card:hover .couples-answer-card-custom-toggle:disabled {
    opacity: 0.6;
}

.couples-answer-card.pending .couples-answer-card-custom-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Druhý krok po tapu na odpověď: dotaz na jistotu formou pilulek pod už zvoleným (zamčeným) textem.
   Wrapper animuje grid-template-rows 0fr → 1fr — skutečná plynulá výška bez skoku, ne jen fade/scale,
   takže se karta plynule "vyroluje" místo aby něco probliklo nebo se přepnula velikost textu. */
.couples-answer-card-confirm-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.couples-answer-card.pending .couples-answer-card-confirm-wrap {
    grid-template-rows: 1fr;
}

.couples-answer-card-confirm {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    opacity: 0;
    transition: opacity 0.18s ease, padding 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.couples-answer-card.pending .couples-answer-card-confirm {
    padding: 0.5rem 1rem 1rem;
    opacity: 1;
    transition: opacity 0.22s ease 0.08s, padding 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.couples-answer-card-confirm-prompt {
    font-size: 0.85rem;
    color: #5f6368;
    margin: 0;
}

.couples-confidence-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.couples-confidence-pill {
    min-height: 44px; /* touch target ≥ 44 px, žádná neviditelná hitbox potřeba */
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid #dadce0; /* tenčí obrys — lehčí, čistší vzhled */
    background: #ffffff;
    color: #3c4043;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

@media (hover: hover) {
    .couples-confidence-pill:hover {
        border-color: #1a73e8;
        color: #1a73e8;
        background: #f0f4ff;
    }
}

.couples-confidence-pill:active {
    transform: scale(0.96);
}

.couples-confidence-pill:disabled {
    cursor: default;
    opacity: 0.6;
}

.couples-confidence-skip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.25rem 0.6rem;
    border: 0;
    background: transparent;
    color: #7f93ad;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 0.15rem;
}

@media (hover: hover) {
    .couples-confidence-skip:hover {
        color: #4f73a0;
        text-decoration: underline;
    }
}

.couples-confidence-skip:disabled {
    cursor: default;
    opacity: 0.6;
}

.couples-answer-card-custom {
    width: min(500px, calc(100% - 2rem));
    margin: 0.15rem auto 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.couples-answer-card-custom-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.couples-answer-card-custom-save,
.couples-answer-card-custom-cancel {
    border-radius: 999px;
}

/* Na touch zařízeních není hover — tlačítko vlastní odpovědi musí být vidět trvale. */
@media (hover: none) {
    .couples-answer-card-custom-toggle {
        opacity: 0.55;
        pointer-events: auto;
    }
}

@media (max-width: 600px) {
    /* Mobilní podoba odpovědí: místo plovoucích textů plnohodnotné tap-karty,
       aby bylo na první pohled jasné, kam se ťuká, a layout nepůsobil jako roztažený desktop. */
    .couples-options {
        margin-top: 1.4rem;
    }
    .couples-options-cards {
        gap: 0.95rem;
    }
    .couples-options-cards .couples-answer-card + .couples-answer-card {
        padding-top: 0; /* odsazení řeší gap mezi kartami, ne vnitřní mezera */
    }
    .couples-answer-card {
        border: 0;
        border-radius: 18px;
        background: #f6f8fa; /* plochá podkladová plocha místo borderu a stínu — čistší vzhled */
        box-shadow: none;
    }
    .couples-answer-card-top {
        min-height: 74px;
        padding-right: 0.7rem; /* místo pro toggle vlastní odpovědi u pravého okraje */
    }
    .couples-answer-card-main {
        flex: 1 1 auto;
        max-width: none;
        min-height: 74px;
        justify-content: flex-start;
        padding: 1rem 0.65rem 1rem 1.25rem;
        border-radius: 18px 0 0 18px;
        font-size: 1.26rem;
        line-height: 1.24;
        text-align: left;
    }
    .couples-answer-card.pending .couples-answer-card-top {
        padding-right: 0;
    }
    .couples-answer-card.pending .couples-answer-card-main {
        justify-content: center;
        border-radius: 16px 16px 0 0;
        padding-left: 1rem;
        text-align: center;
    }
    .couples-answer-card.pending .couples-answer-card-custom-toggle {
        display: none;
    }
    /* !important nutné — FontAwesome kit vkládá <script> pravidlo `.fal { display: var(--fa-display, inline-block) }`
       do DOM později než tento stylesheet, takže při stejné specificitě (1 třída) by jinak vyhrálo. */
    .couples-answer-card-chevron {
        display: none !important;
    }
    /* Pod 600px šířky vždy klikatelné a viditelné bez ohledu na (hover) media query —
       emulované i reálné dotykové viewporty se v hlášení "hover" chování liší, šířka je spolehlivější signál. */
    .couples-answer-card-custom-toggle {
        width: 2.25rem;
        height: 2.25rem;
        flex-basis: 2.25rem;
        border-radius: 999px;
        background: transparent; /* bez vlastního kroužku - má tiše doplňovat kartu, ne soutěžit s textem odpovědi */
        color: #9aa0a6;
        font-size: 0.95rem;
        opacity: 0.55;
        pointer-events: auto;
    }
    .couples-brakes {
        justify-content: space-between;
        gap: 0.35rem 1.5rem;
        padding: 0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   DARK MODE OVERRIDES (Couples public flow)
   ============================================================ */
[data-bs-theme="dark"] .couples-bg {
    background: #0b0d10;
    color: #e5e7eb;
}

[data-bs-theme="dark"] .couples-pill {
    border-color: rgba(138, 180, 248, 0.55);
    color: #8ab4f8;
}

[data-bs-theme="dark"] .couples-title,
[data-bs-theme="dark"] .couples-form-headline,
[data-bs-theme="dark"] .couples-q-text,
[data-bs-theme="dark"] .couples-share-headline,
[data-bs-theme="dark"] .couples-reveal-card h3,
[data-bs-theme="dark"] .couples-reveal-line,
[data-bs-theme="dark"] .couples-link-text,
[data-bs-theme="dark"] .couples-relationship-card strong {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .couples-reveal-person.step-answer::before {
    background: #42d8c0;
}

[data-bs-theme="dark"] .couples-reveal-person.step-guess::before {
    background: #93a3f7;
}

[data-bs-theme="dark"] .couples-subtitle,
[data-bs-theme="dark"] .couples-label,
[data-bs-theme="dark"] .couples-q-hint,
[data-bs-theme="dark"] .couples-copy-hint,
[data-bs-theme="dark"] .couples-confidence-title,
[data-bs-theme="dark"] .couples-reveal-reason,
[data-bs-theme="dark"] .couples-loading,
[data-bs-theme="dark"] .couples-change-answer,
[data-bs-theme="dark"] .couples-reason-counter,
[data-bs-theme="dark"] .couples-flags-summary,
[data-bs-theme="dark"] .couples-flags-heading,
[data-bs-theme="dark"] .couples-confidence-chip,
[data-bs-theme="dark"] .couples-match-subtitle,
[data-bs-theme="dark"] .couples-action-hint,
[data-bs-theme="dark"] .couples-action-secondary,
[data-bs-theme="dark"] .couples-action-or {
    color: #9ca3af;
}

[data-bs-theme="dark"] .couples-brakes {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(11, 13, 16, 0.9); /* stejný odstín jako .couples-bg v dark módu (#0b0d10), jen poloprůhledný */
}

[data-bs-theme="dark"] .couples-brakes .btn-link,
[data-bs-theme="dark"] .couples-brakes a {
    color: #6b7280;
}

[data-bs-theme="dark"] .couples-private-badge {
    background: rgba(66, 216, 192, 0.14);
    color: #42d8c0;
}

[data-bs-theme="dark"] .couples-relationship-card,
[data-bs-theme="dark"] .couples-link-box,
[data-bs-theme="dark"] .couples-path-card,
[data-bs-theme="dark"] .couples-reveal-card,
[data-bs-theme="dark"] .couples-ai-box {
    background: #111418;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

[data-bs-theme="dark"] .couples-answer-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

[data-bs-theme="dark"] .couples-relationship-card span {
    color: #9ca3af;
}

[data-bs-theme="dark"] .couples-relationship-card.disabled {
    background: #101419;
}

[data-bs-theme="dark"] .couples-path-card span {
    color: #9ca3af;
}

[data-bs-theme="dark"] .couples-path-card strong {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .couples-path-card.selected {
    border-color: #60a5fa;
    background: #141b24;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16);
}

[data-bs-theme="dark"] .couples-path-card.disabled {
    background: #101419;
}

[data-bs-theme="dark"] .couples-path-card:hover {
    border-color: #60a5fa;
    background: #162236;
}

[data-bs-theme="dark"] .couples-relationship-card.selected {
    border-color: #60a5fa;
    background: #141b24;
    box-shadow: none;
}

/* Vybraná/pending odpověď v dark módu bez vlastního podkladu — zvýraznění nese modrá pilulka. */
[data-bs-theme="dark"] .couples-answer-card.selected,
[data-bs-theme="dark"] .couples-answer-card.pending {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

[data-bs-theme="dark"] .couples-reveal-actions,
[data-bs-theme="dark"] .couples-reveal-divider,
[data-bs-theme="dark"] .couples-flags {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .couples-options-cards .couples-answer-card + .couples-answer-card {
    border-color: transparent;
}

[data-bs-theme="dark"] .couples-link-box:hover {
    background: #162236;
    border-color: #60a5fa;
}

[data-bs-theme="dark"] .couples-progress-dot {
    background: #3f4752;
}

[data-bs-theme="dark"] .couples-progress-dot.done,
[data-bs-theme="dark"] .couples-progress-dot.current {
    background: #60a5fa;
}

[data-bs-theme="dark"] .couples-option,
[data-bs-theme="dark"] .couples-answer-card-main {
    background: transparent;
    border-color: transparent;
    color: #93c5fd; /* odpověď jako odkaz – světlá modrá pro kontrast na tmavém pozadí */
}

[data-bs-theme="dark"] .couples-answer-card-main:hover {
    background: transparent;
    color: #93c5fd;
}

[data-bs-theme="dark"] .couples-answer-card-custom-toggle {
    color: #9fb2cc;
}

/* Mobilní tap-karty potřebují viditelný obrys i na tmavém pozadí. */
@media (max-width: 600px) {
    [data-bs-theme="dark"] .couples-answer-card,
    [data-bs-theme="dark"] .couples-answer-card.selected,
    [data-bs-theme="dark"] .couples-answer-card.pending {
        border: 0;
        background: #151a21; /* plochá karta i v dark módu — bez obrysu; pending si drží podklad jako ve světlém režimu */
        box-shadow: none;
    }
    [data-bs-theme="dark"] .couples-answer-card-custom-toggle {
        background: transparent;
        color: #6b7a8f;
    }
}

@media (hover: hover) {
    [data-bs-theme="dark"] .couples-answer-card-custom-toggle:hover {
        color: #93c5fd;
    }
}

[data-bs-theme="dark"] .couples-answer-card-custom-toggle.selected {
    color: #93c5fd;
}

[data-bs-theme="dark"] .couples-option:hover {
    border-color: #60a5fa;
    background: #18283f;
    color: #93c5fd;
}

[data-bs-theme="dark"] .couples-option.selected,
[data-bs-theme="dark"] .couples-answer-card.selected .couples-answer-card-main,
[data-bs-theme="dark"] .couples-answer-card.pending .couples-answer-card-main {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

[data-bs-theme="dark"] .couples-confidence-pill {
    background: #0f1318;
    border-color: #4b5563;
    color: #d5d8dc;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .couples-confidence-pill:hover {
        border-color: #60a5fa;
        background: #1e3a5f;
        color: #93c5fd;
    }
}

[data-bs-theme="dark"] .couples-confidence-skip {
    color: #93a3b3;
}

/* Rozdíl = tlumená jantarová i v dark módu (ne chyba). */
[data-bs-theme="dark"] .couples-card-result.diff {
    color: #f5c26b;
    background: #2a2317;
}

[data-bs-theme="dark"] .couples-card-result.match {
    color: #81c995;
    background: #16271c;
}

[data-bs-theme="dark"] .couples-match-summary.diff {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .couples-ai-box {
    color: #d1d5db;
}

[data-bs-theme="dark"] .couples-back-btn {
    color: #9ca3af;
}

[data-bs-theme="dark"] .couples-back-btn:hover {
    color: #93c5fd;
    background: #1a1f26;
}

[data-bs-theme="dark"] .couples-btn-next {
    color: #93c5fd !important;
}

[data-bs-theme="dark"] .couples-btn-next i {
    color: #93c5fd;
    background: #1a2b45;
}