/* Lenormand prototype. All rules are scoped to this page. */
.lenormand-page {
    --answer-yes: #4c705c;
    --answer-no: #985563;
    --answer-maybe: #8b6b35;
    padding-block: 48px 36px;
    text-align: center;
}

html[data-theme=dark] .lenormand-page {
    --answer-yes: #b1d1b7;
    --answer-no: #e1a9b4;
    --answer-maybe: #e3c183;
}

.lenormand-heading { max-width: 1000px; margin-inline: auto; }
.lenormand-heading .eyebrow { display: inline-flex; align-items: center; gap: 16px; }
.lenormand-heading .eyebrow span { font-size: 21px; font-weight: 400; }
.lenormand-heading h1 { margin: 13px 0 16px; font-size: clamp(44px, 4.8vw, 66px); }
.lenormand-heading h1 em { display: inline-block; color: var(--plum); font-weight: 500; }
.lenormand-heading > p { max-width: 570px; margin: 0 auto; font-size: 1rem; line-height: 1.8; }

.lenormand-steps {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 32px auto 8px;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.75rem;
}

.lenormand-steps li { display: flex; align-items: center; gap: 9px; }
.lenormand-steps li + li:before { content: ''; width: 34px; height: 1px; margin-right: 16px; background: var(--line-strong); }
.lenormand-steps li > span { font: 500 1.1875rem var(--font-title); color: var(--gold); }
.lenormand-steps .is-current { color: var(--plum); font-weight: 700; }

.lenormand-picker { margin: 0; }
.lenormand-deck { position: relative; height: 337px; max-width: 860px; margin: 0 auto; isolation: isolate; }
.lenormand-deck:before {
    content: '';
    position: absolute;
    inset: 34px 10% 3px;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);
}

.lenormand-card-back {
    --x: 0px;
    --y: 0px;
    --angle: 0deg;
    position: absolute;
    left: 50%;
    top: 36px;
    width: 154px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #46243f;
    box-shadow: 0 9px 22px #2e162827, 0 1px 3px #2e162839;
    transform: translateX(-50%) translate(var(--x), var(--y)) rotate(var(--angle));
    transition: transform .3s ease, box-shadow .3s ease;
    -webkit-tap-highlight-color: transparent;
}

.lenormand-card-back img { display: block; width: 100%; height: auto; border-radius: inherit; }
.lenormand-card-back:nth-child(1) { --x: -280px; --y: 46px; --angle: -20deg; }
.lenormand-card-back:nth-child(2) { --x: -210px; --y: 27px; --angle: -15deg; }
.lenormand-card-back:nth-child(3) { --x: -140px; --y: 12px; --angle: -10deg; }
.lenormand-card-back:nth-child(4) { --x: -70px; --y: 3px; --angle: -5deg; }
.lenormand-card-back:nth-child(6) { --x: 70px; --y: 3px; --angle: 5deg; }
.lenormand-card-back:nth-child(7) { --x: 140px; --y: 12px; --angle: 10deg; }
.lenormand-card-back:nth-child(8) { --x: 210px; --y: 27px; --angle: 15deg; }
.lenormand-card-back:nth-child(9) { --x: 280px; --y: 46px; --angle: 20deg; }

@media (hover: hover) {
    .lenormand-card-back:hover:not(:disabled) {
        transform: translateX(-50%) translate(var(--x), calc(var(--y) - 24px)) rotate(var(--angle));
        box-shadow: 0 18px 30px #2e162838, 0 0 0 2px var(--gold);
    }
}

.lenormand-card-back:focus-visible {
    z-index: 3;
    transform: translateX(-50%) translate(var(--x), calc(var(--y) - 24px)) rotate(var(--angle));
}

.lenormand-deck.is-shuffling .lenormand-card-back { transition: none; will-change: transform; }
.lenormand-card-back:disabled { opacity: 1; }
.lenormand-pick-hint { margin: 10px 0 8px; font-size: 0.875rem; }
.lenormand-pick-hint span { margin-right: 7px; color: var(--gold); font-size: 21px; vertical-align: middle; }
.lenormand-text-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 30px;
    background: transparent;
    color: var(--plum);
    font-size: 0.8125rem;
    font-weight: 600;
}

.lenormand-text-button:hover { background: var(--soft); }
.lenormand-text-button > span { font-size: 22px; font-weight: 400; }
.lenormand-possibilities { max-width: 570px; margin: 24px auto 0; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.lenormand-possibilities > p { margin-bottom: 13px; font: 500 1.375rem var(--font-title); }
.lenormand-possibilities > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lenormand-outcome { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 30px; background: color-mix(in srgb, currentColor 7%, var(--surface)); font-size: 0.75rem; font-weight: 700; }
.lenormand-answer-yes { color: var(--answer-yes); }
.lenormand-answer-no { color: var(--answer-no); }
.lenormand-answer-maybe { color: var(--answer-maybe); }
.lenormand-prototype-note { margin: 27px 0 0; font-size: max(0.6875rem, var(--mobile-caption-min, 0px)); }

.lenormand-result { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: center; gap: 58px; max-width: 850px; margin: 32px auto 36px; }
.lenormand-card-stage { position: relative; display: grid; place-items: center; min-height: 390px; }
.lenormand-orbit { position: absolute; width: 350px; height: 350px; border: 1px solid var(--line-strong); border-radius: 50%; transform: rotate(-25deg); }
.lenormand-orbit:before { content: ''; position: absolute; inset: -15px; border: 1px solid var(--line); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.lenormand-orbit:after { content: '✧'; position: absolute; left: 0; top: 36px; color: var(--gold); font-size: 30px; }
.lenormand-card-front {
    position: relative;
    width: 240px;
    margin: 0;
    padding: 10px 10px 20px;
    border: 1px solid #c5aa7d;
    border-radius: 12px;
    background: #fcf4e7;
    color: #513841;
    box-shadow: 0 18px 35px #40293724, 0 3px 6px #40293716;
    transform: rotate(-4deg);
    animation: lenormand-reveal .65s ease both;
}

.lenormand-card-front:before { content: ''; position: absolute; inset: 6px; border: 1px solid #d9c29d; border-radius: 7px; pointer-events: none; }
.lenormand-card-number { position: absolute; z-index: 1; top: 18px; left: 22px; font: 600 23px var(--font-title); }
.lenormand-card-front img { display: block; width: 100%; height: auto; }
.lenormand-card-front figcaption { padding-top: 4px; }
.lenormand-card-front figcaption > span { display: block; font: 600 32px/1.2 var(--font-title); }
.lenormand-card-front figcaption small { display: block; margin-top: 9px; color: #7b6356; font-size: max(0.5625rem, var(--mobile-caption-min, 0px)); letter-spacing: .035em; }

.lenormand-preview { max-width: 640px; margin: 44px auto 0; padding-top: 32px; border-top: 1px solid var(--line-strong); }
.lenormand-preview h2 { margin-bottom: 12px; font-size: 34px; }
.lenormand-preview > p { max-width: 420px; margin: 0 auto; font-size: 0.875rem; line-height: 1.8; }
.lenormand-preview-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 560px; margin: 24px auto 16px; }
.lenormand-preview-cards .lenormand-card-front { width: 100%; min-width: 0; padding: 8px 8px 18px; box-shadow: 0 7px 20px #40293712; transform: none; animation: none; }
.lenormand-preview-cards figcaption > span { font-size: 1.6875rem; }
.lenormand-preview-cards figcaption small { margin-top: 7px; font-size: max(0.625rem, var(--mobile-caption-min, 0px)); line-height: 1.6; letter-spacing: 0; }

.lenormand-meaning { text-align: left; }
.lenormand-meaning > .eyebrow { font-size: max(0.625rem, var(--mobile-caption-min, 0px)); }
.lenormand-answer { display: flex; align-items: center; gap: 15px; margin: 10px 0 15px; font-size: 66px; }
.lenormand-answer-symbol { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 50%; font: 400 24px var(--font-body); }
.lenormand-meaning h3 { margin-bottom: 14px; font-size: 30px; line-height: 1.15; }
.lenormand-meaning > p { margin-bottom: 22px; font-size: 0.875rem; line-height: 1.9; }
.lenormand-card-link { margin: -12px 0 18px; margin-inline-start: -14px; }
.lenormand-reflection { display: flex; gap: 13px; padding-top: 19px; border-top: 1px solid var(--line-strong); }
.lenormand-reflection > span { color: var(--gold); font-size: 28px; }
.lenormand-reflection strong { color: var(--ink); font-size: 0.75rem; font-weight: 600; }
.lenormand-reflection p { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.75; }

.lenormand-cta.info-cta { max-width: 700px; margin: 0 auto 32px; }
.lenormand-cta .button { white-space: normal; }
.lenormand-page .save-panel { margin-top: 0; }
.lenormand-restart { margin-top: 18px; }

@keyframes lenormand-reveal {
    from { opacity: 0; transform: translateY(14px) rotate(0deg); }
    to { opacity: 1; transform: translateY(0) rotate(-4deg); }
}

@media (max-width: 900px) {
    .lenormand-card-back { width: 140px; }
    .lenormand-card-back:nth-child(1) { --x: -240px; }
    .lenormand-card-back:nth-child(2) { --x: -180px; }
    .lenormand-card-back:nth-child(3) { --x: -120px; }
    .lenormand-card-back:nth-child(4) { --x: -60px; }
    .lenormand-card-back:nth-child(6) { --x: 60px; }
    .lenormand-card-back:nth-child(7) { --x: 120px; }
    .lenormand-card-back:nth-child(8) { --x: 180px; }
    .lenormand-card-back:nth-child(9) { --x: 240px; }
    .lenormand-result { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
    .lenormand-orbit { width: 290px; height: 290px; }
}

@media (max-width: 700px) {
    .lenormand-page { padding-block: 32px; }
    .lenormand-heading h1 { max-width: 460px; margin-inline: auto; }
    .lenormand-heading h1 em { display: block; }
    .lenormand-heading > p { max-width: 420px; font-size: 0.875rem; }
    .lenormand-steps { gap: 16px; margin-block: 25px; font-size: 0.75rem; }
    .lenormand-steps li { flex-direction: column; gap: 3px; }
    .lenormand-steps li + li:before { content: none; }
    .lenormand-deck { display: grid; grid-template-columns: repeat(3, 88px); justify-content: center; gap: 12px; height: auto; }
    .lenormand-card-back { position: relative; left: auto; top: auto; width: 100%; transform: none; border-radius: 7px; }
    .lenormand-card-back:hover:not(:disabled), .lenormand-card-back:focus-visible { transform: translateY(-5px); }
    .lenormand-pick-hint { margin-top: 22px; font-size: 0.75rem; }
    .lenormand-possibilities { margin-top: 20px; padding-top: 20px; }
    .lenormand-result { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
    .lenormand-card-stage { min-height: 365px; padding-block: 12px; overflow: clip; }
    .lenormand-orbit { width: min(290px, calc(100% - 32px)); height: auto; aspect-ratio: 1; }
    .lenormand-card-front { width: 216px; }
    .lenormand-card-front figcaption > span { font-size: 29px; }
    .lenormand-card-front figcaption small { padding-inline: 8px; overflow-wrap: anywhere; }
    .lenormand-preview { margin-top: 32px; padding-top: 28px; }
    .lenormand-preview h2 { font-size: 30px; }
    .lenormand-preview > p { font-size: 0.8125rem; }
    .lenormand-preview-cards { gap: 10px; }
    .lenormand-preview-cards .lenormand-card-front { padding: 5px 5px 14px; border-radius: 8px; }
    .lenormand-preview-cards .lenormand-card-front:before { inset: 4px; border-radius: 4px; }
    .lenormand-preview-cards figcaption > span { font-size: clamp(1.125rem, 4.8vw, 1.6875rem); }
    .lenormand-preview-cards figcaption small { font-size: max(0.5625rem, var(--mobile-caption-min, 0px)); overflow-wrap: anywhere; }
    .lenormand-meaning { max-width: 440px; margin-inline: auto; }
    .lenormand-meaning > .eyebrow { display: block; text-align: center; }
    .lenormand-answer { justify-content: center; font-size: 60px; }
    .lenormand-meaning h3 { text-align: left; font-size: 1.75rem; }
}