/* Moppsy welcome tour (Rundturen) — self-contained light + dark theme */

.moppsy-intro-overlay {
    background: rgb(15 23 42 / 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dark .moppsy-intro-overlay {
    background: rgb(2 6 23 / 0.78);
}

.moppsy-intro-card {
    position: relative;
    isolation: isolate;
    border: 1px solid rgb(226 232 240);
    background: rgb(255 255 255);
    box-shadow:
        0 25px 50px -12px rgb(15 23 42 / 0.28),
        0 0 0 1px rgb(255 255 255 / 0.65) inset;
}

.dark .moppsy-intro-card {
    border-color: rgb(71 85 105 / 0.8);
    background: rgb(15 23 42);
    box-shadow:
        0 25px 50px -12px rgb(0 0 0 / 0.55),
        0 0 0 1px rgb(148 163 184 / 0.1) inset;
}

.moppsy-intro-accent {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.45s ease, background 0.45s ease;
    opacity: 0.88;
}

.dark .moppsy-intro-accent {
    opacity: 0.38;
}

.moppsy-intro-accent--wave {
    background: linear-gradient(145deg, rgb(219 234 254), rgb(224 231 255), rgb(237 233 254));
}

.dark .moppsy-intro-accent--wave {
    background: linear-gradient(145deg, rgb(30 58 138 / 0.55), rgb(49 46 129 / 0.45), rgb(76 29 149 / 0.35));
}

.moppsy-intro-accent--map {
    background: linear-gradient(145deg, rgb(224 231 255), rgb(224 242 254), rgb(219 234 254));
}

.dark .moppsy-intro-accent--map {
    background: linear-gradient(145deg, rgb(49 46 129 / 0.5), rgb(12 74 110 / 0.42), rgb(30 64 175 / 0.35));
}

.moppsy-intro-accent--sprint {
    background: linear-gradient(145deg, rgb(254 243 199), rgb(224 231 255), rgb(219 234 254));
}

.dark .moppsy-intro-accent--sprint {
    background: linear-gradient(145deg, rgb(120 53 15 / 0.42), rgb(49 46 129 / 0.38), rgb(30 58 138 / 0.32));
}

.moppsy-intro-accent--wallet {
    background: linear-gradient(145deg, rgb(209 250 229), rgb(219 234 254), rgb(224 231 255));
}

.dark .moppsy-intro-accent--wallet {
    background: linear-gradient(145deg, rgb(6 78 59 / 0.45), rgb(30 58 138 / 0.36), rgb(49 46 129 / 0.32));
}

.moppsy-intro-accent--heart {
    background: linear-gradient(145deg, rgb(255 228 230), rgb(224 231 255), rgb(252 231 243));
}

.dark .moppsy-intro-accent--heart {
    background: linear-gradient(145deg, rgb(136 19 55 / 0.4), rgb(49 46 129 / 0.36), rgb(131 24 67 / 0.32));
}

.moppsy-intro-accent--ready {
    background: linear-gradient(145deg, rgb(219 234 254), rgb(209 250 229), rgb(254 243 199));
}

.dark .moppsy-intro-accent--ready {
    background: linear-gradient(145deg, rgb(30 58 138 / 0.42), rgb(6 78 59 / 0.36), rgb(120 53 15 / 0.32));
}

.moppsy-intro-content,
.moppsy-intro-footer {
    position: relative;
    z-index: 1;
}

.moppsy-intro-float {
    z-index: 0;
    animation: moppsy-intro-float-y 4s ease-in-out infinite;
    opacity: 0.28;
}

.dark .moppsy-intro-float {
    opacity: 0.22;
}

@keyframes moppsy-intro-float-y {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(8deg); }
}

.moppsy-intro-mascot {
    filter: drop-shadow(0 10px 18px rgb(15 23 42 / 0.18));
}

.dark .moppsy-intro-mascot {
    filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.45));
}

.moppsy-intro-emoji {
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.moppsy-intro-title {
    color: rgb(15 23 42);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .moppsy-intro-title {
        font-size: 1.5rem;
    }
}

.dark .moppsy-intro-title {
    color: rgb(248 250 252);
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

.moppsy-intro-body {
    color: rgb(71 85 105);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .moppsy-intro-body {
        font-size: 1rem;
    }
}

.dark .moppsy-intro-body {
    color: rgb(203 213 225);
}

.moppsy-intro-cleaner-box {
    border: 1px solid rgb(196 181 253 / 0.75);
    background: rgb(255 255 255 / 0.88);
    backdrop-filter: blur(4px);
}

.dark .moppsy-intro-cleaner-box {
    border-color: rgb(139 92 246 / 0.45);
    background: rgb(30 41 59 / 0.82);
}

.moppsy-intro-cleaner-kicker {
    color: rgb(124 58 237);
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dark .moppsy-intro-cleaner-kicker {
    color: rgb(196 181 253);
}

.moppsy-intro-cleaner-text {
    color: rgb(71 85 105);
    font-size: 0.75rem;
    line-height: 1.5;
}

.dark .moppsy-intro-cleaner-text {
    color: rgb(148 163 184);
}

.moppsy-intro-footer {
    border-top: 1px solid rgb(226 232 240 / 0.85);
    background: linear-gradient(to top, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.72));
}

.dark .moppsy-intro-footer {
    border-top-color: rgb(51 65 85 / 0.85);
    background: linear-gradient(to top, rgb(15 23 42 / 0.98), rgb(15 23 42 / 0.82));
}

.moppsy-intro-dot {
    background: rgb(203 213 225);
    border: none;
    cursor: pointer;
    height: 0.5rem;
    border-radius: 9999px;
    transition: width 0.2s ease, background 0.2s ease;
}

.dark .moppsy-intro-dot {
    background: rgb(71 85 105);
}

.moppsy-intro-dot.is-active {
    background: rgb(124 58 237);
    width: 1.5rem;
}

.dark .moppsy-intro-dot.is-active {
    background: rgb(167 139 250);
}

.moppsy-intro-skip {
    border: 1px solid rgb(226 232 240);
    color: rgb(71 85 105);
    background: rgb(255 255 255 / 0.9);
    cursor: pointer;
    font-family: inherit;
}

.moppsy-intro-skip:hover {
    background: rgb(248 250 252);
    border-color: rgb(203 213 225);
}

.dark .moppsy-intro-skip {
    border-color: rgb(71 85 105);
    color: rgb(226 232 240);
    background: rgb(30 41 59 / 0.9);
}

.dark .moppsy-intro-skip:hover {
    background: rgb(51 65 85);
    border-color: rgb(100 116 139);
}

.moppsy-intro-primary {
    border: none;
    color: rgb(255 255 255);
    background: linear-gradient(90deg, rgb(124 58 237), rgb(236 72 153));
    box-shadow: 0 10px 24px rgb(124 58 237 / 0.28);
    cursor: pointer;
    font-family: inherit;
}

.moppsy-intro-primary:hover {
    opacity: 0.95;
}

.dark .moppsy-intro-primary {
    box-shadow: 0 10px 28px rgb(124 58 237 / 0.4);
}