:root {
    --pink: #ff7eb6;
    --pink-dark: #e94f92;
    --light-pink: #fff0f7;
    --white: #ffffff;
    --text: #302333;
    --muted: #8b778d;
    --border: rgba(255, 126, 182, 0.3);
    --shadow: 0 25px 80px rgba(233, 79, 146, 0.22);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, Arial, sans-serif;
    background: linear-gradient(135deg, #ffffff, #fff3f9, #ffe5f1);
    color: var(--text);
    overflow-x: hidden;
}

.background-glow {
    position: fixed;
    inset: 0;
    background:
            radial-gradient(circle at 20% 20%, rgba(255,126,182,.35), transparent 25%),
            radial-gradient(circle at 80% 70%, rgba(255,190,215,.45), transparent 30%);
    z-index: -1;
}

.app {
    width: min(1100px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding: 32px 0;
}

.screen {
    display: none;
    width: 100%;
    position: relative;
}

.screen.active {
    display: block;
}

.card {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 42px;
    border-radius: 34px;
    background: rgba(255,255,255,.78);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    text-align: center;
}

.hero {
    max-width: 760px;
    padding: 64px 52px;
}

.badge {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--light-pink);
    color: var(--pink-dark);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .08em;
}

h1 {
    font-size: clamp(42px, 8vw, 76px);
    margin: 16px 0;
    line-height: .95;
}

h2 {
    font-size: clamp(30px, 5vw, 48px);
    margin: 14px 0;
}

.subtitle {
    max-width: 640px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.65;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn, .back, .round-btn {
    border: none;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 800;
    font-size: 16px;
    transition: .2s;
}

.btn:hover, .back:hover, .round-btn:hover {
    transform: translateY(-2px);
}

.primary {
    padding: 15px 26px;
    background: linear-gradient(135deg, var(--pink), var(--pink-dark));
    color: white;
    box-shadow: 0 12px 30px rgba(233,79,146,.28);
}

.secondary, .back, .round-btn {
    padding: 15px 24px;
    background: white;
    color: var(--pink-dark);
    border: 1px solid var(--border);
}

.back {
    margin-bottom: 18px;
}

.level-nav {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
}

.round-btn {
    width: 60px;
    height: 60px;
    padding: 0;
    font-size: 38px;
}

.puzzle {
    width: min(560px, 75vw);
    aspect-ratio: 1/1;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border-radius: 26px;
    background: white;
    box-shadow: inset 0 0 0 1px var(--border);
}

.tile {
    background-size: 300% 300%;
    border: 1px solid rgba(255,255,255,.8);
    cursor: pointer;
    transition: .15s;
}

.puzzle.solved .tile {
    border: none;
    cursor: default;
}

.puzzle.solved {
    box-shadow: none;
}

.tile:hover {
    transform: scale(1.03);
    z-index: 2;
}

.tile.selected {
    filter: brightness(1.15);
    outline: 4px solid var(--pink);
    z-index: 3;
}

.password-box {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

input {
    width: min(340px, 100%);
    padding: 15px 20px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 16px;
    outline: none;
}

.artifacts {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 36px 0;
}
.artifact {
    width: 150px;
    height: 150px;
    border-radius: 30px;
    background: #f2e9ef;
    border: 1px dashed #c9b8c4;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    opacity: 1;
}

.artifact-content {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
}

.artifact-img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    animation: artifactAppear .45s ease;
}

.artifact-unknown {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: white;
    border: 2px dashed #c9b8c4;
    display: grid;
    place-items: center;
    font-size: 42px;
    font-weight: 900;
    color: #e94f92;
    animation: mysteryPulse 1.4s ease-in-out infinite;
}

.artifact span {
    font-size: 14px;
    font-weight: 900;
}

.artifact.active {
    background: white;
    border: 1px solid var(--border);
    box-shadow: 0 18px 45px rgba(233,79,146,.18);
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(255,240,247,.75);
    backdrop-filter: blur(12px);
    padding: 24px;
    z-index: 10;
}

.modal.active {
    display: grid;
}

.modal-card, .letter {
    width: min(600px, 100%);
    padding: 42px;
    border-radius: 34px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
}

.big-icon {
    font-size: 72px;
    margin-bottom: 12px;
}

.date-text {
    margin-top: 20px;
    color: var(--pink-dark);
    font-weight: 900;
    font-size: 20px;
}
.password-message {
    min-height: 26px;
    margin-top: 14px;
    font-weight: 800;
    color: var(--pink-dark);
}
.final-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background:
            radial-gradient(circle at center, rgba(255, 126, 182, 0.18), transparent 38%),
            rgba(255, 240, 247, 0.82);
    backdrop-filter: blur(16px);
    padding: 24px;
    z-index: 50;
    overflow: hidden;
}

.final-modal.active {
    display: grid;
}

.final-scene {
    position: relative;
    width: min(900px, 100%);
    min-height: 650px;
    display: grid;
    place-items: center;
}

.magic-particles {
    position: absolute;
    top: -120px;
    left: -120px;
    right: -120px;
    bottom: -120px;

    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.magic-particle {
    position: absolute;
    font-size: 20px;
    opacity: 0;
    animation: particleFloat 4s linear infinite;
}

.reward-case {
    position: absolute;
    width: 260px;
    height: 180px;
    animation: caseAppear 0.8s ease forwards, caseHide 0.6s ease 2.8s forwards;
}

.case-body {
    position: absolute;
    bottom: 0;
    width: 260px;
    height: 120px;
    border-radius: 28px;
    background: linear-gradient(145deg, #ff8fc2, #e94f92);
    box-shadow: 0 30px 80px rgba(233, 79, 146, 0.35);
}

.case-lid {
    position: absolute;
    top: 18px;
    width: 260px;
    height: 80px;
    border-radius: 28px 28px 18px 18px;
    background: linear-gradient(145deg, #ffb3d3, #ff6faf);
    transform-origin: bottom center;
    animation: lidOpen 0.9s ease 1.2s forwards;
    z-index: 2;
}

.case-lock {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: white;
    color: var(--pink-dark);
    font-size: 26px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(0,0,0,.1);
}

.case-glow {
    position: absolute;
    inset: 30px;
    border-radius: 999px;
    background: rgba(255,255,255,.65);
    filter: blur(24px);
    opacity: 0;
    animation: caseGlow 1.4s ease 1.4s forwards;
}

.envelope {
    position: absolute;
    width: 210px;
    height: 140px;
    opacity: 0;
    transform: translateY(80px) scale(.6);
    animation: envelopeRise 1.1s ease 2.3s forwards, envelopeHide .5s ease 3.8s forwards;
}

.envelope-back,
.envelope-front,
.envelope-flap,
.envelope-letter-mini {
    position: absolute;
    inset: 0;
}

.envelope-back {
    background: #fff7fb;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(233, 79, 146, 0.26);
}

.envelope-front {
    background:
            linear-gradient(135deg, transparent 49%, #ffd1e4 50%),
            linear-gradient(225deg, transparent 49%, #ffc0dc 50%);
    border-radius: 16px;
}

.envelope-flap {
    background: linear-gradient(135deg, #ffe1ee, #ff9fca);
    clip-path: polygon(0 0, 100% 0, 50% 58%);
    transform-origin: top;
    animation: flapOpen .7s ease 3s forwards;
    border-radius: 16px;
}

.envelope-letter-mini {
    width: 160px;
    height: 110px;
    left: 25px;
    top: 18px;
    background: white;
    border-radius: 12px;
    transform: translateY(20px);
    animation: miniLetterUp .8s ease 3.2s forwards;
}



.date-text {
    min-height: 34px;
    margin-top: 24px;
    color: var(--pink-dark);
    font-weight: 900;
    font-size: 20px;
}
.date-letter {
    position: absolute;
    width: min(720px, 100%);
    padding: 46px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,248,252,.97));
    border: 1px solid rgba(255,126,182,.32);
    box-shadow: 0 35px 100px rgba(233, 79, 146, 0.24);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(35px) scale(.92);
}

.date-letter.active {
    opacity: 1;
    pointer-events: auto;
    animation: dateLetterIn .7s ease forwards;
}

.final-letter.hide {
    animation: finalLetterOut .45s ease forwards;
    pointer-events: none;
}

.date-details {
    display: grid;
    gap: 14px;
    margin: 28px auto;
    max-width: 520px;
}

.date-details div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 22px;
    background: var(--light-pink);
    color: var(--pink-dark);
    font-weight: 900;
}

.date-details span {
    font-size: 26px;
}

.date-details p {
    margin: 0;
    color: var(--pink-dark);
}

.final-invite-note {
    color: var(--muted);
    font-size: 18px;
    font-weight: 800;
}
/* ===== DATE TICKET ===== */

.date-ticket {
    position: absolute;
    width: min(760px, 90vw);
    padding: 52px 58px;
    border-radius: 34px;
    background:
            linear-gradient(rgba(255, 252, 245, .94), rgba(255, 252, 245, .94)),
            repeating-linear-gradient(
                    0deg,
                    rgba(120, 80, 40, .035) 0px,
                    rgba(120, 80, 40, .035) 1px,
                    transparent 1px,
                    transparent 9px
            );
    box-shadow:
            0 35px 100px rgba(92, 45, 55, .24),
            inset 0 0 50px rgba(155, 95, 45, .08);
    border: 1px solid rgba(180, 140, 100, .22);
    text-align: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(45px) scale(.92) rotate(-2deg);
}

.date-ticket.active {
    opacity: 1;
    pointer-events: auto;
    animation: ticketAppear .8s cubic-bezier(.2,.8,.2,1) forwards;
}

.date-ticket::before,
.date-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #f8e3ea;
    transform: translateY(-50%);
    box-shadow: inset 0 0 18px rgba(150, 80, 100, .12);
}

.date-ticket::before {
    left: -27px;
}

.date-ticket::after {
    right: -27px;
}

.ticket-label {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(255, 222, 232, .9);
    color: #c72c72;
    font-weight: 950;
    letter-spacing: .14em;
    font-size: 15px;
    box-shadow: 0 10px 25px rgba(199, 44, 114, .12);
}

.date-ticket h2 {
    margin: 28px 0 12px;
    font-size: clamp(46px, 6vw, 72px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: #252533;
}

.ticket-for {
    color: #6b646c;
    font-size: 22px;
    font-weight: 900;
}

.ticket-line {
    margin: 34px 0;
    height: 2px;
    background-image: linear-gradient(
            90deg,
            rgba(199, 44, 114, .28) 50%,
            transparent 50%
    );
    background-size: 18px 2px;
}

.ticket-details {
    display: grid;
    gap: 16px;
    max-width: 570px;
    margin: 0 auto;
}

.ticket-details div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 22px;
    background: rgba(255, 240, 247, .75);
    border: 1px solid rgba(255, 126, 182, .18);
    color: #c72c72;
    font-weight: 950;
    text-align: left;
    box-shadow: 0 10px 25px rgba(199, 44, 114, .07);
    animation: ticketRowIn .55s ease both;
}

.ticket-details div:nth-child(1) { animation-delay: .15s; }
.ticket-details div:nth-child(2) { animation-delay: .3s; }
.ticket-details div:nth-child(3) { animation-delay: .45s; }
.ticket-details div:nth-child(4) { animation-delay: .6s; }

.ticket-details span {
    font-size: 28px;
    width: 34px;
    text-align: center;
}

.ticket-details p {
    margin: 0;
    color: #c72c72;
}

.ticket-note {
    margin-top: 32px;
    color: #c72c72;
    font-size: 22px;
    font-weight: 950;
    animation: ticketNotePulse 1.8s ease-in-out infinite;
}
.tile {
    user-select: none;
}

.tile.dragging {
    opacity: .45;
    transform: scale(.96);
}

.tile.drag-over {
    outline: 4px solid var(--pink);
    filter: brightness(1.08);
}

.puzzle.solved {
    animation: puzzleSolved .7s ease;
    box-shadow:
            inset 0 0 0 1px var(--border),
            0 0 0 8px rgba(255,126,182,.12),
            0 24px 70px rgba(233,79,146,.24);
}
.rules-box {
    position: absolute;
    top: 28px;
    right: 34px;
    z-index: 5;
}

.rules-button {
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.75);
    color: var(--pink-dark);
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(233, 79, 146, 0.12);
}

.rules-popup {
    position: absolute;
    top: 52px;
    right: 0;
    width: 320px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    pointer-events: none;
    transition: .25s ease;
    text-align: left;
}

.rules-popup h3 {
    margin: 0 0 10px;
    color: var(--pink-dark);
    font-size: 20px;
}

.rules-popup p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.rules-box:hover .rules-popup {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.rules-envelope-box {
    position: fixed;
    top: 28px;
    right: 34px;
    z-index: 20;
    cursor: pointer;
    text-align: center;
}

.rules-envelope {
    position: relative;
    width: 90px;
    height: 62px;
    margin: 0 auto;
    animation: envelopeFloat 2.6s ease-in-out infinite;
}

.rules-envelope-body {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6fac, #e94f92);
    box-shadow: 0 16px 36px rgba(233, 79, 146, .35);
}

.rules-envelope-body::before,
.rules-envelope-body::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,.18);
}

.rules-envelope-body::before {
    left: 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.rules-envelope-body::after {
    right: 0;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.rules-envelope-flap {
    position: absolute;
    inset: 0;
    background: #ff9bc8;
    clip-path: polygon(0 0, 100% 0, 50% 58%);
    border-radius: 12px;
    transform-origin: top;
    transition: .35s;
    z-index: 2;
}

.rules-envelope-heart {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 26px;
    z-index: 3;
}

.rules-envelope-text {
    margin-top: 10px;
    color: var(--pink-dark);
    font-weight: 950;
    font-size: 17px;
}

.rules-letter {
    position: absolute;
    top: 92px;
    right: 0;
    width: 340px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: left;
    opacity: 0;
    transform: translateY(-10px) scale(.94);
    pointer-events: none;
    transition: .3s ease;
}

.rules-letter.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.rules-letter h3 {
    margin: 0 0 12px;
    color: var(--pink-dark);
}

.rules-letter p {
    margin: 10px 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.rules-envelope-box.open .rules-envelope-flap {
    transform: rotateX(180deg);
}
#final {
    background:
            radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .75), transparent 28%),
            linear-gradient(135deg, #f6efe6, #efd8c8);
}

/*.final-letter {
    position: relative;
    width: min(820px, 92vw);
    padding: 70px 65px;
    background:
            linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
            repeating-linear-gradient(
                    0deg,
                    rgba(120, 80, 40, .035) 0px,
                    rgba(120, 80, 40, .035) 1px,
                    transparent 1px,
                    transparent 7px
            ),
            #fff8ea;
    border-radius: 10px;
    box-shadow:
            0 30px 80px rgba(70, 40, 20, .22),
            inset 0 0 40px rgba(150, 95, 40, .08);
    transform: rotate(-1.5deg);
    animation: paperDrop .9s ease both;
}

.final-letter::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(170, 115, 70, .18);
    pointer-events: none;
}

.final-letter::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 15% 20%, rgba(120, 70, 30, .06), transparent 18%),
            radial-gradient(circle at 80% 75%, rgba(120, 70, 30, .05), transparent 20%);
    border-radius: inherit;
    pointer-events: none;
}

.letter-badge,
.final-badge,
.badge {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 225, 235, .8);
    color: #c72c72;
    font-weight: 800;
    letter-spacing: .08em;
}

.final-invite-text {
    color: #c72c72;
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: 900;
    line-height: 1.08;
}

.typing-text::after {
    content: "|";
    animation: cursorBlink .7s infinite;
    color: #c72c72;
}

#final {
    background: linear-gradient(135deg, #f6efe6, #efd8c8);
}

#envelope {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#envelope.open {
    animation: envelopeOpen 1s ease forwards;
}

*/
#final .buttons,
#final .final-buttons {
    opacity: 0;
    animation: buttonsAppear .7s ease forwards;
    animation-delay: 5.5s;
}
#finalModal {
    background:
            radial-gradient(circle at 50% 35%, rgba(255,255,255,.65), transparent 30%),
            linear-gradient(135deg, #f7dfe7, #f5eee3);
}
/* ===== FINAL LETTER ===== */

#finalModal {
    background:
            radial-gradient(circle at 50% 25%, rgba(255,255,255,.75), transparent 32%),
            radial-gradient(circle at 15% 80%, rgba(255,190,210,.35), transparent 28%),
            linear-gradient(135deg, #f7dfe7, #f5eee3);
}

#finalLetter {
    position: relative;
    width: min(860px, 90vw);
    margin: 0 auto;
    text-align: center;
    padding: 60px 70px;

    background: #fffdf5;
    border-radius: 18px;

    border: 1px solid rgba(180,140,100,.2);

    box-shadow:
            0 30px 80px rgba(70,40,20,.18),
            inset 0 0 40px rgba(180,140,100,.08);

    opacity: 0;

    transform: translateY(30px) scale(.92) rotate(-1deg);

    animation: letterOpen .75s cubic-bezier(.2,.8,.2,1) 4.05s forwards;
}

#finalLetter::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(150, 95, 60, .18);
    border-radius: 10px;
    pointer-events: none;
}

#finalLetter::after {
    content: "♡";
    position: absolute;
    right: 34px;
    bottom: 24px;
    font-size: 34px;
    color: rgba(199, 44, 114, .22);
    transform: rotate(-12deg);
}

#finalLetter.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-25px) scale(.96);

    transition:
            opacity .45s ease,
            transform .45s ease,
            visibility 0s linear .45s;
}

#finalLetter .letter-badge {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 222, 232, .85);
    color: #b8326f;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 8px 25px rgba(199, 44, 114, .12);
    margin-bottom: 26px;
}

#finalLetter h2 {
    max-width: 720px;
    margin: 0 auto 24px;
    font-size: clamp(42px, 5.5vw, 68px);
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.045em;
    color: #252533;
}

#finalLetter .final-main-text {
    max-width: 700px;
    margin: 0 auto 20px;
    font-size: clamp(19px, 2.1vw, 25px);
    line-height: 1.55;
    font-weight: 600;
    color: #5f5a61;
}

#finalLetter .final-small-text {
    max-width: 700px;
    margin: 18px auto;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.65;
    font-weight: 500;
    color: #6b646c;
}

#finalLetter .final-invite-text {
    max-width: 760px;
    margin: 34px auto 26px;
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.045em;
    color: #c72c72;
    text-shadow: 0 8px 24px rgba(199, 44, 114, .13);
}

#finalLetter .buttons,
#finalLetter .final-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

#finalLetter .buttons.show,
#finalLetter .final-buttons.show {
    opacity: 1;
    transform: translateY(0);
}

/* =====mobile ===== */

#mobileBlock{
    position:fixed;
    inset:0;
    background:#f9dfe7;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
    padding:30px;
}

.mobile-card{
    background:white;
    max-width:420px;
    border-radius:24px;
    padding:40px 30px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.mobile-icon{
    font-size:70px;
    margin-bottom:20px;
}

.mobile-card h2{
    font-size:30px;
    margin-bottom:20px;
    color:#d63384;
}

.mobile-card p{
    font-size:18px;
    line-height:1.7;
    color:#555;
}

.mobile-card h3{
    margin-top:30px;
    color:#d63384;
}
.hint-box {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
}

.hint-button {
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg,#ff8cb7,#ffb9d3);
    color: white;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255,120,170,.25);
    transition: .25s;
}

.hint-button:hover {
    transform: scale(1.05);
}

.hint-popup {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    width: 300px;

    padding: 16px 18px;

    background: white;

    border-radius: 18px;

    box-shadow: 0 20px 45px rgba(0,0,0,.15);

    opacity: 0;
    pointer-events: none;

    transition: .3s;
}

.hint-box:hover .hint-popup {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hint-popup p {
    margin: 0;
    line-height: 1.6;
    color: #555;
}
/* ===== FINAL CRAFT CUTSCENE ===== */

.flying-artifacts {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.flying-artifact {
    position: absolute;
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 18px 35px rgba(199, 44, 114, .32));
    opacity: 0;
}

.flying-artifact-1 {
    left: 8%;
    top: 34%;
}

.flying-artifact-2 {
    right: 8%;
    top: 34%;
}

.flying-artifact-3 {
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
}

.final-modal.scene-started .flying-artifact-1 {
    animation: artifactFlyLeft 4.4s ease forwards;
}

.final-modal.scene-started .flying-artifact-2 {
    animation: artifactFlyRight 4.4s ease forwards;
}

.final-modal.scene-started .flying-artifact-3 {
    animation: artifactFlyBottom 4.4s ease forwards;
}

.final-flash {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,126,182,.45), transparent 70%);
    opacity: 0;
    transform: scale(.2);
    z-index: 4;
    pointer-events: none;
}

.final-modal.scene-started .final-flash {
    animation: finalFlash 1.2s ease 4.8s forwards;
}

/* задерживаем кейс, чтобы он появился после полёта артефактов */
.final-modal .reward-case {
    opacity: 0;
    animation: none;
}

.final-modal.scene-started .reward-case {
    animation:
            caseAppear 1s ease 4.8s forwards,
            caseHide 0.6s ease 7.2s forwards;
}

/* задерживаем конверт */
.final-modal .envelope {
    opacity: 0;
    animation: none;
}

.final-modal.scene-started .envelope {
    animation: envelopeRise 1.1s ease 7.5s forwards, envelopeHide .5s ease 8.6s forwards;
}

/* задерживаем письмо */
.final-modal #finalLetter {
    animation: none;
}

.final-modal.scene-started #finalLetter {
    animation: letterOpen .75s cubic-bezier(.2,.8,.2,1) 8.8s forwards;
}

@keyframes artifactFlyLeft {
    0% {
        opacity: 0;
        transform: translate(0, 30px) scale(.7) rotate(-20deg);
    }

    18% {
        opacity: 1;
    }

    55% {
        transform: translate(260px, -60px) scale(1.15) rotate(18deg);
    }

    82% {
        opacity: 1;
        transform: translate(360px, 20px) scale(.75) rotate(220deg);
    }

    100% {
        opacity: 0;
        transform: translate(390px, 40px) scale(.18) rotate(360deg);
    }
}

@keyframes artifactFlyRight {
    0% {
        opacity: 0;
        transform: translate(0, 30px) scale(.7) rotate(20deg);
    }

    18% {
        opacity: 1;
    }

    55% {
        transform: translate(-260px, -60px) scale(1.15) rotate(-18deg);
    }

    82% {
        opacity: 1;
        transform: translate(-360px, 20px) scale(.75) rotate(-220deg);
    }

    100% {
        opacity: 0;
        transform: translate(-390px, 40px) scale(.18) rotate(-360deg);
    }
}

@keyframes artifactFlyBottom {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(80px) scale(.7) rotate(0deg);
    }

    18% {
        opacity: 1;
    }

    55% {
        transform: translateX(-50%) translateY(-250px) scale(1.15) rotate(16deg);
    }

    82% {
        opacity: 1;
        transform: translateX(-50%) translateY(-170px) scale(.75) rotate(220deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-155px) scale(.18) rotate(360deg);
    }
}

@keyframes finalFlash {
    0% {
        opacity: 0;
        transform: scale(.2);
    }

    35% {
        opacity: 1;
        transform: scale(1.4);
    }

    100% {
        opacity: 0;
        transform: scale(2.8);
    }
}
/* FIX: открытие ящика после появления */

.final-modal .case-lid {
    animation: none;
    transform: rotateX(0deg) translateY(0);
}

.final-modal.scene-started .case-lid {
    animation: lidOpen 1.2s ease 5.8s forwards;
}

.final-modal .case-glow {
    animation: none;
    opacity: 0;
}

.final-modal.scene-started .case-glow {
    animation: caseGlow 1.4s ease 6.1s forwards;
}
/* ===== LEVEL PROGRESS ===== */

.level-progress {
    position: relative;
    width: min(420px, 80%);
    height: 38px;
    margin: 6px auto 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-line {
    position: absolute;
    left: 26px;
    right: 26px;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb3d1, #ffdce9);
    transform: translateY(-50%);
}

.progress-step {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: white;
    border: 3px solid #ffd1e3;
    color: #d63384;
    display: grid;
    place-items: center;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(214, 51, 132, .12);
    transition: .25s;
}

.progress-step.active {
    transform: scale(1.16);
    border-color: #e94f92;
    box-shadow: 0 0 0 8px rgba(233, 79, 146, .12);
}

.progress-step.done {
    background: linear-gradient(135deg, #ff8cb7, #e94f92);
    color: white;
    border-color: transparent;
}

/* ===== LOCKED HINT ===== */

.hint-box.locked .hint-button {
    background: linear-gradient(135deg, #c9c9c9, #999);
    box-shadow: none;
}

.hint-box.locked .hint-popup {
    width: 230px;
}

.hint-box.locked .hint-popup p {
    color: #777;
    font-weight: 700;
}