@charset "UTF-8";
/* ==========================================================================
   Večerní světnice: Funmix skin on top of main.css (body.skin-svetnice).
   Switched in common.neon site.design.funmix. Readability first: nothing a
   visitor must read under 18 px, no italic in content, dark text on cream.
   Ads keep their neutral frame, no ornament touches them.
   ========================================================================== */

body.skin-svetnice {
    --brand-dark: #2b2238;
    --brand-dark-2: #352a45;
    --brand-dark-3: #211a2c;
    --brand-dark-hover: #3d3050;
    --brand-gold: #d8a95b;
    --brand-gold-light: #f6ead3;
    --brand-gold-line: #e6cc99;
    --brand-cta-from: #ecc47c;
    --brand-cta-to: #d4a250;
    --brand-cta-edge: #b0822f;
    --brand-cta-hover-from: #f0cb85;
    --brand-cta-hover-to: #dcab5a;
    --brand-paper: #fbf5ec;
    --brand-card: #fffaf2;
    --brand-ink: #2a2330;
    --brand-ink-soft: #574b52;
    --brand-display: "Merriweather", Georgia, "Noto Serif", serif;
    --radius: 16px;
    --radius-btn: 999px;
    --mark: "\2726";
    --ritual-mark: #d8a95b;
    --ritual-glow: rgba(216, 169, 91, .9);
    --sv-text: "Literata", Georgia, "Noto Serif", "Droid Serif", serif;
    --sv-head: "Merriweather", Georgia, "Noto Serif", serif;
    --sv-logo: "Young Serif", Georgia, serif;
    --sv-script: "Allura", "Brush Script MT", cursive;
    --sv-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sv-paper: #fffdf8;
    --sv-gold-deep: #a97a2c;
    --sv-rose: #b8604f;
    --sv-chosen: #fdf1db;
    --sv-shadow: 0 5px 16px rgba(110, 72, 28, .11);
    --sv-gold-btn: linear-gradient(180deg, #f0cb85 0%, #dcab5a 55%, #cf9b49 100%);
    --sv-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e6cc99' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23e6cc99'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23e6cc99' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23e6cc99'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='6.5' width='128' height='1' fill='url(%23l)'/%3E%3Crect x='192' y='6.5' width='128' height='1' fill='url(%23r)'/%3E%3Cg fill='%23d8a95b'%3E%3Ccircle cx='137' cy='7' r='1.3'/%3E%3Ccircle cx='148' cy='7' r='1.7'/%3E%3Cpath d='M160 0l1.9 5.1L167 7l-5.1 1.9L160 14l-1.9-5.1L153 7l5.1-1.9z'/%3E%3Ccircle cx='172' cy='7' r='1.7'/%3E%3Ccircle cx='183' cy='7' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
    --sv-corner-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23d8a95b' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 2v15a7 7 0 0 0 7 7h15'/%3E%3Cpath d='M6 6v8a4 4 0 0 0 4 4h8'/%3E%3C/g%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23d8a95b'/%3E%3C/svg%3E");
    --sv-corner-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23d8a95b' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M24 2v15a7 7 0 0 1-7 7H2'/%3E%3Cpath d='M20 6v8a4 4 0 0 1-4 4H8'/%3E%3C/g%3E%3Ccircle cx='20' cy='6' r='1.6' fill='%23d8a95b'/%3E%3C/svg%3E");
    background: var(--brand-paper);
    color: var(--brand-ink);
    font-family: var(--sv-text);
}
.skin-svetnice a,
.skin-svetnice a:hover { color: #8a5d1e; }

/* ---------- header and footer: the evening band ---------- */
.skin-svetnice header { background: var(--brand-dark); }
.skin-svetnice #navigation {
    background:
        radial-gradient(1px 1px at 12% 30%, rgba(255, 236, 200, .55), transparent),
        radial-gradient(1px 1px at 27% 68%, rgba(255, 236, 200, .35), transparent),
        radial-gradient(1.4px 1.4px at 44% 22%, rgba(255, 228, 175, .6), transparent),
        radial-gradient(1px 1px at 61% 74%, rgba(255, 236, 200, .4), transparent),
        radial-gradient(1.4px 1.4px at 90% 62%, rgba(255, 228, 175, .5), transparent),
        linear-gradient(160deg, var(--brand-dark-2), var(--brand-dark-3));
}
.skin-svetnice a#logo,
.skin-svetnice a#logo:hover,
.skin-svetnice a#logo:focus,
.skin-svetnice a#logo:active {
    font-family: var(--sv-logo);
    font-weight: 400;
    letter-spacing: 0;
    color: #f4e1c6;
}
.skin-svetnice a#logo::before { content: none; }
.skin-svetnice a#logo::after {
    content: "\2726";
    position: relative;
    top: -.6em;
    margin-left: .08em;
    font-size: .45em;
    color: var(--brand-gold);
}
.skin-svetnice ul#nav-wide li a { font-family: var(--sv-text); color: #f4e1c6; }
.skin-svetnice ul#nav-wide li a.active,
.skin-svetnice ul#nav-wide li a:hover,
.skin-svetnice ul#nav-wide li a:focus,
.skin-svetnice ul#nav-wide li a:active {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-dark);
}
.skin-svetnice .lang-switcher__toggle {
    color: #f4e1c6;
    border-color: rgba(244, 225, 198, .38);
    background: rgba(255, 255, 255, .04);
}
.skin-svetnice #footer {
    background: var(--brand-dark);
    color: #e9dcc8;
}
.skin-svetnice #footer p,
.skin-svetnice #footer a { color: #e9dcc8; font-family: var(--sv-text); }

/* ---------- type ---------- */
.skin-svetnice main h1,
.skin-svetnice.web-funmix main h1,
.skin-svetnice main #application-result h1,
.skin-svetnice .main-title--result h1,
.skin-svetnice .page-intro h1 {
    font-family: var(--sv-head);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.24;
    letter-spacing: 0;
    color: var(--brand-ink);
    text-wrap: balance;
}
.skin-svetnice .page-intro .page-sub,
.skin-svetnice .main-text1 p {
    font-family: var(--sv-text);
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--brand-ink-soft);
    text-wrap: pretty;
}
.skin-svetnice main p.text,
.skin-svetnice .result-text {
    font-family: var(--sv-text);
    font-style: normal;
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--brand-ink);
}

/* section headings: the gold line with a small star above them */
.skin-svetnice main > h2,
.skin-svetnice main > section > h2,
.skin-svetnice #application-result > h2 {
    font-family: var(--sv-head);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand-ink);
    text-align: center;
}
.skin-svetnice main > h2::before,
.skin-svetnice main > section > h2::before,
.skin-svetnice #application-result > h2::before {
    content: "";
    display: block;
    height: 14px;
    margin: 0 auto 12px;
    max-width: 320px;
    background: var(--sv-orn) center / contain no-repeat;
}
.skin-svetnice main > h2::after,
.skin-svetnice main > section > h2::after,
.skin-svetnice #application-result > h2::after { content: none; display: none; }

/* ---------- app tiles: two per row, gold-framed cards, readable titles ---------- */
.skin-svetnice #application-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.skin-svetnice #application-list a,
.skin-svetnice #application-list a:hover,
.skin-svetnice #application-list a:focus,
.skin-svetnice #application-list a:active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 9px;
    padding: 5px 5px 12px;
    background: var(--brand-card);
    border: 1.5px solid var(--brand-gold-line);
    border-radius: 16px;
    box-shadow: var(--sv-shadow);
    overflow: hidden;
    text-align: center;
}
.skin-svetnice #application-list a:hover,
.skin-svetnice #application-list a:focus-visible {
    border-color: var(--brand-gold);
    transform: translateY(-2px);
}
.skin-svetnice #application-list a:active {
    transform: scale(.97);
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(216, 169, 91, .28), var(--sv-shadow);
}
.skin-svetnice #application-list a img {
    width: 100%;
    border-radius: 11px;
}
.skin-svetnice #application-list h2,
.skin-svetnice #application-list a:hover h2,
.skin-svetnice #application-list a:focus h2,
.skin-svetnice #application-list a:active h2 {
    flex: 0 0 auto;
    display: block;
    margin: 0;
    padding: 0 3px;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: var(--sv-text);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.32;
    color: var(--brand-ink);
    text-align: center;
    text-wrap: pretty;
}
.skin-svetnice #application-list h2::before,
.skin-svetnice #application-list h2::after { content: none; display: none; }
@media (max-width: 700px) {
    .skin-svetnice #application-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 0 12px;
    }
}

/* ---------- pictures ---------- */
.skin-svetnice .application-image,
.skin-svetnice main .image,
.skin-svetnice .generated-image img,
.skin-svetnice .result-figure .image {
    border-radius: 16px;
    border: 1px solid rgba(216, 169, 91, .55);
    box-shadow: 0 14px 30px rgba(70, 40, 15, .24);
}

/* ---------- step counter: four candles, lit as the visitor goes ---------- */
.skin-svetnice .step-progress,
.skin-svetnice.app-cteni .step-progress {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    max-width: var(--content-w);
    margin: 14px auto 0;
    padding: 0 16px 10px;
    background: linear-gradient(90deg, transparent, var(--brand-gold-line), transparent) bottom / 100% 1px no-repeat;
}
.skin-svetnice .step-progress__label,
.skin-svetnice.app-cteni .step-progress__label {
    order: -1;
    font-family: var(--sv-text);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand-ink-soft);
}
.skin-svetnice .step-progress__dots { gap: 8px; align-items: flex-end; }
.skin-svetnice .step-progress__dot,
.skin-svetnice.app-cteni .step-progress__dot {
    position: relative;
    width: 11px;
    height: 20px;
    margin-top: 16px;
    border-radius: 2px 2px 1px 1px;
    background: #efe6d8;
    border: 1px solid #dccbad;
}
.skin-svetnice .step-progress__dot.is-done,
.skin-svetnice .step-progress__dot.is-current {
    background: #fbf0dc;
    border-color: var(--brand-gold);
}
.skin-svetnice .step-progress__dot.is-done::before,
.skin-svetnice .step-progress__dot.is-current::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 9px;
    height: 13px;
    margin: 0 0 2px -4.5px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 50% 72%, #fff2c4 0 22%, #ffb84a 58%, #e4772b 100%);
    box-shadow: 0 0 7px rgba(255, 170, 60, .75);
    transform-origin: 50% 100%;
}
.skin-svetnice .step-progress__dot.is-current::before { animation: sv-flicker 1.6s ease-in-out infinite; }
.skin-svetnice .step-progress + .main-title { margin-top: 10px; }

/* ---------- name field and the button under it ---------- */
.skin-svetnice .question-prompt,
.skin-svetnice.app-cteni .question-prompt {
    font-family: var(--sv-head);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--brand-ink);
}
.skin-svetnice .input span { display: none; }
.skin-svetnice .input {
    font-size: 1rem;
    padding: 0;
    background: none;
    border-radius: 14px;
}
.skin-svetnice .input input[type="text"],
.skin-svetnice .input input.text {
    height: 62px;
    padding: 0 18px !important;
    border: 2px solid var(--brand-gold) !important;
    border-radius: 14px;
    background: var(--sv-paper);
    box-shadow: none;
    font-family: var(--sv-text);
    font-size: 1.5rem !important;
    font-weight: 400;
    color: var(--brand-ink);
}
.skin-svetnice .input input[type="text"]:focus,
.skin-svetnice .input input.text:focus {
    outline: none;
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 4px rgba(216, 169, 91, .28) !important;
}
.skin-svetnice .birthday-fields select.birth-select {
    min-height: 58px;
    font-family: var(--sv-text);
    font-size: 1.25rem;
    color: var(--brand-ink);
    background-color: var(--sv-paper);
    border: 2px solid var(--brand-gold-line);
    border-radius: 12px;
}

/* ---------- buttons: gold for the next step, evening for the way on ----------
   main.css pins button colours, radius and padding with !important, so these do too */
.skin-svetnice .button,
.skin-svetnice a.button,
.skin-svetnice button.button,
.skin-svetnice input.button,
.skin-svetnice .button:hover,
.skin-svetnice a.button:hover,
.skin-svetnice a.button:focus,
.skin-svetnice a.button:active,
.skin-svetnice a.button:visited {
    background: var(--sv-gold-btn) !important;
    color: var(--brand-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
    text-shadow: none;
    font-family: var(--sv-head);
    font-weight: 700;
    font-size: 1.3125rem;
    letter-spacing: 0;
    padding: .7em 1.4em !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(140, 92, 25, .22), 0 6px 16px rgba(160, 110, 40, .3) !important;
}
.skin-svetnice #send-area { padding: 0 16px; }
.skin-svetnice #send-area input.button,
.skin-svetnice #send-area .button,
.skin-svetnice .actions .button,
.skin-svetnice .actions a.button { border-radius: 999px !important; }
.skin-svetnice #send-area input.button,
.skin-svetnice #send-area .button { width: 100%; min-height: 62px; }
.skin-svetnice .actions { padding: 0 16px; }
.skin-svetnice .actions a.button { width: 100%; text-align: center; }
.skin-svetnice a.button-continue,
.skin-svetnice a.button-continue:hover,
.skin-svetnice a.button-continue:focus,
.skin-svetnice a.button-continue:active,
.skin-svetnice a.button-continue:visited {
    background: var(--brand-dark) !important;
    color: #f6e7cf !important;
    box-shadow: 0 6px 16px rgba(43, 34, 56, .25) !important;
}
.skin-svetnice a.button-try-again,
.skin-svetnice a.button-try-again:hover,
.skin-svetnice a.button-try-again:focus,
.skin-svetnice a.button-try-again:active,
.skin-svetnice a.button-try-again:visited {
    background: transparent !important;
    color: var(--brand-ink) !important;
    border: 1.5px solid var(--brand-gold) !important;
    box-shadow: none !important;
}
/* working: the label stays, a light runs over the button (main.css fixes colours with !important) */
.skin-svetnice #send-area.spinner input.button,
.skin-svetnice #send-area.spinner .button {
    color: var(--brand-ink) !important;
    text-shadow: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) 0 0 / 250% 100% no-repeat, var(--sv-gold-btn) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px rgba(160, 110, 40, .3) !important;
    animation: sv-sheen 1.1s ease-in-out infinite, chosen-pulse 1.4s ease-out infinite;
}
.skin-svetnice .actions a.button.spinner {
    color: #f6e7cf !important;
    text-shadow: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%) 0 0 / 250% 100% no-repeat, var(--brand-dark) !important;
    box-shadow: 0 6px 16px rgba(43, 34, 56, .25) !important;
    animation: sv-sheen 1.1s ease-in-out infinite, chosen-pulse 1.4s ease-out infinite;
}

/* ---------- answers: cream cards with an icon circle ---------- */
.skin-svetnice #answers.text-answers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-width: var(--content-w);
    margin: 0 auto 10px;
    padding: 0 16px;
}
.skin-svetnice #answers.text-answers > a:nth-child(n) { --tint: var(--brand-card); --tint-edge: var(--brand-gold-line); }
.skin-svetnice #answers.text-answers a,
.skin-svetnice #answers.text-answers a:hover,
.skin-svetnice #answers.text-answers a:focus,
.skin-svetnice #answers.text-answers a:active {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 66px;
    margin: 0;
    padding: 9px 44px 9px 10px;
    border: 1.5px solid var(--brand-gold-line);
    border-radius: 16px;
    background: var(--brand-card);
    box-shadow: var(--sv-shadow);
    filter: none;
    outline: none;
    font-family: var(--sv-text);
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    color: var(--brand-ink);
}
.skin-svetnice #answers.text-answers a:hover,
.skin-svetnice #answers.text-answers a:focus-visible { border-color: var(--brand-gold); }
.skin-svetnice #answers.text-answers a:active { transform: scale(.985); }
.skin-svetnice .qa-item__mark,
.skin-svetnice.app-cteni .qa-item__mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--brand-gold-light);
    box-shadow: none;
    color: var(--sv-gold-deep);
    font-size: 18px;
    line-height: 1;
    transition: background .25s, color .25s;
}
.skin-svetnice .qa-item__mark::before { content: var(--mark); }
.skin-svetnice .qa-item__mark--icon,
.skin-svetnice.app-cteni .qa-item__mark--icon {
    background: var(--brand-gold-light);
    box-shadow: none;
    font-size: 24px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.skin-svetnice .qa-item__mark--icon::before { content: none; }
.skin-svetnice .qa-item__label { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.skin-svetnice .qa-item__go,
.skin-svetnice.app-cteni .qa-item__go {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 1.4em;
    line-height: 1;
    color: var(--sv-gold-deep);
    opacity: .7;
}
/* the chosen answer: turns gold, the mark lights up, a star twinkles where the arrow was */
.skin-svetnice #answers.text-answers a.spinner {
    background: var(--sv-chosen) !important;
    border: 2px solid var(--brand-gold) !important;
    box-shadow: 0 0 0 4px rgba(216, 169, 91, .22), 0 8px 22px rgba(160, 110, 40, .2) !important;
    color: var(--brand-ink) !important;
    outline: 3px solid var(--ritual-glow);
}
.skin-svetnice #answers.text-answers a.spinner .qa-item__mark {
    background: var(--brand-gold);
    color: #fff;
    box-shadow: none;
    animation: sv-pop .4s ease-out;
}
.skin-svetnice #answers.text-answers a.spinner .qa-item__go { visibility: hidden; }
.skin-svetnice #answers.text-answers a.spinner::after,
.skin-svetnice.app-cteni #answers.text-answers a.spinner::after {
    content: var(--mark);
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -.5em;
    font-size: 1.05em;
    line-height: 1;
    color: var(--brand-gold);
    text-shadow: 0 0 8px rgba(216, 169, 91, .7);
    animation: sv-twinkle 1s ease-in-out infinite;
}

/* image answers and one-tap tiles: the same gold frame */
.skin-svetnice #answers.image-answers a img { border-radius: 12px; }
.skin-svetnice .choice-tile__btn {
    font-family: var(--sv-text);
    color: var(--brand-ink);
    background: var(--brand-card);
    border: 1.5px solid var(--brand-gold-line);
    border-radius: 14px;
    box-shadow: var(--sv-shadow);
}

/* the line under the controls while the tapped one works */
.skin-svetnice .qa-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 30px;
    margin: 4px auto 0;
    padding: 0 16px;
    opacity: 0;
    transition: opacity .3s;
    color: var(--sv-gold-deep);
    font-family: var(--sv-text);
    font-size: 1.1875rem;
    text-align: center;
}
.skin-svetnice .qa-wait > span:not(.qa-wait__stars) { color: var(--brand-ink-soft); }
.skin-svetnice .qa-wait.is-on { opacity: 1; }
.skin-svetnice .qa-wait__stars { display: inline-flex; gap: 4px; }
.skin-svetnice .qa-wait__stars i { font-style: normal; font-size: 13px; animation: sv-twinkle 1s ease-in-out infinite; }
.skin-svetnice .qa-wait__stars i:nth-child(2) { animation-delay: .18s; }
.skin-svetnice .qa-wait__stars i:nth-child(3) { animation-delay: .36s; }

/* ---------- reading result: a letter card ---------- */
.skin-svetnice.app-cteni .reading {
    position: relative;
    padding: 0 0 26px;
    background:
        var(--sv-corner-l) left 12px bottom 12px / 26px no-repeat,
        var(--sv-corner-r) right 12px bottom 12px / 26px no-repeat,
        var(--sv-paper);
    border: 1.5px solid var(--brand-gold-line);
    border-radius: 18px;
    box-shadow: inset 0 0 0 6px var(--sv-paper), inset 0 0 0 7px #eedcb6, 0 12px 30px rgba(110, 72, 28, .15);
    overflow: hidden;
}
.skin-svetnice.app-cteni .reading__persona {
    margin: 7px 7px 22px;
    padding: 16px 12px;
    border-radius: 12px 12px 0 0;
    font-family: var(--sv-text);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brand-gold);
}
.skin-svetnice.app-cteni .reading__line {
    margin: 0 0 1rem;
    padding: 0 22px;
    font-family: var(--sv-text);
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--brand-ink);
}
.skin-svetnice.app-cteni .reading__persona + .reading__line,
.skin-svetnice.app-cteni .reading > .reading__line:first-child {
    font-family: var(--sv-head);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.42;
    color: var(--brand-ink);
}
.skin-svetnice.app-cteni .reading__persona + .reading__line::after,
.skin-svetnice.app-cteni .reading > .reading__line:first-child::after { content: none; display: none; }
.skin-svetnice.app-cteni .reading__line:last-child:not(:first-of-type),
.skin-svetnice.app-cteni .reading__line:nth-last-child(2):not(:first-of-type) {
    font-style: normal;
    color: var(--brand-ink-soft);
}
.skin-svetnice .reading__sign {
    margin: 22px 22px 0;
    padding-top: 26px;
    background: var(--sv-orn) center top / 220px 14px no-repeat;
    font-family: var(--sv-script);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sv-rose);
    text-align: center;
    animation: reading-line .6s ease-out both;
    animation-delay: 1.2s;
}

/* ---------- sharing: one call, the card as a gift, Facebook first ---------- */
.skin-svetnice .share-result,
.skin-svetnice.app-cteni .share-result.share-reading {
    color: var(--brand-ink);
    background: var(--brand-card);
    border: 1.5px solid var(--brand-gold-line);
    border-radius: 18px;
    box-shadow: var(--sv-shadow);
}
.skin-svetnice .share-result__title,
.skin-svetnice.app-cteni .share-reading__call {
    font-family: var(--sv-head);
    font-weight: 700;
    font-size: 1.4375rem;
    line-height: 1.3;
    color: var(--brand-ink);
    text-wrap: balance;
}
.skin-svetnice .share-result__title::after { background: var(--brand-gold); }
.skin-svetnice .share-result__bridge {
    font-family: var(--sv-text);
    font-style: normal;
    font-size: 1.125rem;
    color: var(--brand-ink-soft);
}
.skin-svetnice.app-cteni .share-reading__card {
    width: min(82%, 340px);
    border: 8px solid #fff;
    border-radius: 6px;
    transform: rotate(-2.5deg);
    box-shadow: 0 16px 32px rgba(70, 40, 15, .26), 0 2px 6px rgba(70, 40, 15, .14);
}
.skin-svetnice.app-cteni .share-reading__card img { border-radius: 2px; }
.skin-svetnice .sr-btn__label,
.skin-svetnice.app-cteni .share-reading .sr-btn__label {
    font-family: var(--sv-ui);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--brand-ink-soft);
}
.skin-svetnice .sr-btn:not(.sr-btn--facebook) .sr-btn__circle,
.skin-svetnice.app-cteni .share-reading .sr-btn:not(.sr-btn--facebook) .sr-btn__circle {
    background: #fff;
    border: 1.5px solid var(--brand-gold-line);
    box-shadow: var(--sv-shadow);
}
.skin-svetnice .sr-btn--whatsapp .sr-btn__circle { color: #1fae55; }
.skin-svetnice .sr-btn--messenger .sr-btn__circle { color: #0a7cff; }
.skin-svetnice .sr-btn--other .sr-btn__circle,
.skin-svetnice.app-cteni .share-reading .sr-btn--other .sr-btn__circle { color: var(--brand-dark); background: #fff; }
.skin-svetnice.app-cteni .share-reading .sr-btn--facebook .sr-btn__label {
    font-family: var(--sv-ui);
    font-size: 1.25rem;
    color: #fff;
}
@media (max-width: 700px) {
    .skin-svetnice.app-cteni .share-result.share-reading,
    .skin-svetnice .share-result {
        margin-left: 12px;
        margin-right: 12px;
        border-left: 1.5px solid var(--brand-gold-line);
        border-right: 1.5px solid var(--brand-gold-line);
        border-radius: 18px;
    }
    .skin-svetnice.app-cteni .reading {
        margin-left: 12px;
        margin-right: 12px;
        border-left: 1.5px solid var(--brand-gold-line);
        border-right: 1.5px solid var(--brand-gold-line);
        border-radius: 18px;
    }
    .skin-svetnice.app-cteni .reading__line { padding: 0 18px; font-size: 1.25rem; }
    .skin-svetnice.app-cteni .reading__persona + .reading__line,
    .skin-svetnice.app-cteni .reading > .reading__line:first-child { font-size: 1.3125rem; }
    .skin-svetnice main h1,
    .skin-svetnice.web-funmix main h1,
    .skin-svetnice main #application-result h1,
    .skin-svetnice .main-title--result h1,
    .skin-svetnice .page-intro h1 { font-size: 1.625rem; }
}

/* ---------- motion ---------- */
@keyframes sv-flicker {
    0%, 100% { transform: scale(1, 1) rotate(0); }
    30% { transform: scale(.94, 1.08) rotate(-3deg); }
    60% { transform: scale(1.04, .95) rotate(2deg); }
}
@keyframes sv-pop { 40% { transform: scale(1.18); } }
@keyframes sv-twinkle {
    0%, 100% { opacity: .3; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes sv-sheen {
    from { background-position: 160% 0, 0 0; }
    to { background-position: -60% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skin-svetnice .step-progress__dot.is-current::before,
    .skin-svetnice #answers.text-answers a.spinner .qa-item__mark,
    .skin-svetnice #answers.text-answers a.spinner::after,
    .skin-svetnice .qa-wait__stars i,
    .skin-svetnice #send-area.spinner input.button,
    .skin-svetnice .actions a.button.spinner,
    .skin-svetnice .reading__sign { animation: none; }
}