:root {
    --bg: var(--tg-theme-bg-color, #ffffff);
    --text: var(--tg-theme-text-color, #1c1c1e);
    --hint: var(--tg-theme-hint-color, #8e8e93);
    --button: var(--tg-theme-button-color, #2f6fed);
    --button-text: var(--tg-theme-button-text-color, #ffffff);
    --secondary-bg: var(--tg-theme-secondary-bg-color, #f2f2f7);
    --button-dark: color-mix(in srgb, var(--button) 80%, black);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#app {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 18px 36px;
    /* Telegram's own header can overlay the top of the WebView on real devices (not
       reproducible in a plain browser); telegram-web-app.js exposes how much to clear
       via this custom property, set to 0px when there's no overlay to avoid. */
    padding-top: calc(24px + var(--tg-content-safe-area-inset-top, 0px));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Картка + кнопки як одна група, по центру екрана — не картка вгорі й кнопки
       притиснуті донизу окремо. Коли вміст не влазить, звичайний потік/скрол
       спрацьовує сам собою (тут нема фіксованої висоти, що могла б щось обрізати). */
    justify-content: center;
}

.gauge {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 8%, var(--secondary-bg));
    overflow: hidden;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.gauge-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--button), var(--button-dark));
    box-shadow: 0 0 10px color-mix(in srgb, var(--button) 65%, transparent);
    transition: width 0.35s ease;
}

.screen-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 18px;
}

.card {
    position: relative;
    background-color: var(--secondary-bg);
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    border-radius: 24px;
    padding: 26px 22px;
    /* Тінь дає картці підняти над фоном; theme-aware через var(--text), а не
       хардкод чорного, щоб працювало однаково і у світлій, і в темній темі Telegram. */
    box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--text) 32%, transparent);
    overflow: hidden;
    animation: fade-in 0.3s ease;
}

/* Окремий шар під текстом (не просто background-image на .card), щоб можна було
   притлумити лише картинку в темній темі, не займаючи прозорість самого тексту.
   Сама картинка — через --card-accent (див. app.js: пер-картці рандом з 4 варіантів),
   тут лише запасний варіант, якщо його раптом не встановлено. */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--card-accent, url("assets/card-accent-1.png"));
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% auto;
    opacity: 0.9;
    z-index: 0;
}

[data-theme="dark"] .card::before {
    opacity: 0.35;
}

.card > * {
    position: relative;
    z-index: 1;
}

.progress {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--button);
    background: color-mix(in srgb, var(--button) 16%, transparent);
    padding: 5px 12px;
    border-radius: 999px;
    margin: 0 0 16px;
}

.prompt {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.55;
    white-space: pre-wrap;
    margin: 0;
}

/* Інтро й результат — суцільний текст в кілька абзаців, а не коротке питання, тому
   менший розмір і трохи легша вага читаються краще, ніж ті самі 21px/600. */
.prompt-small {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}

.result-text {
    white-space: normal;
}

.buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
    animation: fade-in 0.35s ease;
}

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

.option-button {
    width: 100%;
    padding: 18px 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    border: none;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--button), var(--button-dark));
    color: var(--button-text);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--button) 45%, transparent);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.option-button:active,
.option-button.pressed {
    transform: scale(0.97);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--button) 45%, transparent);
}

@media (hover: hover) {
    .option-button:hover {
        box-shadow: 0 6px 18px color-mix(in srgb, var(--button) 55%, transparent);
    }
}

/* Так/Ні мають різнитись, але жодна не повинна виглядати як "типова"/головна дія —
   тому обидві лишаються суцільно залитими, з однаковою за силою тінню й вагою, просто
   різного кольору: "Так" — акцентний синій (var(--button)), "Ні" — нейтральний графітовий,
   виведений з var(--text)/var(--bg). Без хардкоду червоного/зеленого — тест про психічний
   стан, а не світлофор "погано/добре", і без контуру — контур читався б як другорядна дія. */
.option-button--no {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--text) 70%, var(--bg)),
        color-mix(in srgb, var(--text) 84%, var(--bg))
    );
    color: var(--bg);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 35%, transparent);
}

.option-button--no:active,
.option-button--no.pressed {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 35%, transparent);
}

@media (hover: hover) {
    .option-button--no:hover {
        box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 45%, transparent);
    }
}

.status {
    font-size: 16px;
    color: var(--hint);
    text-align: center;
    margin-top: 40px;
}

.retry-button {
    margin-top: 16px;
}