/* ================================================================
   MYSTERADO – Landing & Lore Stylesheet (landing.css)
   Eigenständiges Stylesheet für index.php und lore.php
   ================================================================ */

:root{
    --ms-bg:#050508;
    --ms-bg-alt:#0a0a14;
    --ms-bg-card:#0f0f1a;
    --ms-text:#e8e8f0;
    --ms-text-soft:#b8b8c8;
    --ms-text-muted:#7a7a8a;
    --ms-gold:#d4ad45;
    --ms-gold-light:#f0d27b;
    --ms-gold-dark:#8a6a1e;
    --ms-border:rgba(212,173,69,0.18);
    --ms-border-gold:rgba(212,173,69,0.35);
    --ms-shadow:0 4px 24px rgba(0,0,0,0.6);
    --ms-shadow-lg:0 12px 48px rgba(0,0,0,0.7);

    --ms-card-green:#2d8a4e;
    --ms-card-yellow:#d4b830;
    --ms-card-red:#cc3333;
    --ms-card-violet:#8844bb;
    --ms-card-blue:#3377cc;

    --ms-font-heading:'Cinzel', serif;
    --ms-font-body:'Cormorant Garamond', Georgia, serif;
}

/* ════ RESET ════ */
*,*::before,*::after{box-sizing:border-box}
/* Mobile: blauen iOS/Android-Tap-Highlight unterdrücken (Hover-Effekte
   sind bereits über CSS implementiert; das System-Highlight stört). */
*{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    margin:0;padding:0;
    font-family:var(--ms-font-body);
    font-size:17px;line-height:1.6;
    color:var(--ms-text);
    background:var(--ms-bg);
    overflow-x:hidden;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ms-gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--ms-gold-light)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ════ HINTERGRUND (Partikel + Vignette) ════ */
#particle-canvas{
    position:fixed;inset:0;width:100%;height:100%;
    z-index:0;pointer-events:none;
}
.ms-bg-layer{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(circle at 20% 10%, rgba(212,173,69,0.04), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(120,60,180,0.04), transparent 40%);
}
.ms-page{position:relative;z-index:1}

/* ════ NAVIGATION ════ */
.ms-nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:0.85rem 0;
    background:rgba(5,5,10,0);
    backdrop-filter:blur(0);
    -webkit-backdrop-filter:blur(0);
    border-bottom:1px solid transparent;
    transition:background .4s, border-color .4s, padding .3s, backdrop-filter .4s;
}
.ms-nav.scrolled{
    background:rgba(5,5,10,0.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--ms-border);
    padding:0.55rem 0;
}
.ms-nav-inner{
    max-width:1280px;margin:0 auto;padding:0 1.5rem;
    display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.ms-nav-logo{
    display:flex;align-items:center;gap:0.55rem;
    color:var(--ms-gold);
    font-family:var(--ms-font-heading);
    font-weight:700;font-size:1.25rem;
    letter-spacing:0.15em;text-transform:uppercase;
}
.ms-nav-logo-icon{font-size:1.35rem;line-height:1}
.ms-nav-links{display:flex;gap:2rem;align-items:center}
/* Mobile-Only Link-Klasse: erscheint nur im aufgeklappten Mobile-Menü.
   Auf Desktop unsichtbar, da der Play-Button bereits in den Nav-Actions liegt. */
.ms-nav-links .ms-nav-mobile-only{display:none}
.ms-nav-links a{
    color:var(--ms-text-soft);
    font-family:var(--ms-font-heading);
    font-size:0.82rem;font-weight:500;
    letter-spacing:0.13em;text-transform:uppercase;
    transition:color .2s;
    position:relative;padding:0.3rem 0;
}
.ms-nav-links a::after{
    content:'';position:absolute;left:0;right:0;bottom:-2px;
    height:1px;background:var(--ms-gold);
    transform:scaleX(0);transform-origin:center;
    transition:transform .3s;
}
.ms-nav-links a:hover{color:var(--ms-gold-light)}
.ms-nav-links a:hover::after,
.ms-nav-links a.active::after{transform:scaleX(1)}
.ms-nav-links a.active{color:var(--ms-gold)}

.ms-nav-actions{display:flex;align-items:center;gap:0.85rem}

/* Sprach-Switcher */
.ms-lang{display:flex;gap:0.35rem;align-items:center}
.ms-lang-flag{
    width:26px;height:18px;border-radius:2px;overflow:hidden;
    opacity:0.45;transition:opacity .2s, transform .2s;
    padding:0;line-height:0;border:1px solid transparent;
}
.ms-lang-flag svg{width:100%;height:100%;display:block}
.ms-lang-flag:hover{opacity:0.85;transform:translateY(-1px)}
.ms-lang-flag.active{opacity:1;border-color:var(--ms-gold)}

/* Burger */
.ms-nav-burger{
    display:none;width:34px;height:34px;padding:0;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.ms-nav-burger span{
    width:22px;height:1.5px;background:var(--ms-gold);
    transition:transform .3s, opacity .3s;
}
.ms-nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ms-nav-burger.open span:nth-child(2){opacity:0}
.ms-nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ════ BUTTONS ════ */
.ms-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;
    padding:0.8rem 1.6rem;
    font-family:var(--ms-font-heading);
    font-size:0.82rem;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;
    border:1px solid transparent;border-radius:3px;
    cursor:pointer;transition:all .3s cubic-bezier(.2,.9,.3,1);
    text-decoration:none;white-space:nowrap;
    position:relative;overflow:hidden;
}
.ms-btn-sm{padding:0.55rem 1.1rem;font-size:0.72rem;letter-spacing:0.15em}
.ms-btn-lg{padding:1rem 2.1rem;font-size:0.92rem}

.ms-btn-primary{
    background:linear-gradient(135deg, var(--ms-gold-dark), var(--ms-gold));
    color:#18120a;
    border-color:var(--ms-gold);
    box-shadow:0 4px 16px rgba(212,173,69,0.22);
}
.ms-btn-primary::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg, var(--ms-gold), var(--ms-gold-light));
    opacity:0;transition:opacity .3s;z-index:0;
}
.ms-btn-primary:hover{
    color:#0a0603;
    box-shadow:0 6px 22px rgba(212,173,69,0.4);
    transform:translateY(-1px);
}
.ms-btn-primary:hover::before{opacity:1}
.ms-btn-primary > *{position:relative;z-index:1}

.ms-btn-secondary{
    background:transparent;color:var(--ms-text);
    border-color:var(--ms-border-gold);
}
.ms-btn-secondary:hover{
    background:rgba(212,173,69,0.06);
    border-color:var(--ms-gold);
    color:var(--ms-gold-light);
}

.ms-btn-locked{
    background:rgba(212,173,69,0.06);
    color:var(--ms-text-muted);
    border-color:rgba(212,173,69,0.2);
    cursor:not-allowed;
    position:relative;
}
.ms-btn-locked::after{
    content:'🔒';position:absolute;
    right:0.8rem;top:50%;transform:translateY(-50%);
    font-size:0.7rem;opacity:0.7;
}
.ms-btn-locked[type="button"]{padding-right:2.4rem}

.ms-btn-arrow{
    font-size:1.1em;transition:transform .3s;
    display:inline-block;
}
.ms-btn:hover .ms-btn-arrow{transform:translateX(4px)}

/* ════ HERO ════ */
.ms-hero{
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:7rem 1.5rem 3rem;
    text-align:center;
}
.ms-hero-inner{
    max-width:1100px;width:100%;
    position:relative;z-index:2;
}
.ms-hero-eyebrow{
    display:inline-block;
    font-family:var(--ms-font-heading);
    font-size:0.78rem;font-weight:500;
    letter-spacing:0.35em;text-transform:uppercase;
    color:var(--ms-gold);
    padding:0.5rem 1.2rem;
    border-top:1px solid var(--ms-border-gold);
    border-bottom:1px solid var(--ms-border-gold);
    margin-bottom:2rem;
}
.ms-hero-title{
    font-family:var(--ms-font-heading);
    font-weight:900;
    font-size:clamp(3.5rem, 11vw, 8.5rem);
    line-height:0.95;
    margin:0 0 1.5rem;
    letter-spacing:0.02em;
    background:linear-gradient(180deg, var(--ms-gold-light) 0%, var(--ms-gold) 55%, var(--ms-gold-dark) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;color:transparent;
    text-shadow:0 0 60px rgba(212,173,69,0.2);
    filter:drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}
.ms-hero-tagline{
    font-family:var(--ms-font-body);
    font-style:italic;
    font-size:clamp(1.1rem, 2.2vw, 1.5rem);
    line-height:1.55;
    color:var(--ms-text-soft);
    max-width:640px;margin:0 auto 2.4rem;
}
.ms-hero-ctas{
    display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
    margin-bottom:3.5rem;
}

/* ── HERO CARDS – fließende, nicht-stakkatoartige Animation ── */
.ms-hero-cards{
    display:flex;justify-content:center;align-items:center;
    gap:clamp(-20px, -2vw, -8px);
    margin-top:2rem;
    perspective:1400px;
    min-height:280px;
    padding-top:2rem;
}
.ms-hero-card{
    position:relative;
    aspect-ratio:6/9;
    border:1px solid var(--ms-border-gold);
    border-radius:6px;
    overflow:hidden;
    background:var(--ms-bg-card);
    box-shadow:
        0 14px 40px rgba(0,0,0,0.7),
        inset 0 0 22px rgba(212,173,69,0.08);

    /* Separate CSS-Eigenschaften: rotate + translate sind animationssicher,
       weil die Keyframes ausschließlich `translate` animieren und
       `rotate` dadurch stabil bleibt. */
    rotate:var(--ms-rot, 0deg);
    translate:0 var(--ms-by, 0px);
    scale:1;

    /* 3D-Tiefenstaffelung pro Karte (äußere hinten, Mitte vorne) */
    width:var(--ms-w, clamp(98px, 12vw, 146px));
    z-index:var(--ms-z, 1);
    opacity:var(--ms-op, 1);
    filter:brightness(var(--ms-bright, 1));

    animation:msCardFloat var(--ms-dur, 8s) ease-in-out infinite alternate;
    animation-delay:var(--ms-adelay, 0s);
    transition:box-shadow .35s,
               border-color .35s,
               filter .35s;
    will-change:translate;
    cursor:default;
}
/* 3D-Staffelung: die beiden äußeren Karten sind hinten, etwas kleiner und
   leicht gedämpft; die Karten 2 und 4 davor, größer; die Mitte (Mage)
   am vordersten und deutlich größer. */
.ms-hero-card:nth-child(1){
    --ms-rot:-12deg; --ms-by:28px;
    --ms-w:clamp(78px, 9vw, 112px);
    --ms-z:1; --ms-op:0.82; --ms-bright:0.78;
    --ms-dur:7.4s; --ms-adelay:-2.1s;
    margin-right:-14px;
}
.ms-hero-card:nth-child(2){
    --ms-rot:-6deg; --ms-by:8px;
    --ms-w:clamp(104px, 12.5vw, 152px);
    --ms-z:2; --ms-op:0.95; --ms-bright:0.92;
    --ms-dur:8.8s; --ms-adelay:-0.8s;
    margin-right:-18px;
}
.ms-hero-card:nth-child(3){
    --ms-rot:0deg; --ms-by:-22px;
    --ms-w:clamp(128px, 15.5vw, 186px);
    --ms-z:5; --ms-op:1; --ms-bright:1.05;
    --ms-dur:6.2s; --ms-adelay:-4.3s;
    border-color:var(--ms-gold);
    box-shadow:
        0 26px 60px rgba(0,0,0,0.8),
        0 0 38px rgba(212,173,69,0.32),
        inset 0 0 26px rgba(212,173,69,0.14);
}
.ms-hero-card:nth-child(4){
    --ms-rot:6deg; --ms-by:8px;
    --ms-w:clamp(104px, 12.5vw, 152px);
    --ms-z:2; --ms-op:0.95; --ms-bright:0.92;
    --ms-dur:9.5s; --ms-adelay:-1.6s;
    margin-left:-18px;
}
.ms-hero-card:nth-child(5){
    --ms-rot:12deg; --ms-by:28px;
    --ms-w:clamp(78px, 9vw, 112px);
    --ms-z:1; --ms-op:0.82; --ms-bright:0.78;
    --ms-dur:7.8s; --ms-adelay:-3.5s;
    margin-left:-14px;
}

@keyframes msCardFloat{
    from { translate:0 var(--ms-by, 0px); }
    to   { translate:0 calc(var(--ms-by, 0px) - 10px); }
}

/* Hover: nur ein sanftes Glühen am Rahmen – die Karte bleibt an ihrer
   gestaffelten Position, hebt sich nicht heraus und wird auch nicht größer. */
.ms-hero-card:hover{
    border-color:var(--ms-gold);
    box-shadow:
        0 18px 44px rgba(0,0,0,0.72),
        0 0 24px rgba(212,173,69,0.24);
}
.ms-hero-card img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;
}

.ms-hero-scroll{
    position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:0.6rem;
    color:var(--ms-text-muted);
    font-family:var(--ms-font-heading);
    font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;
}
.ms-hero-scroll-line{
    width:1px;height:32px;
    background:linear-gradient(180deg, var(--ms-gold), transparent);
    animation:msScrollLine 2.2s ease-in-out infinite;
}
@keyframes msScrollLine{
    0%,100%{opacity:0.3;transform:scaleY(0.7) translateY(0)}
    50%{opacity:1;transform:scaleY(1) translateY(4px)}
}

/* ════ GENERIC SECTIONS ════ */
.ms-section{
    padding:6rem 1.5rem;
    position:relative;
}
.ms-section-alt{
    background:linear-gradient(180deg, rgba(15,15,26,0.5) 0%, rgba(10,10,16,0.7) 100%);
}
.ms-container{
    max-width:1240px;margin:0 auto;
}
.ms-section-header{
    text-align:center;
    max-width:780px;margin:0 auto 4rem;
}
.ms-section-eyebrow{
    display:inline-block;
    font-family:var(--ms-font-heading);
    font-size:0.76rem;font-weight:500;
    letter-spacing:0.3em;text-transform:uppercase;
    color:var(--ms-gold);margin-bottom:1rem;
}
.ms-section-title{
    font-family:var(--ms-font-heading);
    font-size:clamp(1.9rem, 4.5vw, 3rem);
    font-weight:700;line-height:1.15;
    color:var(--ms-text);
    margin:0 0 1.2rem;
}
.ms-section-title em{
    color:var(--ms-gold);
    font-style:italic;
    font-family:var(--ms-font-body);
    font-weight:500;
}
.ms-section-subtitle{
    font-family:var(--ms-font-body);
    font-style:italic;
    font-size:clamp(1.05rem, 1.7vw, 1.18rem);
    color:var(--ms-text-soft);
    max-width:660px;margin:0 auto;line-height:1.65;
}

/* Im Invite-Block etwas größer, damit der CTA-Charakter unterstrichen wird */
#invite .ms-section-subtitle{
    font-size:clamp(1.2rem, 2vw, 1.45rem);
    color:var(--ms-text);
}
.ms-section-subtitle-lg{
    font-size:clamp(1.25rem, 2.4vw, 1.65rem);
    color:var(--ms-text);
    max-width:720px;
    line-height:1.5;
}

/* ════ REVEAL-ANIMATIONEN ════ */
.ms-reveal{
    opacity:0;transform:translateY(28px);
    transition:opacity .9s cubic-bezier(.2,.9,.3,1), transform .9s cubic-bezier(.2,.9,.3,1);
}
.ms-reveal.visible{opacity:1;transform:translateY(0)}
.ms-reveal-delay-1{transition-delay:0.12s}
.ms-reveal-delay-2{transition-delay:0.24s}
.ms-reveal-delay-3{transition-delay:0.36s}

/* ════════════════════════════════════════════════════════════════
   FEATURES – Karten-Bild als Banner, keine Icons mehr
   ════════════════════════════════════════════════════════════════ */
.ms-features{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1.5rem;
}
.ms-feature{
    position:relative;
    display:flex;flex-direction:column;
    background:var(--ms-bg-card);
    border:1px solid var(--ms-border);
    border-radius:4px;
    overflow:hidden;
    transition:transform .4s cubic-bezier(.2,.9,.3,1), border-color .4s, box-shadow .4s;
}
.ms-feature:hover{
    transform:translateY(-4px);
    border-color:var(--ms-border-gold);
    box-shadow:0 18px 48px rgba(0,0,0,0.55), 0 0 22px rgba(212,173,69,0.08);
}
.ms-feature-visual{
    position:relative;
    aspect-ratio:4/3;
    background-size:cover;
    background-position:center 20%;
    background-color:#0a0a14;
}
.ms-feature-visual::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,
        rgba(10,10,20,0.1) 0%,
        rgba(10,10,20,0.5) 55%,
        rgba(15,15,26,1) 100%);
}
.ms-feature-visual::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 30%, rgba(212,173,69,0.14), transparent 60%);
    mix-blend-mode:overlay;
    opacity:0;transition:opacity .5s;
}
.ms-feature:hover .ms-feature-visual::after{opacity:1}

.ms-feature-body{
    position:relative;
    padding:1.6rem 1.6rem 1.8rem;
    flex:1;
    display:flex;flex-direction:column;
}
.ms-feature-num{
    font-family:var(--ms-font-heading);
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.4em;
    color:var(--ms-gold);
    margin-bottom:0.5rem;
    opacity:0.85;
}
.ms-feature-title{
    font-family:var(--ms-font-heading);
    font-size:1.22rem;font-weight:600;
    color:var(--ms-text);
    margin:0 0 0.8rem;line-height:1.3;
}
.ms-feature-text{
    color:var(--ms-text-soft);
    font-size:1rem;line-height:1.6;
    margin:0;
}

/* ════════════════════════════════════════════════════════════════
   INVITE
   ════════════════════════════════════════════════════════════════ */
.ms-invite-icon{
    text-align:center;
    font-size:clamp(3.5rem, 7vw, 5.8rem);
    line-height:1;
    color:var(--ms-gold);
    margin:0 auto 1.2rem;
    text-shadow:
        0 0 32px rgba(212,173,69,0.55),
        0 0 12px rgba(212,173,69,0.4);
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.7));
    animation:msInviteGlow 3.2s ease-in-out infinite;
}
@keyframes msInviteGlow{
    0%,100%{
        text-shadow:0 0 22px rgba(212,173,69,0.4), 0 0 10px rgba(212,173,69,0.3);
        transform:scale(1);
    }
    50%{
        text-shadow:0 0 40px rgba(212,173,69,0.7), 0 0 16px rgba(212,173,69,0.55);
        transform:scale(1.04);
    }
}

.ms-invite-box{
    max-width:640px;margin:0 auto;
    background:var(--ms-bg-card);
    border:1px solid var(--ms-border-gold);
    border-radius:4px;
    padding:2rem;
    text-align:center;
    position:relative;
}
.ms-invite-box::before{
    content:'';position:absolute;inset:0;border-radius:4px;
    background:radial-gradient(circle at 50% 0%, rgba(212,173,69,0.08), transparent 55%);
    pointer-events:none;
}
.ms-invite-link-wrap{
    display:flex;gap:0.6rem;align-items:stretch;
    margin-bottom:1rem;position:relative;
}
.ms-invite-input{
    flex:1;
    padding:0.75rem 1rem;
    background:rgba(5,5,10,0.8);
    border:1px solid var(--ms-border);
    color:var(--ms-text-soft);
    font-family:'Courier New', monospace;
    font-size:0.9rem;
    border-radius:3px;
    min-width:0;
}
.ms-invite-note{
    color:var(--ms-text-muted);
    font-size:0.88rem;font-style:italic;
    margin:0;
}

/* ════════════════════════════════════════════════════════════════
   BLOCK-ROW (Arena, Masters, Custom Cards)
   ════════════════════════════════════════════════════════════════ */
.ms-block-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;align-items:center;
}
.ms-block-row.reverse .ms-block-body{grid-column:2}
.ms-block-row.reverse .ms-block-visual{grid-column:1;grid-row:1}

.ms-block-body{display:flex;flex-direction:column;gap:1.2rem}
.ms-block-tag{
    display:inline-flex;align-items:center;gap:0.5rem;
    align-self:flex-start;
    font-family:var(--ms-font-heading);
    font-size:0.74rem;font-weight:500;
    letter-spacing:0.25em;text-transform:uppercase;
    color:var(--ms-gold);
    padding:0.5rem 0.95rem;
    background:rgba(212,173,69,0.06);
    border:1px solid var(--ms-border-gold);
    border-radius:2px;
}
.ms-block-tag.coming::before{
    content:'';width:7px;height:7px;border-radius:50%;
    background:var(--ms-gold);
    box-shadow:0 0 8px var(--ms-gold);
    animation:msPulseDot 1.8s ease-in-out infinite;
}
@keyframes msPulseDot{0%,100%{opacity:0.4}50%{opacity:1}}

.ms-block-title{
    font-family:var(--ms-font-heading);
    font-size:clamp(1.8rem, 3.8vw, 2.6rem);
    font-weight:700;line-height:1.15;
    color:var(--ms-text);margin:0;
}
.ms-block-title em{
    color:var(--ms-gold);font-style:italic;
    font-family:var(--ms-font-body);font-weight:500;
}
.ms-block-text{
    color:var(--ms-text-soft);
    font-size:1.08rem;line-height:1.65;
    margin:0;
}
.ms-block-list{
    list-style:none;padding:0;margin:0.5rem 0 0;
    display:flex;flex-direction:column;gap:0.7rem;
}
.ms-block-list li{
    position:relative;
    padding-left:1.6rem;
    color:var(--ms-text-soft);
    font-size:1.02rem;line-height:1.5;
}
.ms-block-list li::before{
    content:'\2726';position:absolute;left:0;top:0.05rem;
    color:var(--ms-gold);font-size:0.9rem;
}
.ms-block-actions{margin-top:0.5rem}

.ms-block-visual{
    position:relative;
    aspect-ratio:1/1;
    max-width:480px;width:100%;justify-self:center;
    display:flex;align-items:center;justify-content:center;
}

/* ── DUEL (Arena) – zwei Karten, mittig Klingen ── */
.ms-block-duel{
    gap:0;
}
.ms-duel-card{
    position:relative;
    width:38%;aspect-ratio:6/9;
    border:2px solid var(--ms-border-gold);
    border-radius:6px;
    background-size:cover;background-position:center;
    background-color:var(--ms-bg-card);
    box-shadow:0 20px 48px rgba(0,0,0,0.7), inset 0 0 30px rgba(0,0,0,0.4);
    transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s;
}
.ms-duel-card-left{
    transform:rotate(-9deg) translateX(8%);
    border-color:rgba(204,51,51,0.55);
    box-shadow:0 20px 48px rgba(0,0,0,0.7), 0 0 30px rgba(204,51,51,0.25), inset 0 0 30px rgba(0,0,0,0.4);
}
.ms-duel-card-right{
    transform:rotate(9deg) translateX(-8%);
    border-color:rgba(51,119,204,0.55);
    box-shadow:0 20px 48px rgba(0,0,0,0.7), 0 0 30px rgba(51,119,204,0.25), inset 0 0 30px rgba(0,0,0,0.4);
}
.ms-block-duel:hover .ms-duel-card-left  { transform:rotate(-11deg) translateX(4%)  translateY(-4px) }
.ms-block-duel:hover .ms-duel-card-right { transform:rotate( 11deg) translateX(-4%) translateY(-4px) }

/* ── FAN (Masters) – 3 überlappende Karten, zentral prominent ── */
.ms-block-fan{
    perspective:1000px;
}
.ms-fan-card{
    position:absolute;
    width:40%;aspect-ratio:6/9;
    border:2px solid var(--ms-border-gold);
    border-radius:6px;
    background-size:cover;background-position:center;
    background-color:var(--ms-bg-card);
    box-shadow:0 16px 40px rgba(0,0,0,0.7), inset 0 0 24px rgba(0,0,0,0.4);
    transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.ms-fan-card-back-left{
    left:12%;top:18%;
    transform:rotate(-14deg) translateY(8px);
    filter:brightness(0.55);
    z-index:1;
}
.ms-fan-card-back-right{
    right:12%;top:18%;
    transform:rotate(14deg) translateY(8px);
    filter:brightness(0.55);
    z-index:1;
}
.ms-fan-card-front{
    left:50%;top:10%;
    transform:translateX(-50%);
    border-color:var(--ms-gold);
    box-shadow:0 22px 54px rgba(0,0,0,0.8), 0 0 40px rgba(212,173,69,0.28), inset 0 0 28px rgba(0,0,0,0.35);
    z-index:2;
    width:44%;
}
.ms-block-fan:hover .ms-fan-card-back-left  { transform:rotate(-18deg) translateY(0) translateX(-12px); filter:brightness(0.7) }
.ms-block-fan:hover .ms-fan-card-back-right { transform:rotate( 18deg) translateY(0) translateX( 12px); filter:brightness(0.7) }
.ms-block-fan:hover .ms-fan-card-front      { transform:translateX(-50%) translateY(-10px) }

.ms-fan-glow{
    position:absolute;inset:-10% -10% 10% -10%;
    background:radial-gradient(circle at 50% 40%, rgba(212,173,69,0.18), transparent 60%);
    pointer-events:none;z-index:0;
    animation:msFanPulse 4s ease-in-out infinite;
}
@keyframes msFanPulse{
    0%,100%{opacity:0.55}
    50%    {opacity:1}
}

/* ── STACK (Custom Cards) – gestapelte Karten ── */
.ms-block-stack{
    perspective:800px;
}
.ms-stack-card{
    position:absolute;
    width:52%;aspect-ratio:6/9;
    border:2px solid var(--ms-border-gold);
    border-radius:6px;
    background-size:cover;background-position:center;
    background-color:var(--ms-bg-card);
    box-shadow:0 18px 44px rgba(0,0,0,0.7), inset 0 0 24px rgba(0,0,0,0.35);
    left:50%;top:50%;
    transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.ms-stack-card-3{
    transform:translate(-68%,-44%) rotate(-10deg);
    filter:brightness(0.6);z-index:1;
}
.ms-stack-card-2{
    transform:translate(-50%,-50%) rotate(-1deg);
    filter:brightness(0.8);z-index:2;
}
.ms-stack-card-1{
    transform:translate(-32%,-56%) rotate(8deg);
    z-index:3;
    border-color:var(--ms-gold);
    box-shadow:0 22px 54px rgba(0,0,0,0.8), 0 0 34px rgba(212,173,69,0.3), inset 0 0 28px rgba(0,0,0,0.35);
}
.ms-block-stack:hover .ms-stack-card-3{transform:translate(-78%,-40%) rotate(-14deg)}
.ms-block-stack:hover .ms-stack-card-2{transform:translate(-50%,-54%) rotate(-1deg)}
.ms-block-stack:hover .ms-stack-card-1{transform:translate(-22%,-60%) rotate(12deg)}

.ms-stack-sparkle{
    position:absolute;
    width:14px;height:14px;
    top:18%;right:22%;z-index:4;
    background:radial-gradient(circle, var(--ms-gold-light), transparent 65%);
    border-radius:50%;
    filter:blur(1px);
    animation:msSparkle 2.8s ease-in-out infinite;
}
@keyframes msSparkle{
    0%,100%{opacity:0;transform:scale(0.5)}
    50%    {opacity:1;transform:scale(1.2)}
}

/* ── MARKET: dekorative € Münze hinter dem Stack + Preisschilder ── */
.ms-market-coin{
    position:absolute;
    top:4%;left:50%;transform:translateX(-50%);
    font-family:var(--ms-font-heading);
    font-size:clamp(3rem,6vw,5rem);font-weight:900;
    color:transparent;
    background:radial-gradient(circle, var(--ms-gold-light), var(--ms-gold-dark));
    -webkit-background-clip:text;
    background-clip:text;
    opacity:0.12;
    z-index:0;
    pointer-events:none;
    animation:msMarketCoinPulse 3.8s ease-in-out infinite;
}
@keyframes msMarketCoinPulse{
    0%,100%{opacity:0.08;transform:translateX(-50%) scale(1)}
    50%    {opacity:0.22;transform:translateX(-50%) scale(1.08)}
}

/* Preisschild – kleines goldenes Etikett oben rechts auf jeder Karte */
.ms-market-price-tag{
    position:absolute;top:10px;right:-10px;
    display:inline-flex;align-items:center;
    padding:0.35rem 0.7rem;
    background:linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dark));
    color:#0a0603;
    font-family:var(--ms-font-heading);
    font-size:0.78rem;font-weight:700;
    letter-spacing:0.04em;
    border-radius:3px;
    box-shadow:0 4px 12px rgba(0,0,0,0.6), 0 0 14px rgba(212,173,69,0.3);
    z-index:4;
    white-space:nowrap;
    transform:rotate(6deg);
}
.ms-market-price-tag::after{
    content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
    width:0;height:0;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-right:6px solid var(--ms-gold-dark);
}

/* ════════════════════════════════════════════════════════════════
   CUSTOM CARDS – Solo-Karte mit 3D-Tilt
   ════════════════════════════════════════════════════════════════ */
.ms-block-custom-solo{
    perspective:1200px;
    aspect-ratio:auto;
    display:flex;align-items:center;justify-content:center;
    padding:1.5rem 0;
}
.ms-solo-card-wrap{
    position:relative;
    width:clamp(300px, 38vw, 440px);
    transform-style:preserve-3d;
    transition:transform 0.4s cubic-bezier(.2,.9,.3,1);
    cursor:pointer;
    will-change:transform;
}
.ms-solo-card-wrap::before{
    /* sanfter Gold-Schein hinter der Karte */
    content:'';position:absolute;inset:-20% -20% -20% -20%;
    background:radial-gradient(ellipse at center, rgba(212,173,69,0.18), transparent 60%);
    z-index:-1;
    pointer-events:none;
    opacity:0.9;
    animation:msSoloGlow 4s ease-in-out infinite;
}
@keyframes msSoloGlow{
    0%,100%{opacity:0.6}
    50%    {opacity:1}
}

/* Subtitle (Zwischenzeile kleiner als Block-Title) */
.ms-block-subtitle{
    font-family:var(--ms-font-body);
    font-style:italic;
    font-size:clamp(1.05rem, 1.7vw, 1.25rem);
    line-height:1.4;
    color:var(--ms-gold);
    margin:-0.4rem 0 0.5rem;
    letter-spacing:0.01em;
}

/* ════════════════════════════════════════════════════════════════
   PACKS – echter Pack/Produkt-Look mit Artwork, Siegel und Thema-Glow
   ════════════════════════════════════════════════════════════════ */
.ms-packs{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    /* Größerer gap, damit die Stapel-Karten (::before/::after, ±9-12px versetzt)
       nicht in benachbarte Packs hineinragen */
    gap:2.6rem 2.4rem;
    /* Padding gibt der ersten/letzten Spalte Luft, damit die Stapel-Versätze
       nicht am Container-Rand abgeschnitten wirken */
    padding:0 .8rem;
}
.ms-pack{
    position:relative;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg, #0d0d18 0%, #090912 100%);
    border:1px solid var(--ms-border-gold);
    border-radius:6px;
    /* overflow visible, damit die ::before/::after Stapel-Karten sichtbar sind.
       Inhalte (.ms-pack-artwork) haben eigenes overflow:hidden. */
    transition:transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .45s, border-color .45s;
    /* Mehrlagiger Schatten für Tiefenwirkung wie bei einer echten Schachtel:
       1. Untere Innenkante (dunkle Trennlinie zur Bodenfläche)
       2. Bodenfläche der Schachtel (heller Goldschimmer)
       3. Drop-Shadow (Schachtel wirft Schatten auf Untergrund)
       4. Inset Highlight oben (Glanzkante der Schachtel-Oberkante) */
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.04) inset,
        0 4px 0 -1px rgba(212,173,69,0.18),
        0 6px 0 -2px rgba(8,7,4,1),
        0 18px 38px rgba(0,0,0,0.65);
}
/* Stapel-Karten unter dem Hauptpack — geben den Eindruck eines Kartenstapels
   und damit echter dreidimensionaler Tiefe. ::before = mittlere Lage,
   ::after = unterste Lage. Beide leicht gedreht und versetzt. */
.ms-pack::before,
.ms-pack::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, #0a0a14 0%, #06060d 100%);
    border:1px solid rgba(212,173,69,0.22);
    border-radius:6px;
    z-index:-1;
    transition:transform .45s cubic-bezier(.2,.9,.3,1), opacity .45s, border-color .45s;
    box-shadow:0 8px 18px rgba(0,0,0,0.55);
    pointer-events:none;
}
.ms-pack::before{
    transform:rotate(-2deg) translate(-7px,5px);
    opacity:0.85;
}
.ms-pack::after{
    transform:rotate(2.5deg) translate(9px,3px);
    opacity:0.7;
    z-index:-2;
}

/* Thema-spezifische Glow-Farben */
.ms-pack[data-theme="greek"]    { --ms-pack-glow:64,190,220   } /* marmor-blau/gold */
.ms-pack[data-theme="norse"]    { --ms-pack-glow:140,170,200  } /* silberblau */
.ms-pack[data-theme="indian"]   { --ms-pack-glow:230,130,70   } /* orange-rot */
.ms-pack[data-theme="egyptian"] { --ms-pack-glow:210,170,90   } /* bronze-sand */

.ms-pack:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--ms-pack-glow, 212 173 69), 0.6);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.06) inset,
        0 4px 0 -1px rgba(var(--ms-pack-glow, 212 173 69), 0.35),
        0 6px 0 -2px rgba(8,7,4,1),
        0 30px 56px rgba(0,0,0,0.78),
        0 0 32px rgba(var(--ms-pack-glow, 212 173 69), 0.25);
}
/* Beim Hover fächern die Stapel-Karten leicht weiter auf — verstärkt den 3D-Eindruck */
.ms-pack:hover::before{
    transform:rotate(-3.5deg) translate(-12px,8px);
    border-color:rgba(var(--ms-pack-glow, 212 173 69), 0.35);
}
.ms-pack:hover::after{
    transform:rotate(4deg) translate(14px,6px);
    border-color:rgba(var(--ms-pack-glow, 212 173 69), 0.3);
}

/* Pack-Artwork (das grosse Bild oben) */
.ms-pack-artwork{
    position:relative;
    aspect-ratio:4/5;
    background-size:cover;
    background-position:center 25%;
    background-color:#0a0a14;
    overflow:hidden;
    border-bottom:1px solid var(--ms-border-gold);
    /* Border-Radius oben passend zum Pack-Container, da der Parent kein
       overflow:hidden mehr hat (wegen Stapel-Pseudo-Elementen) */
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.ms-pack-artwork::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 30%, rgba(var(--ms-pack-glow, 212 173 69), 0.22), transparent 60%);
    mix-blend-mode:overlay;
    opacity:0.7;
}
/* Innerer Gold-Rahmen (sieht aus wie Foil-Rand eines Sammel-Packs) */
.ms-pack-artwork::after{
    content:'';position:absolute;
    inset:8px;
    border:1px solid rgba(212,173,69,0.25);
    pointer-events:none;
    border-radius:2px;
}
.ms-pack-artwork-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,
        rgba(10,10,18,0) 55%,
        rgba(10,10,18,0.7) 85%,
        rgba(10,10,18,1) 100%);
    pointer-events:none;
}

/* Siegel: römische Zahl auf goldener Scheibe oben rechts */
.ms-pack-seal{
    position:absolute;top:14px;right:14px;
    width:46px;height:46px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dark));
    border:2px solid #1a130a;
    box-shadow:0 4px 14px rgba(0,0,0,0.6), inset 0 0 0 2px var(--ms-gold-light), 0 0 18px rgba(212,173,69,0.35);
    color:#0a0603;
    font-family:var(--ms-font-heading);
    font-weight:700;font-size:0.95rem;
    letter-spacing:0.05em;
    z-index:2;
}
.ms-pack-seal span{line-height:1;margin-top:1px}

/* Pack-Body */
.ms-pack-body{
    padding:1.35rem 1.4rem 1.55rem;
    display:flex;flex-direction:column;
    flex:1;gap:0.5rem;
    position:relative;
    /* Border-Radius unten passend zum Pack-Container */
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.ms-pack-num{
    font-family:var(--ms-font-heading);
    font-size:0.7rem;font-weight:500;
    letter-spacing:0.3em;text-transform:uppercase;
    color:var(--ms-gold);opacity:0.8;
    margin-bottom:0.15rem;
}
.ms-pack-title{
    font-family:var(--ms-font-heading);
    font-size:1.25rem;font-weight:700;
    color:var(--ms-text);
    margin:0;line-height:1.2;
}
.ms-pack-sub{
    font-family:var(--ms-font-body);
    font-style:italic;
    color:rgb(var(--ms-pack-glow, 212 173 69));
    font-size:0.95rem;line-height:1.4;
    margin-bottom:0.3rem;
    opacity:0.9;
}
.ms-pack-teaser{
    color:var(--ms-text-soft);
    font-size:0.98rem;line-height:1.55;
    margin:0 0 0.8rem;
    flex:1;
}
.ms-pack-meta{
    display:flex;justify-content:space-between;align-items:center;gap:0.6rem;
    padding-top:0.7rem;
    border-top:1px solid var(--ms-border);
    margin-top:auto;
}
.ms-pack-status{
    font-family:var(--ms-font-heading);
    font-size:0.7rem;font-weight:500;
    letter-spacing:0.2em;text-transform:uppercase;
    color:var(--ms-text-muted);
}
.ms-pack-status.available{color:var(--ms-gold-light)}
.ms-pack-price{
    font-family:var(--ms-font-heading);
    font-size:1.05rem;font-weight:600;
    color:var(--ms-gold);
    letter-spacing:0.05em;
}

/* ════════════════════════════════════════════════════════════════
   SHOWCASE / LORE-PREVIEW – Karten-Grid
   ════════════════════════════════════════════════════════════════ */
.ms-showcase{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
    gap:1.4rem;
    margin-bottom:3rem;
}
/* Variante mit exakt 4 Spalten auf Desktop (für 4-Karten-Vorschau in Lore-Sektion) */
.ms-showcase-4{
    grid-template-columns:repeat(4, 1fr);
    max-width:940px;margin-left:auto;margin-right:auto;
    gap:1.4rem;
    margin-bottom:3rem;
}
@media (max-width: 880px){
    .ms-showcase-4{grid-template-columns:repeat(2, 1fr); max-width:520px}
}
@media (max-width: 440px){
    .ms-showcase-4{grid-template-columns:1fr; max-width:270px}
}

/* ════════════════════════════════════════════════════════════════
   KARTE – Detail-Ansichts-Design (Bild oben, solider Info-Block unten).
   Verwendet für Lore-Grid, Lore-Preview und die Custom-Cards-Solo-Karte.
   ════════════════════════════════════════════════════════════════ */
/* Link-Wrapper für klickbare Karten (z.B. Lore-Vorschau auf Index, die nach
   lore.php#card-<id> verlinkt). Soll weder Underline noch Goldton der
   Standard-Link-Regel zeigen, und nimmt das gesamte Grid-Cell ein, damit
   die Card visuell unverändert wirkt. */
.ms-card-link{
    display:block;
    color:inherit;
    text-decoration:none;
}
.ms-card-link:hover,
.ms-card-link:focus{color:inherit}
.ms-card-link:focus-visible{outline:2px solid var(--ms-gold-light);outline-offset:4px;border-radius:6px}
.ms-card{
    position:relative;
    background:var(--ms-bg-card);
    border:1px solid var(--ms-border);
    border-radius:5px;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    transition:transform .35s cubic-bezier(.2,.9,.3,1), border-color .3s, box-shadow .3s;
    box-shadow:0 6px 20px rgba(0,0,0,0.5);
}
.ms-card[data-type="figure"]   { --ms-card-c:var(--ms-card-green)  }
.ms-card[data-type="boost"]    { --ms-card-c:var(--ms-card-yellow) }
.ms-card[data-type="trap"]     { --ms-card-c:var(--ms-card-red)    }
.ms-card[data-type="creature"] { --ms-card-c:var(--ms-card-violet) }
.ms-card[data-type="spell"]    { --ms-card-c:var(--ms-card-blue)   }
.ms-card:hover{
    transform:translateY(-5px);
    border-color:var(--ms-card-c, var(--ms-border-gold));
    box-shadow:
        0 18px 44px rgba(0,0,0,0.65),
        0 0 24px color-mix(in srgb, var(--ms-card-c, #d4ad45) 30%, transparent);
}

/* Farbige Typ-Leiste ganz oben */
.ms-card-type-bar{
    position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--ms-card-c, var(--ms-gold));
    z-index:3;
}

/* Bildbereich: fester eigener Aspect (1:1) – der Info-Block darunter
   wächst natürlich mit seinem Text. So kollabiert nichts, auch wenn
   die Karte in einem flex-Container ohne definierte Höhe steht. */
.ms-card-media{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    flex:0 0 auto;
    overflow:hidden;
    background:#0a0a14;
    border-bottom:1px solid rgba(0,0,0,0.5);
}
.ms-card-img,.ms-card-vid{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;
    transition:opacity .35s;
}
.ms-card-vid{opacity:0}
.ms-card.playing .ms-card-vid{opacity:1}
.ms-card.playing .ms-card-img{opacity:0}
/* Weicher Übergang vom Bild zum Info-Block */
.ms-card-media::after{
    content:'';position:absolute;
    left:0;right:0;bottom:0;height:28%;
    background:linear-gradient(180deg, transparent, rgba(10,10,18,0.85));
    pointer-events:none;
}

/* Punkte-Badge (floating über dem Bild) */
.ms-card-badge{
    position:absolute;top:10px;right:10px;
    min-width:28px;height:28px;padding:0 6px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(5,5,10,0.88);
    border:1px solid var(--ms-card-c, var(--ms-gold));
    border-radius:3px;
    color:var(--ms-gold);
    font-family:var(--ms-font-heading);
    font-weight:700;font-size:0.85rem;
    z-index:4;
    backdrop-filter:blur(4px);
}

/* Lore-Hinweis als Schriftrolle (📜) – wie im Spiel */
.ms-card-lore-hint{
    position:absolute;top:10px;left:10px;
    width:26px;height:26px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(5,5,10,0.78);
    border:1px solid var(--ms-border-gold);
    border-radius:4px;
    font-size:14px;line-height:1;
    z-index:4;
    backdrop-filter:blur(4px);
    transition:background .2s, border-color .2s;
    user-select:none;
}
.ms-card:hover .ms-card-lore-hint{
    background:rgba(212,173,69,0.12);
    border-color:var(--ms-gold);
}

/* Info-Block (unterer Kartenbereich, wie im Detail-Modal) */
.ms-card-info{
    flex:1 1 auto;
    display:flex;flex-direction:column;
    padding:0.75rem 0.85rem 0.9rem;
    background:linear-gradient(180deg, var(--ms-bg-card) 0%, #080811 100%);
    gap:0.12rem;
}
.ms-card-type{
    font-family:var(--ms-font-heading);
    font-size:0.6rem;font-weight:500;
    letter-spacing:0.28em;text-transform:uppercase;
    color:var(--ms-card-c, var(--ms-gold));
    opacity:0.95;
    line-height:1;
}
.ms-card-name{
    font-family:var(--ms-font-heading);
    font-size:0.98rem;font-weight:600;
    color:var(--ms-text);
    line-height:1.2;
    margin-top:0.25rem;
    /* 1 Zeile, mit Ellipsis */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ms-card-name-bar{
    width:30px;height:1px;
    background:linear-gradient(90deg, var(--ms-gold), transparent);
    margin:0.3rem 0;
}
.ms-card-desc{
    font-family:var(--ms-font-body);
    font-size:0.82rem;line-height:1.38;
    color:var(--ms-text-soft);
    /* Kürzen auf max. 2 Zeilen */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:0;
}

.ms-showcase-cta{text-align:center}

/* ════════════════════════════════════════════════════════════════
   LORE PAGE (nur auf lore.php)
   ════════════════════════════════════════════════════════════════ */
.ms-lore-hero{
    padding:9rem 1.5rem 3rem;
    text-align:center;
}
.ms-lore-filters{
    display:flex;flex-wrap:wrap;gap:0.55rem;justify-content:center;
    margin-top:2rem;
}
.ms-filter-btn{
    padding:0.55rem 1.1rem;
    background:transparent;
    border:1px solid var(--ms-border);
    border-radius:3px;
    color:var(--ms-text-soft);
    font-family:var(--ms-font-heading);
    font-size:0.78rem;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;
    transition:all .25s;
    cursor:pointer;
}
.ms-filter-btn:hover{
    border-color:var(--ms-border-gold);
    color:var(--ms-gold-light);
    background:rgba(212,173,69,0.04);
}
.ms-filter-btn.active{
    border-color:var(--ms-gold);
    color:var(--ms-gold);
    background:rgba(212,173,69,0.08);
}
.ms-lore-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
    gap:1.4rem;
    max-width:1240px;
    margin:0 auto;padding:0 1.5rem 4rem;
}

/* ════════════════════════════════════════════════════════════════
   DETAIL MODAL – exakt wie die In-Game-Detailansicht aufgebaut.
   Eine große, vertikale Karte mit Header (Name), Mittelteil (Regeln,
   Bildkreis, Anforderungen) und Beschreibungsbereich.
   Portiert aus mysterado.css (.card-large / .cl-*).
   ════════════════════════════════════════════════════════════════ */
.ms-modal{
    position:fixed;inset:0;z-index:200;
    background:rgba(0,0,0,0.88);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;
    padding:1rem;
    opacity:0;transition:opacity .3s;
}
.ms-modal.open{display:flex;opacity:1}
.ms-modal-content{
    position:relative;
    display:flex;flex-direction:column;align-items:center;gap:1.2rem;
    max-height:100%;overflow-y:auto;
    scrollbar-width:none;-ms-overflow-style:none;
}
.ms-modal-content::-webkit-scrollbar{display:none}

.ms-modal-close{
    position:fixed;top:1.2rem;right:1.2rem;z-index:210;
    width:40px;height:40px;border-radius:50%;
    background:rgba(5,5,10,0.85);
    border:1px solid var(--ms-border-gold);
    color:var(--ms-text);
    font-size:1.5rem;line-height:1;
    transition:all .25s;
}
.ms-modal-close:hover{
    border-color:var(--ms-gold);
    color:var(--ms-gold-light);
    transform:rotate(90deg);
}

/* Die Karte selbst – Abmessung und Hintergründe wie im Spiel.
   Die Breite ist kontext-abhängig (Modal vs. Solo-Wrap). */
.ms-detail-card{
    aspect-ratio:440/660;
    border-radius:14px;padding:0;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    border:2px solid rgba(80,80,100,0.45);
    box-shadow:
        0 0 60px rgba(0,0,0,0.8),
        0 0 30px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Modal-Kontext: große Detailansicht */
.ms-modal .ms-detail-card{
    width:clamp(300px, 92vw, 440px);
}
/* Solo-Kontext: nimmt die Wrap-Breite (mit 3D-Tilt) ein */
.ms-solo-card-wrap .ms-detail-card{
    width:100%;
}
.ms-detail-card::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 80% 50% at 50% 45%, rgba(255,255,255,0.03) 0%, transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 40%);
}
.ms-detail-card[data-type="figure"]  { background:linear-gradient(180deg, rgba(45,138,78,0.5) 0%, rgba(45,138,78,0.08) 25%, #080812 60%, #0a0a14 100%);border-color:rgba(45,138,78,0.35) }
.ms-detail-card[data-type="boost"]   { background:linear-gradient(180deg, rgba(220,190,55,0.5) 0%, rgba(220,190,55,0.08) 25%, #080812 60%, #0a0a14 100%);border-color:rgba(220,190,55,0.35) }
.ms-detail-card[data-type="trap"]    { background:linear-gradient(180deg, rgba(204,51,51,0.5) 0%, rgba(204,51,51,0.08) 25%, #080812 60%, #0a0a14 100%);border-color:rgba(204,51,51,0.35) }
.ms-detail-card[data-type="creature"]{ background:linear-gradient(180deg, rgba(136,68,187,0.5) 0%, rgba(136,68,187,0.08) 25%, #080812 60%, #0a0a14 100%);border-color:rgba(136,68,187,0.35) }
.ms-detail-card[data-type="spell"]   { background:linear-gradient(180deg, rgba(51,119,204,0.5) 0%, rgba(51,119,204,0.08) 25%, #080812 60%, #0a0a14 100%);border-color:rgba(51,119,204,0.35) }

/* Header: Kartenname oben mit zartem Gold-Akzent */
.ms-cl-header{
    text-align:center;padding:0.75rem 1rem 0.55rem;
    flex-shrink:0;position:relative;z-index:2;
    background:linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 100%);
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.ms-cl-header::after{
    content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,173,69,0.25),transparent);
}
.ms-cl-name{
    font-family:var(--ms-font-heading);
    font-size:1.4rem;font-weight:900;
    color:#ffffff;letter-spacing:0.1em;text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    text-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.ms-cl-type{
    margin-top:0.25rem;
    font-family:var(--ms-font-heading);
    font-size:0.7rem;font-weight:500;
    letter-spacing:0.24em;text-transform:uppercase;
    color:rgba(212,173,69,0.85);
}

/* Mittelteil: Regeln links / Bildkreis mitte / Anforderungen rechts */
.ms-cl-middle{
    display:flex;align-items:stretch;flex:0 0 auto;
    padding:0.75rem 1rem 0.25rem;
    position:relative;z-index:2;min-height:200px;
}
.ms-cl-side-col{
    width:58px;flex-shrink:0;
    display:flex;flex-direction:column;align-items:center;
    gap:8px;padding-top:0;
}
.ms-cl-side-col.col-left{justify-content:flex-start}
.ms-cl-side-col.col-right{justify-content:flex-start}

.ms-cl-points-circle{
    width:54px;height:54px;border-radius:50%;
    border:2.5px solid rgba(212,173,69,0.55);
    background:rgba(0,0,0,0.65);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--ms-font-heading);
    font-size:1.75rem;font-weight:550;
    color:#ffffff;
    text-shadow:0 1px 6px rgba(0,0,0,0.5);
    box-shadow:0 0 16px rgba(212,173,69,0.12), inset 0 0 8px rgba(212,173,69,0.06);
    flex-shrink:0;
}

.ms-cl-side-icon{
    width:48px;height:48px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.18);
    display:flex;align-items:center;justify-content:center;
    font-size:2rem;color:var(--ms-text-soft);
    background:rgba(0,0,0,0.4);position:relative;
    flex-shrink:0;
}
.ms-cl-side-icon.req{border-color:rgba(212,173,69,0.35);color:#ffffff}
.ms-cl-side-num{
    position:absolute;bottom:-3px;right:-5px;
    font-family:var(--ms-font-heading);font-size:1.2rem;font-weight:550;
    color:#ffffff;background:rgba(0,0,0,0.85);
    border-radius:50%;width:25px;height:25px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,0.25);
}

.ms-cl-center{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:0;position:relative;
}

/* Bildkreis mittig – exakt wie im Spiel (200×200) */
.ms-cl-image-frame{
    width:200px;height:200px;border-radius:50%;position:relative;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.ms-cl-image-frame::before{
    content:'';position:absolute;inset:-6px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.08);
    box-shadow:0 0 20px rgba(0,0,0,0.4);
}
.ms-cl-image-frame::after{
    content:'';position:absolute;inset:0;border-radius:50%;
    border:2.5px solid rgba(180,160,120,0.25);
    box-shadow:
        0 0 24px rgba(180,160,120,0.08),
        inset 0 0 30px rgba(0,0,0,0.5),
        inset 0 0 60px rgba(0,0,0,0.3);
    pointer-events:none;z-index:2;
}
.ms-cl-image-inner{
    width:100%;height:100%;border-radius:50%;overflow:hidden;
    background:radial-gradient(circle at 50% 50%, rgba(30,30,45,0.9) 0%, rgba(10,10,18,1) 100%);
    display:flex;align-items:center;justify-content:center;
    position:relative;
}
.ms-cl-image-inner::before{
    content:'';position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 40% 35%, rgba(255,255,255,0.06) 0%, transparent 50%);
    pointer-events:none;z-index:3;
}
.ms-cl-card-img{
    width:100%;height:100%;object-fit:cover;border-radius:50%;
    position:relative;z-index:1;
}
.ms-cl-card-vid{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;border-radius:50%;z-index:1;
    opacity:0;transition:opacity .35s;
}
.ms-detail-card.playing .ms-cl-card-vid{opacity:1}

/* Fallback wenn Bild nicht geladen werden konnte – Emoji im Kreis, wie im Spiel */
.ms-cl-image-fallback{
    font-size:5rem;line-height:1;text-align:center;
    filter:drop-shadow(0 0 12px rgba(0,0,0,0.6));
    display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;position:relative;z-index:1;
}

/* Beschreibung unten – identisch zur Game-Detailansicht */
.ms-cl-desc{
    font-family:var(--ms-font-body);
    font-size:1.25rem;line-height:1.6;color:#ffffff;
    flex:1;text-align:left;overflow-y:auto;
    padding:0.8rem 1.2rem;
    position:relative;z-index:2;
    border-top:1px solid rgba(255,255,255,0.06);
    background:linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 100%);
    scrollbar-width:thin;
    scrollbar-color:rgba(212,173,69,0.3) transparent;
}
.ms-cl-desc::-webkit-scrollbar{width:4px}
.ms-cl-desc::-webkit-scrollbar-track{background:transparent}
.ms-cl-desc::-webkit-scrollbar-thumb{background:rgba(212,173,69,0.25);border-radius:2px}

/* Kreaturenkarten F1/F2-Blöcke */
.ms-cl-fn-block{padding:0.4rem 0;line-height:1.55}
.ms-cl-fn-label{
    display:inline-block;
    font-family:var(--ms-font-heading);font-weight:700;
    font-size:0.85em;letter-spacing:0.08em;text-transform:uppercase;
    border-radius:4px;padding:0.1rem 0.5rem;margin-right:0.4rem;
    vertical-align:middle;
}
.ms-cl-fn-label-f1{color:#3db8a0;background:rgba(61,184,160,0.12);border:1px solid rgba(61,184,160,0.3)}
.ms-cl-fn-label-f2{color:#d4943a;background:rgba(212,148,58,0.12);border:1px solid rgba(212,148,58,0.3)}
.ms-cl-fn-divider{
    height:1px;margin:0.5rem 0;
    background:linear-gradient(90deg,transparent,rgba(120,120,140,0.2),transparent);
}

/* Lore-Trigger unten rechts – Schriftrolle 📜 wie im Spiel */
.ms-cl-lore-trigger{
    position:absolute;bottom:10px;right:10px;z-index:5;
    width:38px;height:38px;border-radius:50%;cursor:pointer;
    background:rgba(0,0,0,0.65);
    border:1.5px solid rgba(212,173,69,0.35);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;
    transition:all 0.25s;
    user-select:none;
}
.ms-cl-lore-trigger:hover{
    border-color:var(--ms-gold);
    background:rgba(0,0,0,0.85);
    box-shadow:0 0 14px rgba(212,173,69,0.3);
    transform:scale(1.12);
}

/* Lore-Overlay – deckt die Karte ab wenn aktiv */
.ms-cl-lore-overlay{
    position:absolute;inset:0;z-index:10;border-radius:inherit;
    background:rgba(4,4,10,0.97);
    display:flex;flex-direction:column;padding:1.4rem;
    opacity:0;pointer-events:none;
    transition:opacity 0.3s ease;
    overflow-y:auto;
}
.ms-cl-lore-overlay.visible{opacity:1;pointer-events:auto}
.ms-cl-lore-header{
    font-family:var(--ms-font-heading);
    font-size:0.82rem;font-weight:700;
    letter-spacing:0.15em;text-transform:uppercase;
    color:var(--ms-gold);
    margin-bottom:1rem;
    display:flex;align-items:center;gap:0.5rem;
}
.ms-cl-lore-header-icon{
    display:inline-flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1;
    user-select:none;
}
.ms-cl-lore-header::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,rgba(212,173,69,0.3),transparent);
}
.ms-cl-lore-text{
    font-family:var(--ms-font-body);
    font-size:1.1rem;line-height:1.7;
    color:rgba(240,238,230,0.95);
    font-style:italic;
}
.ms-cl-lore-close{
    align-self:flex-end;margin-top:auto;padding-top:0.8rem;
    font-family:var(--ms-font-heading);
    font-size:0.7rem;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;
    color:rgba(200,200,210,0.6);
    cursor:pointer;
    background:none;border:none;
    transition:color 0.2s;
}
.ms-cl-lore-close:hover{color:rgba(255,255,255,0.95)}

/* Hinweis auf fehlenden Lore-Text (kein lore_trigger sichtbar) */
.ms-cl-no-lore{
    font-style:italic;color:var(--ms-text-muted);
    font-size:0.95rem;text-align:center;
    padding:0.6rem 0;
}

/* Mobile: Abmessungen wie die Game-Mobile-Detailansicht */
@media (max-width: 560px){
    .ms-modal-close{top:0.7rem;right:0.7rem;width:36px;height:36px}
    .ms-cl-image-frame{width:160px;height:160px}
    .ms-cl-side-col{width:48px}
    .ms-cl-points-circle{width:44px;height:44px;font-size:1.3rem}
    .ms-cl-side-icon{width:40px;height:40px;font-size:1.6rem}
    .ms-cl-side-num{width:22px;height:22px;font-size:1rem}
    .ms-cl-name{font-size:1.1rem}
    .ms-cl-desc{font-size:1.05rem;line-height:1.5;padding:0.65rem 0.9rem}
    .ms-cl-image-fallback{font-size:3.5rem}
}

/* ════════════════════════════════════════════════════════════════
   FINAL CTA + FOOTER
   ════════════════════════════════════════════════════════════════ */
.ms-final-cta{
    padding:6rem 1.5rem;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212,173,69,0.12), transparent 55%),
        linear-gradient(180deg, rgba(10,10,18,0) 0%, rgba(10,10,18,0.7) 100%);
    text-align:center;
}
.ms-final-cta-inner{max-width:720px;margin:0 auto}
.ms-final-cta-title{
    font-family:var(--ms-font-heading);
    font-size:clamp(2rem, 5vw, 3.2rem);
    font-weight:700;line-height:1.15;
    margin:0 0 1rem;
    background:linear-gradient(180deg, var(--ms-gold-light), var(--ms-gold));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;color:transparent;
}
.ms-final-cta-text{
    color:var(--ms-text-soft);
    font-size:1.15rem;font-style:italic;line-height:1.6;
    margin:0 0 2.2rem;
}

.ms-footer{
    padding:2.5rem 1.5rem 2rem;
    border-top:1px solid var(--ms-border);
    background:rgba(5,5,10,0.6);
}
.ms-footer-inner{
    max-width:1240px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    gap:2rem;flex-wrap:wrap;
}
.ms-footer-brand{
    display:flex;align-items:center;gap:0.5rem;
    color:var(--ms-gold);
    font-family:var(--ms-font-heading);
    font-weight:700;font-size:1rem;
    letter-spacing:0.15em;text-transform:uppercase;
}
.ms-footer-links{
    display:flex;flex-wrap:wrap;gap:1.5rem;
}
.ms-footer-links a{
    color:var(--ms-text-soft);
    font-family:var(--ms-font-heading);
    font-size:0.75rem;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;
}
.ms-footer-links a:hover{color:var(--ms-gold-light)}
.ms-footer-copy{
    color:var(--ms-text-muted);
    font-size:0.82rem;
    font-family:var(--ms-font-heading);
    letter-spacing:0.1em;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 960px){
    .ms-block-row{grid-template-columns:1fr;gap:2.5rem}
    .ms-block-row.reverse .ms-block-body,
    .ms-block-row.reverse .ms-block-visual{grid-column:auto}
    .ms-block-row.reverse .ms-block-visual{grid-row:auto}
    .ms-modal-content{grid-template-columns:1fr;max-height:88vh}
    .ms-modal-card{min-height:300px;aspect-ratio:6/9;max-height:50vh}
}
@media (max-width: 760px){
    .ms-nav-links{
        position:absolute;top:100%;left:0;right:0;
        flex-direction:column;gap:0;
        background:rgba(5,5,10,0.96);
        backdrop-filter:blur(16px);
        border-bottom:1px solid var(--ms-border);
        padding:0.5rem 0;
        max-height:0;overflow:hidden;
        transition:max-height .3s ease-out;
    }
    .ms-nav-links.open{max-height:420px}
    .ms-nav-links a{padding:0.9rem 1.5rem;border-bottom:1px solid var(--ms-border)}
    .ms-nav-links a:last-child{border-bottom:none}
    /* Mobile-Only Hauptaktion: in Goldakzent als erster Eintrag */
    .ms-nav-links .ms-nav-mobile-only{
        display:block;
        color:var(--ms-gold-light);
        font-weight:600;
        background:rgba(212,173,69,0.08);
    }
    .ms-nav-burger{display:flex}

    /* Auf Mobile (Single-Column) den Stapel-Versatz reduzieren, da
       der zur Verfügung stehende Platz pro Pack kleiner ist und die
       Stapel-Karten sonst zu dominant wirken. */
    .ms-pack::before{transform:rotate(-1.6deg) translate(-5px,4px)}
    .ms-pack::after{transform:rotate(1.8deg) translate(6px,3px)}
    .ms-pack:hover::before{transform:rotate(-2.6deg) translate(-8px,6px)}
    .ms-pack:hover::after{transform:rotate(3deg) translate(10px,5px)}

    .ms-hero{min-height:auto;padding:7rem 1rem 3rem}
    .ms-hero-cards{min-height:180px}
    .ms-hero-scroll{display:none}

    .ms-section{padding:4rem 1rem}
    .ms-features{grid-template-columns:1fr}
    .ms-packs{grid-template-columns:1fr;gap:1.6rem;padding:0}

    .ms-footer-inner{flex-direction:column;text-align:center;gap:1.2rem}
}
@media (max-width: 480px){
    .ms-hero-ctas{flex-direction:column;gap:0.8rem}
    .ms-hero-ctas .ms-btn{width:100%}
    .ms-invite-link-wrap{flex-direction:column}
}

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce){
    .ms-hero-card,
    .ms-fan-glow,
    .ms-stack-sparkle,
    .ms-hero-scroll-line,
    .ms-block-tag.coming::before{
        animation:none;
    }
    .ms-reveal{opacity:1;transform:none;transition:none}
}