/* --------------------------------------------------------------
# Fortune ball
-------------------------------------------------------------- */

.fortune-page {
    padding-bottom: 50px;
}

.fortune-page-copy {
    max-width: 820px;
    margin-bottom: 28px;
}

.fortune-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 50px;
    align-items: center;
}

.fortune-tool [hidden] {
    display: none !important;
}

.fortune-form-card textarea {
    min-height: 135px;
    resize: vertical;
}

.fortune-question-counter {
    margin: -12px 0 20px;
    font-size: 11px;
    text-align: right;
    color: #77758b;
}

.fortune-error {
    margin-bottom: 20px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: #8a2430;
    background: #fff0f2;
    border-radius: 10px;
}

.fortune-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.fortune-actions .button-line {
    flex: 1;
    width: auto;
    min-height: 44px;
    background: #fff;
}

.fortune-text-button {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #4343a0;
    text-transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.fortune-text-button:hover {
    opacity: .65;
}

.fortune-share-actions {
    margin-top: 18px;
    text-align: center;
}

.fortune-share-box {
    margin-top: 18px;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
}

.fortune-share-box label {
    margin-bottom: 10px;
    font-size: 12px;
}

.fortune-share-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.fortune-share-row input {
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    font-size: 12px;
    background: #f7f7fb;
    border: 1px solid #e8e5ef;
}

.fortune-share-row .button-line {
    min-height: 46px;
    padding: 0 16px;
    background: #fff;
}

.fortune-share-status {
    margin-top: 9px;
    font-size: 11px;
    color: #5f5f7a;
}

.fortune-ball-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fortune-ball {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 420px;
    height: 420px;
    padding: 0;
    color: #fff;
    background:
        radial-gradient(
            circle at 33% 26%,
            #555 0%,
            #242424 18%,
            #0d0d0d 50%,
            #000 74%,
            #161616 100%
        );
    border: 0;
    border-radius: 50%;
    box-shadow:
        inset -32px -36px 55px rgba(255, 255, 255, .04),
        inset 25px 20px 38px rgba(255, 255, 255, .05),
        0 30px 55px rgba(25, 24, 42, .24);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.fortune-ball:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.fortune-ball:focus-visible {
    outline: 3px solid #8d61f1;
    outline-offset: 6px;
}

.fortune-ball__shine {
    position: absolute;
    top: 50px;
    left: 76px;
    width: 108px;
    height: 58px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, .18) 0%,
        rgba(255, 255, 255, .04) 45%,
        rgba(255, 255, 255, 0) 75%
    );
    border-radius: 50%;
    transform: rotate(-25deg);
    pointer-events: none;
}

.fortune-ball__window {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 225px;
    height: 225px;
    background:
        radial-gradient(
            circle at 50% 42%,
            #172657 0%,
            #10183a 48%,
            #050916 78%,
            #020309 100%
        );
    border: 18px solid #090909;
    border-radius: 50%;
    box-shadow:
        inset 0 0 38px rgba(82, 105, 255, .22),
        0 0 0 3px #2a2a2a,
        0 10px 25px rgba(0, 0, 0, .65);
    overflow: hidden;
}

.fortune-ball__eight {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    font-size: 88px;
    font-weight: 700;
    line-height: 1;
    color: #111;
    background: #f7f7f7;
    border-radius: 50%;
    box-shadow:
        inset -10px -10px 20px rgba(0, 0, 0, .11),
        0 0 20px rgba(255, 255, 255, .08);
}

.fortune-ball__answer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 168px;
    min-height: 128px;
    padding: 28px 23px 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.22;
    text-align: center;
    color: #e8ecff;
    opacity: 0;
    transform: translateY(8px) scale(.95);
    transition:
        opacity .42s ease,
        transform .42s ease;
}

.fortune-ball__answer::before {
    content: '';
    position: absolute;
    inset: 4px 0 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(61, 83, 210, .95),
            rgba(35, 51, 145, .95)
        );
    clip-path: polygon(
        50% 0,
        100% 88%,
        50% 100%,
        0 88%
    );
    filter: drop-shadow(
        0 0 16px rgba(77, 99, 255, .55)
    );
}

.fortune-ball__answer--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fortune-tone-positive {
    color: #eef4ff;
}

.fortune-tone-neutral {
    color: #fff9e8;
}

.fortune-tone-negative {
    color: #ffeef0;
}

.fortune-ball--shake {
    animation: fortune-shake .85s ease-in-out;
}

@keyframes fortune-shake {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    12% {
        transform: translate3d(-12px, -3px, 0) rotate(-4deg);
    }

    25% {
        transform: translate3d(11px, 4px, 0) rotate(4deg);
    }

    38% {
        transform: translate3d(-9px, 2px, 0) rotate(-3deg);
    }

    52% {
        transform: translate3d(8px, -2px, 0) rotate(3deg);
    }

    67% {
        transform: translate3d(-5px, 1px, 0) rotate(-2deg);
    }

    82% {
        transform: translate3d(4px, 0, 0) rotate(1deg);
    }
}

.fortune-question-display {
    max-width: 430px;
    margin-top: 24px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #272746;
}

.fortune-disclaimer {
    max-width: 420px;
    margin-top: 15px;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
    color: #8a8999;
}

.fortune-content-footer {
    display: block;
    margin-top: 45px;
}

.fortune-content-footer .text {
    max-width: 820px;
}

/* Shared result */

.fortune-shared-wrap {
    width: min(100%, 720px);
    margin: 0 auto;
    padding-bottom: 50px;
    text-align: center;
}

.fortune-shared-wrap > h1 {
    margin-bottom: 24px;
}

.fortune-shared-question {
    max-width: 620px;
    margin: 0 auto 28px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: #272746;
}

.fortune-shared-ball-wrap {
    display: flex;
    justify-content: center;
}

.fortune-ball--static {
    cursor: default;
}

.fortune-ball--static:hover {
    transform: none;
}

.fortune-shared-actions {
    margin-top: 30px;
}

.fortune-shared-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 980px) {
    .fortune-tool {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .fortune-ball-column {
        order: -1;
    }
}

@media screen and (max-width: 640px) {
    .fortune-page {
        padding-bottom: 30px;
    }

    .fortune-ball {
        width: min(88vw, 350px);
        height: min(88vw, 350px);
    }

    .fortune-ball__window {
        width: 190px;
        height: 190px;
        border-width: 15px;
    }

    .fortune-ball__eight {
        width: 112px;
        height: 112px;
        font-size: 74px;
    }

    .fortune-ball__answer {
        width: 148px;
        min-height: 112px;
        padding: 25px 20px 18px;
        font-size: 15px;
    }

    .fortune-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fortune-actions .button-line {
        width: 100%;
    }

    .fortune-share-row {
        grid-template-columns: 1fr;
    }

    .fortune-share-row .button-line {
        width: 100%;
    }

    .fortune-text-button {
        min-height: 0 !important;
    }

    .fortune-shared-question {
        font-size: 18px;
    }

    .fortune-shared-wrap {
        padding-bottom: 30px;
    }
}