.zini-mani {
    min-height: 100dvh;
    background: linear-gradient(0deg, rgba(107, 90, 188, 0.5) 0%, rgba(107, 90, 188, 0.5) 100%), linear-gradient(163deg, #0e1852 0.58%, #002ed8 30.07%, #00c9fc 68.33%, #03fcfe 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    overflow: hidden;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.zini-mani--game {
    background: linear-gradient(163deg, #0e1852 0.58%, #002ed8 30.07%, #00c9fc 68.33%, #03fcfe 100%);
}

.zini-mani * {
    box-sizing: border-box;
}

.zini-mani .wrap._tele2 {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.zini-mani:has(.zm-desktop-intro) {
    position: static;
    overflow: auto;
}

.zini-mani .wrap._tele2:has(.zm-desktop-intro) {
    max-width: none;
}

.zm-screen {
    display: none;
    flex-direction: column;
    flex: 1;
    animation: zmFadeIn 0.3s ease;
}

.zm-screen--active {
    display: flex;
}

#zmIntro.zm-screen--active {
    min-height: 100dvh;
    transition: opacity 0.4s ease;
}

#zmIntro.zm-screen--fading {
    opacity: 0;
}

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

#zmPlayerSetup.zm-screen--active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 39px 19px 28px 21px;
    position: relative;
}

#zmGame {
    padding: 0 19px;
    display: flex;
    flex-direction: column;
}

#zmCardDeal.zm-screen--active {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    transition: opacity 0.4s ease;
}

#zmCardDeal.zm-screen--fading {
    opacity: 0;
}

.zm-card-deal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 37px 20px 0;
    flex: 1;
}

.zm-card-deal__stage {
    position: relative;
    width: 316px;
    height: 494px;
    margin-top: 60px;
}

.zm-card-deal__card {
    position: absolute;
    width: 316px;
    height: 494px;
    border-radius: 30px;
    object-fit: cover;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translate(var(--deal-from-x, 0), var(--deal-from-y, -120vh));
}

@keyframes zmCardDealDrop {
    0% {
        opacity: 1;
        transform: translate(var(--deal-from-x, 0), var(--deal-from-y, -120vh)) rotate(0deg);
    }
    70% {
        transform: translate(var(--deal-x, 0), calc(var(--deal-y, 0) + 12px)) rotate(var(--deal-rotate, 0deg));
    }
    85% {
        transform: translate(var(--deal-x, 0), calc(var(--deal-y, 0) - 5px)) rotate(var(--deal-rotate, 0deg));
    }
    100% {
        opacity: 1;
        transform: translate(var(--deal-x, 0), var(--deal-y, 0)) rotate(var(--deal-rotate, 0deg));
    }
}

.zm-card-deal__card--dropped {
    animation: zmCardDealDrop 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

#zmLevelSelect.zm-screen--active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 39px 19px 28px 21px;
}

.zm-intro {
    position: relative;
    min-height: 100dvh;
    padding: 37px 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(0deg, rgba(2, 0, 24, 0.58) 0%, rgba(2, 0, 24, 0.58) 100%),
        url('/img/zini_mani/start-bg.png') center top / cover no-repeat;
}

.zm-intro__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 74px;
}

.zm-intro__logo {
    width: 102px;
    height: auto;
}

.zm-intro__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    text-shadow: 0 12px 20px #131a3e;
    font-size: 100px;
    font-style: normal;
    font-weight: 900;
    line-height: 82px;
    letter-spacing: 0.1px;
}

.zm-intro__panel {
    margin-top: auto;
    padding: 26px 15px 23px 19px;

    border-radius: 30px;
    background: rgba(6, 19, 57, 0.4);
    box-shadow:
        0 10px 18px 0 #131a3e,
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6.35px);
    color: #f4f6ff;
}

.zm-intro__headline {
    margin: 0 0 16px;
    color: #d1f0ff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0;
}

.zm-intro__text {
    margin: 0;
    color: #d1f0ff;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.25px;
}

.zm-intro__start {
    width: 309px;
    height: 52px;
    margin: 45px auto 28px;
    border: none;
    border-radius: 30px;
    padding: 0;
    background: linear-gradient(180deg, #33df9c 4.21%, #1fb57b 97.33%);
    color: #115d3f;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    cursor: pointer;
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.zm-intro__start:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(11, 207, 140, 0.34);
}

.zm-intro__start:focus {
    outline: none;
}

.zm-player-list-wrap {
    position: relative;
    width: 100%;
    max-width: 350px;
    flex: 1;
    margin-bottom: 24px;
}

.zm-player-list {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 400px;
    padding: 21px 15px 31px 19px;
    border-radius: 30px;
    background: rgba(6, 25, 82, 0.42);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.5) inset;
}

.zm-player-list__inputs {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}

.zm-player-list__inputs::-webkit-scrollbar {
    width: 10px;
}

.zm-player-list__inputs::-webkit-scrollbar-track {
    background: transparent;
}

.zm-player-list__inputs::-webkit-scrollbar-thumb {
    background: rgba(5, 28, 104, 0.5);
    border-radius: 2px;
    border-left: 6px solid transparent;
    background-clip: padding-box;
}

.zm-level-title {
    color: #d1f0ff;
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin: 0 0 22px;
}

.zm-level-divider {
    width: 316px;
    height: 1px;
    background-color: #122d86;
}

.zm-level-subtitle {
    color: #d1f0ff;
    text-align: left;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    margin: 10px auto 11px;
    max-width: 316px;
}

.zm-level-carousel {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zm-level-carousel__track {
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

.zm-level-slide {
    display: none;
    flex-direction: column;
    max-width: 350px;
    min-height: 400px;
    border-radius: 30px;
    background: rgba(6, 25, 82, 0.42);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.5) inset;
    overflow: hidden;
}

.zm-level-slide--active {
    display: flex;
}

.zm-level-slide__img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 20px 0;
    height: 200px;
}

.zm-level-slide__img img {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 16px;
}

.zm-level-slide__body {
    margin-top: auto;
    padding: 16px 20px 20px;
    text-align: center;
}

.zm-level-slide__name {
    margin-bottom: 14px;
    color: #d1f0ff;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.zm-level-slide__desc {
    color: #d1f0ff;
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.25px;
}

.zm-level-slide__sep {
    width: 212px;
    height: 1px;
    background: #5dace6;
    margin: 22px auto 14px;
}

.zm-level-slide__note {
    color: #5dace6;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.25px;
    margin: 0;
}

.zm-level-arrow {
    position: absolute;
    bottom: -25px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 28px;
    background: linear-gradient(180deg, #33df9c 4.21%, #1fb57b 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.zm-level-arrow--prev {
    left: 16px;
}

.zm-level-arrow--next {
    right: 16px;
}

.zm-level-arrow img {
    width: 20px;
    height: 20px;
}

.zm-level-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 24px;
}

.zm-level-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #d1f0ff 4.21%, #a8e2ff 97.33%);
    color: #2264a2;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zm-level-dot-small {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2168ac;
}

.zm-level-dot--active {
    display: flex;
}

.zm-level-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

.zm-level-btn {
    width: 140px;
    height: 52px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.zm-level-btn--back {
    background: rgba(6, 25, 82, 0.42);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.5) inset;
    color: #4caae6;
}

.zm-level-btn--forward {
    background: linear-gradient(180deg, #d1f0ff 4.21%, #a8e2ff 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    color: #2264a2;
}

.zm-level-btn:hover {
    transform: translateY(-1px);
}

#zmPlayerSetup .zm-level-subtitle {
    margin-bottom: 16px;
}

.zm-player-input__field {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;

    border-radius: 25px;
    border: 1px solid transparent;
    background: rgba(5, 28, 104, 0.5);
    padding: 0 12px 0 20px;
    transition:
        background 0.2s,
        border-color 0.2s;
    box-shadow: 0 -1px 0.4px 0 rgba(0, 171, 255, 0.5) inset;
}

.zm-player-input__field--active,
.zm-player-input__field:focus-within {
    border-radius: 25px;
    background: linear-gradient(180deg, #d1f0ff 4.21%, #a8e2ff 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 #fff inset;
}

.zm-player-input__field input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    outline: none;
    padding: 0;
    min-width: 0;
}

.zm-player-input__field--active input,
.zm-player-input__field:focus-within input {
    color: #1c5d7b;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.zm-player-input__field input::placeholder {
    color: #2d70cc;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.zm-player-input__field--active input::placeholder,
.zm-player-input__field:focus-within input::placeholder {
    color: #aaa;
}

.zm-player-input__remove {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zm-player-input__remove img {
    width: 14px;
    height: 14px;
}

.zm-player-input__error {
    visibility: hidden;
    color: #ff6b6b;
    font-size: 12px;
    margin: 4px 0 5px 20px;
    line-height: 1.4;
}

.zm-player-input--error .zm-player-input__field {
    border: 1px solid #ff5959;
}

.zm-player-input--error .zm-player-input__error {
    visibility: visible;
}

#zmAddPlayer {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg, #33df9c 4.21%, #1fb57b 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    flex-shrink: 0;
}

#zmAddPlayer:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 18px 32px rgba(11, 207, 140, 0.34);
}

#zmAddPlayer img {
    width: 24px;
    height: 24px;
}

.zm-progress-bar {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 9;
}

.zm-progress-svg {
    width: 100%;
    max-width: 357px;
    height: auto;
}

.zm-summary .zm-progress-svg {
    margin-left: 0;
}

.zm-progress-fill,
.zm-progress-glow {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zm-progress-svg path {
    transition: fill 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zm-progress-icon,
.zm-progress-icon-img {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zm-card-stack {
    position: relative;
    margin: 0 auto;
    z-index: 4;
}

.zm-card-stack__blur {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 48px;
    transform: translate(-50%, -50%);
    width: 351px;
    height: 493px;
    border-radius: 30px;
    background: #0d1259;
    filter: blur(50px);
    z-index: 0;
}

.zm-card-stack__back {
    position: absolute;
    width: 316px;
    height: 494px;
    border-radius: 30px;
    z-index: 1;
    top: 0;
    left: 0;
    object-fit: cover;
}

.zm-card-stack__back--1 {
    transform: rotate(-4deg) translate(-6px, 24px);
}

.zm-card-stack__back--2 {
    transform: rotate(2.5deg) translate(6px, 24px);
}

.zm-card-flipper {
    position: relative;
    z-index: 2;
    width: 316px;
    height: 494px;
    perspective: 1000px;
    cursor: pointer;
}

.zm-card-flipper--entering {
    transform: rotate(2.5deg) translate(6px, 24px);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zm-card-flipper--entering-active {
    transform: rotate(0deg) translate(0, 0);
}

.zm-card-flipper__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.zm-card-flipper--flipped .zm-card-flipper__inner {
    transform: rotateY(180deg);
}

.zm-card-flipper__back,
.zm-card-flipper__front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 30px;
    overflow: visible;
}

.zm-card-flipper__back {
    z-index: 1;
}

.zm-card-flipper__back img {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    object-fit: cover;
    display: block;
}

.zm-card-flipper__back .zm-card__player-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.zm-card-flipper__front {
    transform: rotateY(180deg);
}

.zm-card-flipper__front .zm-card {
    width: 100%;
    height: 100%;
}

.zm-card {
    position: relative;
    z-index: 2;
    width: 316px;
    height: 494px;
    border-radius: 30px;
    background: linear-gradient(180deg, #d1f0ff 4.21%, #a8e2ff 97.33%);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:
        -1px 0 0 0 rgba(255, 255, 255, 0.3) inset,
        0 5px 5px 0 rgba(5, 16, 46, 0.5);
    overflow: visible;
}

.zm-card__inner {
    position: relative;
    width: 289px;
    height: 461px;
    margin: 14px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 14px 33px;
    background: url('/img/zini_mani/border-line.svg') no-repeat center;
}

.zm-card__type {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 12px;
    margin-left: 4px;
    color: #00d8f0;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.zm-card__question {
    color: #2b46ab;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.zm-card__question--end {
    font-size: 22px;
    line-height: 1.35;
    align-items: flex-start;
}

.zm-card__stats {
    font-size: 15px;
    line-height: 1.5;
    color: #0a1952;
    text-align: center;
    margin-top: 12px;
}

.zm-card__motivation {
    font-size: 12px;
    line-height: 1.5;
    color: #0a1952;
    text-align: center;
    margin-top: 12px;
    opacity: 0.6;
}

.zm-card__swype-icon {
    width: 48px;
    height: 48px;
    margin-top: 30px;
}

.zm-card__player-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    height: 48px;
    padding: 8px 30px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, rgba(23, 207, 255, 0.6) 0.71%, rgba(14, 143, 212, 0.6) 71.26%, rgba(17, 93, 186, 0.6) 93.98%, rgba(0, 129, 176, 0.6) 99.19%);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.51) inset;
    backdrop-filter: blur(3px);
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    white-space: nowrap;
}

.zm-card--activity {
    background: linear-gradient(212deg, #209b49 5.47%, #9effb3 14.72%, #9effb3 17.31%, #50cb73 28.88%, #37d165 52.37%, #5df098 60.76%, #5df098 64.17%, #1b9655 82.41%, #04554f 96.85%);
}

.zm-card--activity .zm-card__inner {
    background: url('/img/zini_mani/border-line-activity.svg') no-repeat center;
}

.zm-card--activity .zm-card__type {
    color: #075a4d;
}

.zm-card--activity .zm-card__question {
    color: #003a31;
}

.zm-card--activity .zm-card__player-badge {
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, rgba(117, 252, 186, 0.8) 0.71%, rgba(13, 144, 85, 0.8) 71.26%, rgba(1, 119, 83, 0.8) 93.98%, rgba(45, 181, 138, 0.8) 99.19%);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.51) inset;
    backdrop-filter: blur(3px);
}

.zm-activity-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 0, 24, 0.7);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.zm-activity-overlay--visible {
    opacity: 1;
}

@keyframes zmActivitySpin {
    0% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(1260deg);
    }
}

.zm-card-flipper--activity-spin .zm-card-flipper__inner {
    transition: none;
    animation: zmActivitySpin 1.8s ease-in-out forwards;
}

.zm-card--retro {
    background: linear-gradient(180deg, #5329da 4.21%, #2f149a 97.33%);
}

.zm-card--retro .zm-card__inner {
    background: url('/img/zini_mani/border-line-retro.svg') no-repeat center;
}

.zm-card--retro .zm-card__type {
    color: #130451;
    font-weight: 700;
}

.zm-card--retro .zm-card__question {
    color: #bfafff;
}

.zm-card--retro .zm-card__player-badge {
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, rgba(102, 55, 255, 0.6) 0.71%, rgba(80, 40, 214, 0.6) 71.26%, rgba(7, 23, 89, 0.6) 93.98%, rgba(55, 24, 169, 0.6) 99.19%);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.51) inset;
    backdrop-filter: blur(3px);
}

.zm-card__actions {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 44px;
    margin-top: 48px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.zm-card__actions--visible {
    opacity: 1;
    pointer-events: auto;
}

.zm-card__btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: rgba(6, 25, 82, 0.42);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.5) inset;
}

.zm-card__btn--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.zm-card__btn img {
    width: 50px;
    height: 50px;
}

.zm-card__stats-link {
    margin-top: 16px;
    text-align: center;
}

.zm-card__stats-link a {
    color: #00bcd4;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.zm-card__stats-link a:hover {
    color: #00d4f0;
}

.zm-end-link {
    display: block;
    text-align: center;
    color: rgba(209, 240, 255, 0.7);
    text-decoration: underline;
    font-size: 14px;
    margin-top: 24px;
    padding: 8px;
}

.zm-end-link:hover {
    color: #d1f0ff;
}

.zm-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.zm-card--summary {
    background: linear-gradient(180deg, rgba(83, 41, 218, 0.8) 4.21%, rgba(47, 20, 154, 0.8) 97.33%);
    backdrop-filter: blur(5px);
}

.zm-card--summary .zm-card__inner {
    padding: 80px 14px 14px;
    background: url('/img/zini_mani/border-line-summary.svg') no-repeat center;
}

.zm-card--summary .zm-card__type {
    color: #130451;
}

.zm-summary__text {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.zm-summary__player {
    color: #33e19b;
}

.zm-summary__bottom {
    color: #a18aff;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    margin-top: auto;
}

.zm-summary__btn {
    position: relative;
    z-index: 5;
    width: 309px;
    height: 52px;
    margin: auto auto 28px;
    border: none;
    border-radius: 30px;
    padding: 0;
    background: linear-gradient(180deg, #d1f0ff 4.21%, #a8e2ff 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    color: #2264a2;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.zm-summary__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.3);
}

.zm-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.zm-confetti {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: zmConfettiFall 3s ease-in forwards;
}

@keyframes zmCardFallDown {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(120vh) rotate(15deg);
        opacity: 0;
    }
}

.zm-card-stack--falling .zm-card-flipper {
    animation: zmCardFallDown 0.6s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.zm-card-stack--falling .zm-card-stack__back--2 {
    animation: zmCardFallDown 0.6s cubic-bezier(0.55, 0, 1, 0.45) 0.08s forwards;
}

.zm-card-stack--falling .zm-card-stack__back--1 {
    animation: zmCardFallDown 0.6s cubic-bezier(0.55, 0, 1, 0.45) 0.16s forwards;
}

.zm-card-stack__retro-reveal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.zm-maxlevel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 0, 24, 0.7);
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 190px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.zm-maxlevel-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

.zm-maxlevel-popup {
    display: inline-flex;
    padding: 30px 30px 40px 30px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    border-radius: 30px;
    background: rgba(66, 78, 116, 0.3);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.25) inset,
        0 20px 30px 0 #010418;
    backdrop-filter: blur(6.35px);
}

.zm-maxlevel-crown {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(180deg, #33df9c 4.21%, #1fb57b 97.33%);
    box-shadow: 0 0 20px 6px rgba(51, 223, 156, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zm-maxlevel-title {
    width: 205px;
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.zm-maxlevel-desc {
    width: 205px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.zm-maxlevel-popup {
    position: relative;
}

.zm-maxlevel-buttons {
    position: absolute;
    bottom: -20px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
}

.zm-maxlevel-btn {
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.zm-maxlevel-btn:hover {
    transform: translateY(-1px);
}

.zm-maxlevel-btn--end {
    display: flex;
    width: 113px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background: linear-gradient(180deg, #d1f0ff 4.21%, #a8e2ff 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    color: #2264a2;
}

.zm-maxlevel-btn--continue {
    display: flex;
    width: 113px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background: linear-gradient(180deg, #33df9c 4.21%, #1fb57b 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    color: #fff;
}

.zm-ready-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 230px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.zm-ready-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

.zm-ready-popup {
    position: relative;
    display: inline-flex;
    padding: 30px 30px 40px 30px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    border-radius: 30px;
    background: rgba(7, 14, 39, 0.7);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.25) inset,
        0 20px 30px 0 #010418;
    backdrop-filter: blur(6.35px);
    width: 265px;
    text-align: center;
}

.zm-ready-popup__title {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 27px;
}

.zm-ready-popup__desc {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.zm-ready-popup__btn {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 113px;
    height: 44px;
    padding: 15px 20px;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 30px;
    background: linear-gradient(180deg, #33df9c 4.21%, #1fb57b 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.zm-ready-popup__btn:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 18px 32px rgba(11, 207, 140, 0.34);
}

@keyframes zmConfettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotateZ(0deg) rotateX(0deg);
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotateZ(720deg) rotateX(360deg);
    }
}

.zm-tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 0, 24, 0.8);
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.zm-tutorial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 390px;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.zm-tutorial-content--visible {
    opacity: 1;
}

.zm-tutorial-progress {
    position: relative;
    z-index: 11;
}

.zm-tut-progress-fill,
.zm-tut-progress-glow {
    transition: none;
}

.zm-tut-icon,
.zm-tut-icon-img {
    transition: none;
}

.zm-tutorial-pointer {
    margin-top: -18px;
    margin-bottom: -24px;
    z-index: 11;
}

.zm-tutorial-pointer img {
    transform: rotate(180deg);
    width: 44px;
    height: 37px;
}

.zm-tutorial-popup {
    width: 286px;
    display: inline-flex;
    padding: 30px 51px 30px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 30px;
    background: rgba(66, 78, 116, 0.4);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.25) inset,
        0 10px 18px 0 #010418;
    backdrop-filter: blur(6.35px);
    flex-direction: column;
    margin: 0 20px;
    position: relative;
}

.zm-tutorial-popup__text {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    margin: 0;
}

.zm-tutorial-popup__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.zm-tutorial-skip {
    color: #775fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    text-decoration-line: underline;
}

.zm-tutorial-skip:hover {
    color: #a8aedb;
}

.zm-tutorial-next {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 28px;
    background: linear-gradient(180deg, #33df9c 4.21%, #1fb57b 97.33%);
    box-shadow:
        0 10px 18px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.zm-tutorial-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(11, 207, 140, 0.34);
}

.zm-tutorial-next img {
    width: 20px;
    height: 20px;
}

.zm-tutorial-actions {
    position: relative;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 44px;
}

.zm-tutorial-step2-pointer {
    z-index: 11;
    margin: -18px 0 -8px 50px;
    align-self: flex-start;
    padding-left: 30px;
}

.zm-tutorial-step2-pointer img {
    width: 44px;
    height: 37px;
}

.zm-tutorial-step3-pointer {
    z-index: 11;
    margin: -18px 0 -8px 0;
    align-self: center;
}

.zm-tutorial-step3-pointer img {
    width: 44px;
    height: 37px;
}

.zm-tutorial-step4-pointer {
    z-index: 11;
    margin: -18px 64px -8px 0;
    align-self: flex-end;
    padding-right: 30px;
}

.zm-tutorial-step4-pointer img {
    width: 44px;
    height: 37px;
}

.zm-card-stack--tutorial-highlight {
    z-index: 13;
    animation: zmTutorialPulse 1.8s ease-in-out infinite;
}

@keyframes zmTutorialPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(51, 223, 156, 0));
    }
    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 20px rgba(51, 223, 156, 0.5));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(51, 223, 156, 0));
    }
}

.zm-card-stack--tutorial-step6 {
    z-index: 13;
}

.zm-card-flipper--swype-hint {
    animation: zmSwypeHint 3.2s ease-in-out infinite;
}

@keyframes zmSwypeHint {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    20% {
        transform: translateX(-70px) rotate(-5deg);
    }
    40% {
        transform: translateX(0) rotate(0deg);
    }
    60% {
        transform: translateX(70px) rotate(5deg);
    }
    80% {
        transform: translateX(0) rotate(0deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

.zm-tutorial-step5-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 28px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.zm-tutorial-step5-bottom--visible {
    opacity: 1;
}

.zm-tutorial-step5-pointer {
    z-index: 11;
    margin: 0 0 -20px 0;
    align-self: center;
}

.zm-tutorial-step5-pointer img {
    transform: rotate(180deg);
    width: 44px;
    height: 37px;
}

.zm-tutorial-step2-bottom {
    margin-top: auto;
    padding-bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Desktop intro screen */
.zm-desktop-intro {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 60px;
    background: url('/img/zini_mani/desktop-bg.jpg') center center / cover no-repeat;
}

.zm-desktop-intro__logo {
    width: 120px;
    height: auto;
}

.zm-desktop-intro__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    text-shadow: 0 12px 20px #131a3e;
    font-size: 100px;
    font-weight: 900;
    line-height: 82px;
    letter-spacing: 0.1px;
    margin-top: 45px;
}

.zm-desktop-intro__qr {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zm-desktop-intro__qr img {
    width: 160px;
    height: 160px;
    display: block;
}

.zm-desktop-intro__qr-text {
    margin-bottom: 20px;
    color: #d1f0ff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 82px;
    text-align: center;
}

.zm-desktop-intro__panel {
    max-width: 560px;
    padding: 32px 36px;
    border-radius: 30px;
    background: rgba(6, 19, 57, 0.4);
    box-shadow:
        0 10px 18px 0 #131a3e,
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6.35px);
}

.zm-desktop-intro__headline {
    margin: 0 0 16px;
    color: #d1f0ff;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
}

.zm-desktop-intro__text {
    margin: 0;
    color: #d1f0ff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.25px;
}