.mka-wrap{max-width:1120px;margin:0 auto;padding:18px;color:#f3e8ff;background:radial-gradient(circle at top left,rgba(124,92,255,.28),transparent 32%),radial-gradient(circle at bottom right,rgba(255,201,88,.18),transparent 34%),linear-gradient(135deg,#090613,#151025 45%,#08060f);border-radius:22px;box-shadow:0 0 35px rgba(73,45,145,.45)}.mka-topbar{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px}.mka-topbar a{color:#ffe08a}.mka-hero{text-align:center;padding:22px 12px;border:1px solid rgba(255,215,128,.28);border-radius:20px;background:linear-gradient(135deg,rgba(40,27,69,.95),rgba(11,8,22,.95));margin-bottom:14px}.mka-hero h2{margin:0 0 8px;color:#ffe08a;text-shadow:0 0 14px rgba(255,210,90,.42);letter-spacing:1px}.mka-hero p{margin:0;color:#cab8ee}.mka-profile{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.mka-profile span,.mka-profile strong{padding:8px 12px;border-radius:999px;background:rgba(17,11,35,.85);border:1px solid rgba(124,92,255,.25);color:#ffe9a8}.mka-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mka-mode-card{display:block;text-decoration:none;color:#f3e8ff;background:rgba(13,9,28,.94);border:1px solid rgba(146,116,255,.28);border-radius:20px;padding:18px;box-shadow:inset 0 0 22px rgba(0,0,0,.28),0 0 18px rgba(89,64,170,.22);transition:.15s}.mka-mode-card:hover{transform:translateY(-3px);border-color:#ffd86b}.mka-mode-card b{display:block;font-size:34px;color:#ffd86b}.mka-mode-card h3{margin:8px 0;color:#ffd978}.mka-mode-card p{margin:0;color:#cab8ee}.mka-message{min-height:34px;line-height:34px;margin:12px 0;padding:0 14px;border-radius:14px;background:rgba(17,11,35,.85);border:1px solid rgba(124,92,255,.25);color:#ffe9a8}.mka-joker-message{background:rgba(92,54,9,.92);border-color:rgba(255,216,107,.55);box-shadow:0 0 16px rgba(255,216,107,.25)}.mka-board{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch}.mka-card{background:rgba(13,9,28,.94);border:1px solid rgba(146,116,255,.28);border-radius:20px;padding:18px;box-shadow:inset 0 0 22px rgba(0,0,0,.28),0 0 18px rgba(89,64,170,.22)}.mka-card h3{margin:0 0 12px;color:#ffd978}.mka-dice-card{min-height:245px}.mka-rolls{color:#bdaef0;margin-bottom:14px}.mka-dice-row{display:flex;flex-wrap:wrap;gap:14px;min-height:116px;align-items:flex-start}.mka-die{width:86px;height:102px;border:2px solid #7055d6;border-radius:18px;background:linear-gradient(145deg,#2c2146,#171129);box-shadow:0 0 8px rgba(124,92,255,.35),inset 0 0 8px rgba(0,0,0,.7);cursor:pointer;position:relative;padding:8px;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.mka-die:hover{transform:translateY(-2px);border-color:#a991ff}.mka-die.is-held{border-color:#ffd76a;background:linear-gradient(145deg,#4b3410,#241705);box-shadow:0 0 16px rgba(255,211,90,.55),inset 0 0 8px rgba(0,0,0,.85)}.held-badge{display:block;position:absolute;left:7px;right:7px;bottom:6px;font-size:9px;line-height:17px;border-radius:999px;color:#1b1202;background:#ffd76a;box-shadow:0 0 8px rgba(255,215,106,.45)}.die-face{width:62px;height:62px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;background:#120d22;border-radius:14px;padding:9px;box-shadow:inset 0 0 10px rgba(0,0,0,.85)}.die-face span{display:block;width:10px;height:10px;align-self:center;justify-self:center;border-radius:999px;background:#fff4c7;box-shadow:0 0 3px rgba(255,244,199,.5)}.die-face em{display:block}.value-0 span{display:none}.mka-actions{margin-top:18px;min-height:44px;display:flex;gap:10px;flex-wrap:wrap}.mka-btn,.mka-mini-btn{border:1px solid rgba(255,218,120,.35);color:#ffe8a8;background:linear-gradient(135deg,#302050,#1a1230);border-radius:999px;padding:10px 18px;cursor:pointer;transition:filter .12s ease,transform .12s ease}.mka-btn:hover,.mka-mini-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}.mka-btn:disabled,.mka-mini-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.mka-primary{background:linear-gradient(135deg,#7c5cff,#4e34ad);color:#fff}.mka-total-card{text-align:center;min-height:245px}.mka-total{font-size:58px;font-weight:bold;color:#ffe08a;text-shadow:0 0 18px rgba(255,220,120,.35)}.mka-score-card{margin-top:16px}.mka-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.mka-score-column{display:flex;flex-direction:column;gap:10px}.mka-score-column h4{margin:0 0 4px;padding:8px 12px;border-radius:12px;background:rgba(255,216,107,.10);border:1px solid rgba(255,216,107,.20);color:#ffd978}.mka-score-row{display:grid;grid-template-columns:1fr 52px 96px;gap:8px;align-items:center;min-height:46px;padding:8px 10px;border-radius:14px;background:rgba(35,24,62,.75);border:1px solid rgba(124,92,255,.22)}.mka-score-row.filled{background:rgba(70,49,18,.78);border-color:rgba(255,215,106,.35)}.mka-score-row.joker{background:rgba(91,55,12,.86);border-color:rgba(255,216,107,.62);box-shadow:0 0 14px rgba(255,216,107,.22)}.score-name{color:#f2e8ff}.score-name em{font-size:10px;font-style:normal;margin-left:5px;padding:2px 6px;border-radius:999px;background:#ffd86b;color:#1b1202}.score-value{text-align:center;color:#ffe08a;font-weight:bold}.score-done{text-align:center;color:#90f7b2;font-weight:bold}.mka-mini-btn{padding:7px 10px;font-size:12px}.mka-score-bonus-row{display:flex;justify-content:space-between;align-items:center;min-height:42px;padding:8px 12px;border-radius:14px;background:rgba(255,216,107,.12);border:1px solid rgba(255,216,107,.28);color:#ffe8a8}.mka-score-bonus-row strong{color:#ffd978}.mka-kniffel-bonus{background:rgba(92,54,9,.78);border-color:rgba(255,216,107,.45)}.mka-highscore{margin-top:16px}.mka-highscore ol{margin:0;padding-left:22px}.mka-highscore li{margin:8px 0;display:flex;justify-content:space-between;gap:12px}@media(max-width:900px){.mka-mode-grid{grid-template-columns:1fr 1fr}.mka-board,.mka-score-grid{grid-template-columns:1fr}}@media(max-width:600px){.mka-mode-grid{grid-template-columns:1fr}.mka-score-row{grid-template-columns:1fr 48px 90px}.mka-die{width:78px;height:98px}}

/* Mystic Kniffel Arena - Animationssystem */
.mka-card,
.mka-mode-card,
.mka-hero {
    animation: mkaFadeUp .35s ease both;
}

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

.mka-die {
    will-change: transform, box-shadow;
}

.mka-die.mka-rolling {
    animation: mkaDiceShake .55s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes mkaDiceShake {
    0% { transform: translate(0,0) rotate(0deg) scale(1); }
    12% { transform: translate(-3px,2px) rotate(-7deg) scale(1.03); }
    24% { transform: translate(4px,-2px) rotate(8deg) scale(1.04); }
    36% { transform: translate(-4px,-1px) rotate(-10deg) scale(1.02); }
    48% { transform: translate(3px,3px) rotate(9deg) scale(1.05); }
    60% { transform: translate(-2px,1px) rotate(-6deg) scale(1.03); }
    75% { transform: translate(2px,-2px) rotate(5deg) scale(1.02); }
    100% { transform: translate(0,0) rotate(0deg) scale(1); }
}

.mka-die.is-held {
    animation: mkaHeldPulse 1.8s ease-in-out infinite;
}

@keyframes mkaHeldPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255,211,90,.45), inset 0 0 8px rgba(0,0,0,.85);
    }
    50% {
        box-shadow: 0 0 22px rgba(255,211,90,.85), inset 0 0 8px rgba(0,0,0,.85);
    }
}

.mka-die.is-kniffel-glow {
    border-color: #ffe27a !important;
    animation: mkaKniffelGlow 1.15s ease-in-out infinite;
}

@keyframes mkaKniffelGlow {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 18px rgba(255,216,107,.55), inset 0 0 10px rgba(0,0,0,.85);
    }
    50% {
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 0 34px rgba(255,216,107,.95), 0 0 18px rgba(124,92,255,.45), inset 0 0 10px rgba(0,0,0,.85);
    }
}

.mka-score-row.joker {
    animation: mkaJokerPulse 1.4s ease-in-out infinite;
}

@keyframes mkaJokerPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255,216,107,.2);
    }
    50% {
        box-shadow: 0 0 24px rgba(255,216,107,.55);
    }
}

.mka-points-popup {
    position: fixed;
    z-index: 99999;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd86b, #ff9f43);
    color: #1b1202;
    font-weight: 800;
    font-size: 22px;
    box-shadow: 0 0 35px rgba(255,216,107,.75);
    pointer-events: none;
    animation: mkaPointsFloat 1.15s ease forwards;
}

@keyframes mkaPointsFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -35%) scale(.75);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -78%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -105%) scale(.92);
    }
}

.mka-kniffel-burst {
    position: fixed;
    z-index: 99998;
    left: 50%;
    top: 38%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255,216,107,.75) 0%, rgba(255,216,107,.35) 24%, transparent 58%),
        conic-gradient(from 0deg, transparent, rgba(255,216,107,.9), transparent, rgba(124,92,255,.8), transparent);
    animation: mkaBurst .85s ease-out forwards;
    filter: blur(.2px);
}

@keyframes mkaBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.2) rotate(0deg);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45) rotate(160deg);
    }
}

.mka-message.mka-flash {
    animation: mkaMessageFlash .75s ease both;
}

@keyframes mkaMessageFlash {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.7); }
    100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mka-card,
    .mka-mode-card,
    .mka-hero,
    .mka-die,
    .mka-score-row.joker,
    .mka-die.is-held,
    .mka-die.is-kniffel-glow {
        animation: none !important;
        transition: none !important;
    }
}


/* Animation Soft-Fix: kein Zucken beim normalen Anklicken */
.mka-card,
.mka-mode-card,
.mka-hero {
    animation: none !important;
}

.mka-die {
    transition: border-color .12s ease, box-shadow .12s ease !important;
}

.mka-die:hover {
    transform: none !important;
}

.mka-die.is-held {
    animation: none !important;
    box-shadow: 0 0 14px rgba(255,211,90,.65), inset 0 0 8px rgba(0,0,0,.85) !important;
}

.mka-die.is-kniffel-glow {
    animation: mkaKniffelGlowSoft 1.6s ease-in-out infinite !important;
}

@keyframes mkaKniffelGlowSoft {
    0%, 100% {
        box-shadow: 0 0 16px rgba(255,216,107,.45), inset 0 0 10px rgba(0,0,0,.85);
    }
    50% {
        box-shadow: 0 0 26px rgba(255,216,107,.75), inset 0 0 10px rgba(0,0,0,.85);
    }
}

.mka-score-row.joker {
    animation: none !important;
    box-shadow: 0 0 14px rgba(255,216,107,.28) !important;
}

.mka-message.mka-flash {
    animation: none !important;
}

/* Ruhigere Würfelanimation: nur beim Würfeln */
.mka-die.mka-rolling {
    animation: mkaDiceRollSoft .36s ease both !important;
}

@keyframes mkaDiceRollSoft {
    0% { transform: rotate(0deg) scale(1); }
    35% { transform: rotate(-5deg) scale(1.025); }
    70% { transform: rotate(5deg) scale(1.025); }
    100% { transform: rotate(0deg) scale(1); }
}


/* =========================================================
   Mystic Teleport Dice Animation
========================================================= */

.mka-die {
    overflow: hidden;
    position: relative;
}

.mka-die::before {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(circle, rgba(160,120,255,.45) 0%, rgba(160,120,255,.18) 30%, transparent 68%),
        radial-gradient(circle at 70% 30%, rgba(255,216,107,.18), transparent 45%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.mka-die::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            transparent 0%,
            rgba(255,255,255,.08) 25%,
            transparent 50%,
            rgba(160,120,255,.12) 75%,
            transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.mka-die.mka-rolling {
    animation: mkaTeleportDice .62s ease both !important;
}

.mka-die.mka-rolling::before {
    animation: mkaTeleportAura .62s ease both;
}

.mka-die.mka-rolling::after {
    animation: mkaTeleportFlash .62s ease both;
}

.die-face {
    position: relative;
    z-index: 3;
}

@keyframes mkaTeleportDice {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }

    18% {
        opacity: .45;
        transform: scale(.78);
        filter: blur(3px) brightness(1.8);
    }

    40% {
        opacity: 0;
        transform: scale(.45);
        filter: blur(8px) brightness(2.3);
    }

    58% {
        opacity: 0;
        transform: scale(1.35);
        filter: blur(10px) brightness(2.8);
    }

    82% {
        opacity: 1;
        transform: scale(1.06);
        filter: blur(1px) brightness(1.35);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
}

@keyframes mkaTeleportAura {
    0% {
        opacity: 0;
        transform: scale(.5);
    }

    30% {
        opacity: .95;
        transform: scale(1.35);
    }

    60% {
        opacity: .65;
        transform: scale(1.8);
    }

    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}

@keyframes mkaTeleportFlash {
    0% {
        opacity: 0;
    }

    22% {
        opacity: .95;
    }

    50% {
        opacity: .25;
    }

    100% {
        opacity: 0;
    }
}

/* magischer Schattennebel */
.mka-die.mka-rolling .die-face {
    animation: mkaShadowMist .62s ease both;
}

@keyframes mkaShadowMist {
    0% {
        box-shadow:
            inset 0 0 10px rgba(0,0,0,.85);
    }

    25% {
        box-shadow:
            inset 0 0 24px rgba(124,92,255,.95),
            0 0 22px rgba(124,92,255,.65);
    }

    55% {
        box-shadow:
            inset 0 0 34px rgba(255,216,107,.85),
            0 0 32px rgba(160,120,255,.85);
    }

    100% {
        box-shadow:
            inset 0 0 10px rgba(0,0,0,.85);
    }
}

/* Runen-Glow */
.mka-die.is-kniffel-glow {
    animation: mkaRuneGlow 1.8s ease-in-out infinite !important;
}

@keyframes mkaRuneGlow {
    0%,100% {
        box-shadow:
            0 0 18px rgba(160,120,255,.45),
            inset 0 0 10px rgba(0,0,0,.85);
    }

    50% {
        box-shadow:
            0 0 34px rgba(255,216,107,.55),
            0 0 18px rgba(160,120,255,.55),
            inset 0 0 10px rgba(0,0,0,.85);
    }
}


/* =========================================================
   Endscreen Overlay
========================================================= */

.mka-finish-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center,
            rgba(124,92,255,.22),
            rgba(8,6,15,.92));
    backdrop-filter: blur(5px);
    animation: mkaFinishFade 5s ease forwards;
}

.mka-finish-box {
    position: relative;
    width: min(92vw, 520px);
    padding: 42px 26px;
    text-align: center;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,216,107,.35);
    background:
        linear-gradient(135deg,
            rgba(31,20,55,.96),
            rgba(8,6,15,.98));
    box-shadow:
        0 0 45px rgba(124,92,255,.45),
        0 0 22px rgba(255,216,107,.22);
}

.mka-finish-box h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    color: #ffe08a;
    font-size: 34px;
    text-shadow: 0 0 18px rgba(255,216,107,.45);
}

.mka-finish-score {
    position: relative;
    z-index: 2;
    font-size: 92px;
    line-height: 1;
    font-weight: 900;
    color: #fff1b8;
    text-shadow:
        0 0 24px rgba(255,216,107,.75),
        0 0 42px rgba(124,92,255,.55);
    margin: 12px 0 16px;
    animation: mkaFinishScorePulse 1.8s ease-in-out infinite;
}

.mka-finish-box p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #d9cbff;
    font-size: 18px;
}

.mka-finish-sub {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    color: #ffe08a;
    opacity: .88;
    font-size: 13px;
    letter-spacing: .5px;
}

.mka-finish-rune {
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(circle,
            rgba(255,216,107,.18),
            transparent 45%),
        conic-gradient(
            from 0deg,
            transparent,
            rgba(124,92,255,.75),
            transparent,
            rgba(255,216,107,.55),
            transparent);
    animation: mkaRuneRotate 5s linear infinite;
    opacity: .9;
}

@keyframes mkaRuneRotate {
    from {
        transform: rotate(0deg) scale(.95);
    }
    to {
        transform: rotate(360deg) scale(1.05);
    }
}

@keyframes mkaFinishScorePulse {
    0%,100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

@keyframes mkaFinishFade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    88% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}