/*
 * POTTERBOT_PRODUCTION_UI_V3
 *
 * Öffentliche PotterBot Designsprache.
 * Minecraft-inspiriert, aber kein Minecraft-GUI-Klon.
 */

:root{
    --ink:#0c0717;
    --ink-2:#150b24;
    --stone:#1b112d;
    --stone-2:#261a3a;
    --stone-3:#38254c;

    --line:#5c4475;
    --line-soft:#332341;

    --paper:#f3edfa;
    --text:#fbf7ff;
    --muted:#bdafce;
    --dim:#9587a7;

    --emerald:#b65bff;
    --emerald-2:#edc2ff;
    --emerald-dark:#4e1b84;

    --gold:#e7b94f;
    --redstone:#e45d62;
    --lapis:#5b8fe8;
    --diamond:#b47bfc;
    --netherite:#9b7ab0;
    --ender:#ca73dc;

    --danger:#ec6c76;
    --ok:#61d694;

    --discord:#5865f2;

    --max:1320px;
}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{
    margin:0;

    min-height:100vh;

    color:var(--text);

    font-family:
        Inter,
        "Segoe UI",
        system-ui,
        sans-serif;

    background:
        linear-gradient(
            rgba(4,6,7,.82),
            rgba(4,6,7,.93)
        ),
        repeating-linear-gradient(
            0deg,
            #170d28 0,
            #170d28 31px,
            #120b20 32px
        );

    overflow-x:hidden;
}


body::after{
    content:"";

    position:fixed;
    inset:0;
    z-index:-1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(181,91,255,.10),
            transparent 28rem
        ),
        radial-gradient(
            circle at 85% 0%,
            rgba(231,185,79,.06),
            transparent 30rem
        );
}


/*
 * POTTERBOT_VISIBILITY_FIX_V1
 *
 * Bestehendes Account-/Shop-JavaScript benutzt
 * sowohl hidden-Attribute als auch .hidden-Klassen.
 */
[hidden],
.hidden{
    display:none !important;
}


a{
    color:inherit;
}


button,
input,
textarea{
    font:inherit;
}


button,
a{
    -webkit-tap-highlight-color:
        transparent;
}


.pb-shell{
    width:
        min(
            var(--max),
            calc(100% - 40px)
        );

    margin-inline:auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.pb-header{
    position:sticky;
    top:0;
    z-index:120;

    background:#0b0717;

    border-bottom:
        2px solid #2b1941;
}


.pb-header::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-2px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(181,91,255,.65),
            transparent
        );
}


.pb-header-inner{
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:26px;
}


.pb-brand{
    display:flex;
    align-items:center;

    gap:12px;

    text-decoration:none;
}


.pb-brand-icon{
    position:relative;

    width:40px;
    height:40px;

    flex:none;

    background:
        linear-gradient(
            135deg,
            var(--emerald),
            #8d36cc
        );

    clip-path:
        polygon(
            0 0,
            29px 0,
            40px 11px,
            40px 40px,
            11px 40px,
            0 29px
        );

    box-shadow:
        0 0 0 1px rgba(255,255,255,.12);
}


.pb-brand-icon::before{
    content:"";

    position:absolute;

    inset:7px;

    background:#130d22;

    clip-path:
        polygon(
            0 0,
            18px 0,
            26px 8px,
            26px 26px,
            8px 26px,
            0 18px
        );
}


.pb-brand-icon::after{
    content:"";

    position:absolute;

    width:8px;
    height:8px;

    left:16px;
    top:16px;

    background:
        var(--emerald-2);
}


.pb-brand-copy{
    display:flex;
    flex-direction:column;

    line-height:1;
}


.pb-brand-name{
    font-size:17px;
    font-weight:950;

    letter-spacing:.075em;
}


.pb-brand-sub{
    margin-top:6px;

    color:var(--muted);

    font-size:8px;
    font-weight:800;

    letter-spacing:.24em;
}


.pb-nav{
    display:flex;
    align-items:center;

    gap:4px;
}


.pb-nav a{
    min-height:40px;

    padding:
        0 14px;

    display:flex;
    align-items:center;

    border:
        1px solid transparent;

    color:#aeb5b8;

    text-decoration:none;

    font-size:11px;
    font-weight:900;

    letter-spacing:.07em;
}


.pb-nav a:hover{
    color:white;

    border-color:
        var(--line);
}


.pb-nav a.active{
    color:
        var(--emerald-2);

    border-color:
        rgba(181,91,255,.35);

    background:
        rgba(181,91,255,.06);
}


/* ============================================================
   TYPO / BUTTONS
   ============================================================ */

.pb-kicker{
    display:flex;
    align-items:center;

    gap:10px;

    color:
        var(--emerald);

    font-size:10px;
    font-weight:950;

    letter-spacing:.18em;
}


.pb-kicker::before{
    content:"";

    width:24px;
    height:4px;

    background:
        var(--emerald);
}


.pb-title{
    margin:
        14px 0 0;

    font-size:
        clamp(
            42px,
            6vw,
            78px
        );

    line-height:.94;

    letter-spacing:-.06em;

    font-weight:950;
}


.pb-title span{
    color:
        var(--emerald);
}


.pb-lead{
    max-width:680px;

    margin:
        22px 0 0;

    color:
        var(--muted);

    font-size:
        clamp(
            15px,
            1.4vw,
            18px
        );

    line-height:1.7;
}


.pb-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:27px;
}


.pb-btn{
    min-height:46px;

    padding:
        0 19px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid var(--line);

    border-radius:3px;

    color:white;

    background:
        #171e22;

    cursor:pointer;

    text-decoration:none;

    font-size:11px;
    font-weight:950;

    letter-spacing:.06em;
}


.pb-btn:hover{
    border-color:
        #59676e;

    background:
        #20292e;
}


.pb-btn.primary{
    color:#120820;

    border-color:
        var(--emerald);

    background:
        var(--emerald);
}


.pb-btn.gold{
    color:#1a1305;

    border-color:
        var(--gold);

    background:
        var(--gold);
}


.pb-btn.discord{
    border-color:
        var(--discord);

    background:
        var(--discord);
}


/* ============================================================
   HOME HERO
   ============================================================ */

.home-hero{
    min-height:640px;

    display:grid;

    grid-template-columns:
        minmax(0,1.06fr)
        minmax(430px,.94fr);

    align-items:center;

    gap:72px;

    padding:
        74px 0 70px;
}


.world-window{
    position:relative;

    min-height:430px;

    overflow:hidden;

    border:
        1px solid var(--line);

    background:
        linear-gradient(
            180deg,
            #15242b 0%,
            #152329 46%,
            #19251d 46%,
            #0f1712 100%
        );

    clip-path:
        polygon(
            0 0,
            calc(100% - 18px) 0,
            100% 18px,
            100% 100%,
            18px 100%,
            0 calc(100% - 18px)
        );

    box-shadow:
        0 28px 70px rgba(0,0,0,.32);
}


.world-sky{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 76% 25%,
            rgba(231,185,79,.22) 0 32px,
            transparent 33px
        );
}


.world-hill{
    position:absolute;

    bottom:-65px;

    width:250px;
    height:250px;

    transform:
        rotate(45deg);

    background:#293d2c;

    border:
        12px solid #17271b;
}


.world-hill.one{
    left:-30px;
}


.world-hill.two{
    right:-55px;

    width:330px;
    height:330px;

    background:#203524;
}


.world-tower{
    position:absolute;

    left:46%;
    bottom:68px;

    width:72px;
    height:170px;

    background:
        repeating-linear-gradient(
            0deg,
            #333d40 0 20px,
            #2b3336 20px 40px
        );

    border:
        3px solid #222a2d;
}


.world-tower::before{
    content:"";

    position:absolute;

    left:-17px;
    top:-26px;

    width:100px;
    height:32px;

    background:
        #343f42;

    clip-path:
        polygon(
            0 100%,
            14% 0,
            28% 100%,
            50% 0,
            72% 100%,
            86% 0,
            100% 100%
        );
}


.world-rune{
    position:absolute;

    left:50%;
    top:48%;

    width:24px;
    height:24px;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    background:
        var(--emerald);

    box-shadow:
        0 0 26px rgba(181,91,255,.8);
}


.world-label{
    position:absolute;

    left:22px;
    bottom:20px;

    padding:
        11px 13px;

    border:
        1px solid rgba(255,255,255,.16);

    background:
        rgba(13,7,25,.82);

    font-size:10px;
    font-weight:900;

    letter-spacing:.11em;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.pb-section{
    padding:
        72px 0;

    border-top:
        1px solid var(--line-soft);
}


.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:26px;
}


.section-head h2{
    margin:
        8px 0 0;

    font-size:
        clamp(
            27px,
            3vw,
            42px
        );

    line-height:1;

    letter-spacing:-.035em;
}


.section-head p{
    max-width:650px;

    margin:
        12px 0 0;

    color:
        var(--muted);

    line-height:1.65;
}


.feature-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:14px;
}


.feature-card{
    position:relative;

    min-height:270px;

    padding:27px;

    overflow:hidden;

    border:
        1px solid var(--line);

    background:
        linear-gradient(
            150deg,
            #190f2a,
            #160c27
        );

    clip-path:
        polygon(
            0 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            12px 100%,
            0 calc(100% - 12px)
        );
}


.feature-card::after{
    content:"";

    position:absolute;

    width:100px;
    height:100px;

    right:-55px;
    bottom:-55px;

    border:
        18px solid rgba(181,91,255,.06);

    transform:
        rotate(45deg);
}


.feature-material{
    width:50px;
    height:50px;

    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:2px;
}


.feature-material i{
    display:block;

    background:
        var(--material,var(--emerald));
}


.feature-card h3{
    margin:
        24px 0 0;

    font-size:21px;
}


.feature-card p{
    color:
        var(--muted);

    line-height:1.58;

    font-size:13px;
}


.feature-card a{
    position:absolute;

    left:27px;
    bottom:24px;

    color:
        var(--emerald-2);

    text-decoration:none;

    font-size:10px;
    font-weight:950;
}


/* ============================================================
   STORE
   ============================================================ */

.store-hero{
    padding:
        58px 0 48px;

    border-bottom:
        1px solid var(--line-soft);
}


.store-hero-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        360px;

    gap:70px;

    align-items:end;
}


.store-panel{
    border:
        1px solid var(--line);

    background:
        #10161a;

    clip-path:
        polygon(
            0 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            12px 100%,
            0 calc(100% - 12px)
        );
}


.store-panel-row{
    min-height:61px;

    padding:
        0 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid var(--line-soft);

    font-size:11px;
}


.store-panel-row:last-child{
    border-bottom:0;
}


.store-panel-row span{
    color:
        var(--muted);

    font-size:9px;
    font-weight:900;

    letter-spacing:.12em;
}


.store-main{
    padding:
        65px 0 150px;
}


.store-section{
    margin-top:82px;
}


.store-section:first-child{
    margin-top:0;
}


.store-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:25px;
}


.store-section-head h2{
    margin:
        8px 0 0;

    font-size:
        clamp(
            29px,
            3vw,
            42px
        );
}


.store-section-head p{
    max-width:620px;

    color:
        var(--muted);

    line-height:1.6;
}


.store-tag{
    padding:
        8px 10px;

    border:
        1px solid var(--line);

    color:
        var(--muted);

    font-size:9px;
    font-weight:900;

    letter-spacing:.1em;
}


.featured{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;

    margin-bottom:14px;
}


.rune-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:14px;
}


.rune-card{
    position:relative;

    min-height:340px;

    padding:27px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:
        1px solid var(--line);

    background:
        linear-gradient(
            150deg,
            #172126,
            #160d28
        );

    clip-path:
        polygon(
            0 0,
            calc(100% - 13px) 0,
            100% 13px,
            100% 100%,
            13px 100%,
            0 calc(100% - 13px)
        );

    transition:
        transform .15s ease,
        border-color .15s ease;
}


.rune-card:hover{
    transform:
        translateY(-3px);

    border-color:
        rgba(181,91,255,.48);
}


.rune-card.big{
    min-height:410px;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(181,91,255,.12),
            transparent 13rem
        ),
        linear-gradient(
            150deg,
            #19262a,
            #160d28
        );
}


.rune-card.best{
    border-color:
        rgba(231,185,79,.55);
}


.bonus,
.best-badge{
    position:absolute;

    top:17px;
    z-index:4;

    padding:
        7px 10px;

    font-size:8px;
    font-weight:950;

    letter-spacing:.1em;
}


.bonus{
    right:17px;

    color:#04120e;

    background:
        var(--emerald);
}


.best-badge{
    left:17px;

    color:#211705;

    background:
        var(--gold);
}


.crystals{
    position:relative;

    width:130px;
    height:130px;

    margin:
        50px auto 28px;

    font-size:0;
}


.crystals::before{
    content:"";

    position:absolute;

    width:64px;
    height:86px;

    left:34px;
    top:7px;

    border:
        3px solid var(--emerald);

    background:
        linear-gradient(
            135deg,
            rgba(181,91,255,.18),
            rgba(181,91,255,.03)
        );

    clip-path:
        polygon(
            50% 0,
            100% 27%,
            81% 100%,
            19% 100%,
            0 27%
        );

    box-shadow:
        0 0 25px rgba(181,91,255,.16);
}


.crystals::after{
    content:"";

    position:absolute;

    width:28px;
    height:48px;

    left:8px;
    bottom:11px;

    border:
        2px solid #7b34b7;

    transform:
        rotate(-18deg);

    box-shadow:
        75px -8px 0 -1px #173e36,
        75px -8px 0 1px #7b34b7;
}


.rune-name{
    margin-top:auto;

    font-size:
        clamp(
            23px,
            2vw,
            31px
        );

    font-weight:950;

    letter-spacing:-.035em;
}


.price{
    margin-top:5px;

    color:
        var(--muted);

    font-weight:800;
}


.buy{
    width:100%;

    min-height:44px;

    margin-top:20px;

    border:
        1px solid #425058;

    border-radius:2px;

    color:white;

    background:
        #1a2328;

    cursor:pointer;

    font-size:10px;
    font-weight:950;

    letter-spacing:.075em;
}


.buy:hover{
    color:#120820;

    border-color:
        var(--emerald);

    background:
        var(--emerald);
}


.rank-strip{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;
}


.rank{
    --rank:#999;

    position:relative;

    min-height:220px;

    padding:
        25px 24px 22px 83px;

    overflow:hidden;

    border:
        1px solid var(--line);

    background:
        linear-gradient(
            145deg,
            #190f2a,
            #101519
        );

    clip-path:
        polygon(
            0 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% 100%,
            0 100%
        );
}


.rank::before{
    content:"";

    position:absolute;

    left:22px;
    top:30px;

    width:14px;
    height:14px;

    background:
        var(--rank);

    box-shadow:
        16px 0 var(--rank),
        0 16px var(--rank),
        16px 16px var(--rank),
        8px 32px var(--rank);
}


.rank::after{
    content:"";

    position:absolute;

    left:57px;
    top:0;
    bottom:0;

    width:1px;

    background:
        color-mix(
            in srgb,
            var(--rank) 35%,
            transparent
        );
}


.rank.redstone{--rank:var(--redstone);}
.rank.lapis{--rank:var(--lapis);}
.rank.smaragd{--rank:#49cf7e;}
.rank.diamant{--rank:var(--diamond);}
.rank.netherit{--rank:var(--netherite);}
.rank.enderdrache{--rank:var(--ender);}


.rank-duration{
    color:
        var(--muted);

    font-size:8px;
    font-weight:950;

    letter-spacing:.12em;
}


.rank-name{
    margin-top:18px;

    color:
        var(--rank);

    font-size:25px;
    font-weight:950;
}


.rank-price{
    margin-top:5px;

    font-weight:850;
}


.rank button{
    width:100%;

    min-height:41px;

    margin-top:23px;

    border:
        1px solid var(--line);

    border-radius:2px;

    color:white;

    background:
        #1a2328;

    cursor:pointer;

    font-size:9px;
    font-weight:950;
}


.rank button:hover{
    border-color:
        var(--rank);

    color:
        var(--rank);
}


/* ============================================================
   CART
   ============================================================ */

.pb-cart-bar{
    position:fixed;

    right:18px;
    bottom:18px;
    z-index:100;

    min-width:325px;

    padding:11px 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    border:
        1px solid var(--line);

    border-radius:3px;

    background:
        #0e1417;

    box-shadow:
        0 20px 55px rgba(0,0,0,.52);
}


.pb-cart-bar > div{
    display:flex;
    flex-direction:column;
}


.pb-cart-bar strong{
    color:
        var(--emerald);

    font-size:9px;

    letter-spacing:.13em;
}


.pb-cart-bar span{
    color:
        var(--muted);

    font-size:11px;
}


.pb-cart-bar button{
    min-height:37px;

    padding:
        0 14px;

    border:0;

    color:#120820;

    background:
        var(--emerald);

    cursor:pointer;

    font-size:9px;
    font-weight:950;
}


.pb-cart-backdrop{
    position:fixed;

    left:0;
    right:0;
    bottom:0;
    top:72px;

    z-index:105;

    opacity:0;

    pointer-events:none;

    background:
        rgba(0,0,0,.72);

    transition:
        opacity .16s ease;
}


.pb-cart-backdrop.open{
    opacity:1;

    pointer-events:auto;
}


.pb-cart-panel{
    position:fixed;

    right:0;
    top:72px;
    bottom:0;

    z-index:110;

    width:
        min(520px,100%);

    height:
        calc(100dvh - 72px);

    padding:25px;

    overflow:auto;

    transform:
        translateX(102%);

    transition:
        transform .19s ease;

    border-left:
        1px solid var(--line);

    background:#0b0f12;

    box-shadow:
        -28px 0 70px rgba(0,0,0,.55);
}


.pb-cart-panel.open{
    transform:
        translateX(0);
}


.pb-cart-head{
    display:flex;
    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;
}


.pb-cart-title{
    font-size:24px;
    font-weight:950;
}


.pb-cart-sub{
    margin-top:5px;

    color:
        var(--muted);

    font-size:11px;

    line-height:1.5;
}


.pb-icon-button{
    width:38px;
    height:38px;

    border:
        1px solid var(--line);

    color:white;

    background:
        var(--stone);

    cursor:pointer;
}


.pb-login-action{
    display:block;

    margin-bottom:13px;

    padding:12px;

    text-align:center;

    color:white;

    background:
        var(--discord);

    text-decoration:none;

    font-size:11px;
    font-weight:900;
}


.pb-cart-lines{
    display:grid;

    gap:8px;
}


.pb-cart-empty{
    min-height:120px;

    display:grid;
    place-items:center;

    border:
        1px dashed var(--line);

    color:
        var(--muted);
}


.pb-cart-line{
    position:relative;

    padding:
        14px 14px 14px 19px;

    border:
        1px solid var(--line);

    background:
        #170d28;
}


.pb-cart-line::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:
        var(--emerald);
}


.pb-cart-line-top,
.pb-cart-line-bottom,
.pb-quote-row,
.pb-quote-total{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}


.pb-cart-line-name{
    font-weight:900;
}


.pb-cart-line-price{
    color:
        var(--emerald-2);

    font-weight:850;
}


.pb-cart-line-bottom{
    margin-top:12px;
}


.pb-qty{
    display:flex;

    gap:5px;
}


.pb-qty button,
.pb-remove{
    border:
        1px solid var(--line);

    color:white;

    background:
        #1a2227;

    cursor:pointer;
}


.pb-qty button{
    width:32px;
    height:32px;
}


.pb-qty input{
    width:58px;

    border:
        1px solid var(--line);

    color:white;

    background:#06090b;

    text-align:center;
}


.pb-remove{
    padding:
        7px 9px;
}


.pb-gift-box,
.pb-quote,
.pb-legal-consents{
    margin-top:16px;

    padding:14px;

    border:
        1px solid var(--line);

    background:
        #160d28;
}


.pb-check-row{
    display:flex;
    align-items:flex-start;

    gap:9px;

    cursor:pointer;

    line-height:1.5;

    font-size:12px;
}


.pb-gift-fields{
    margin-top:13px;
}


.pb-gift-fields label{
    display:block;

    margin-bottom:6px;

    color:
        var(--muted);

    font-size:11px;
}


.pb-gift-fields input{
    width:100%;

    padding:10px;

    border:
        1px solid var(--line);

    color:white;

    background:#06090b;
}


.pb-gift-fields small{
    display:block;

    margin-top:6px;

    color:
        var(--dim);

    line-height:1.4;
}


.pb-message{
    margin-bottom:13px;

    padding:11px 12px;

    border:
        1px solid var(--line);

    background:
        #160d28;

    font-size:12px;

    line-height:1.45;
}


.pb-message.success{
    border-left:
        3px solid var(--ok);
}


.pb-message.error{
    border-left:
        3px solid var(--danger);
}


.pb-checkout-secondary,
.pb-paypal-button{
    width:100%;

    min-height:46px;

    margin-top:13px;

    border:0;

    cursor:pointer;

    font-size:10px;
    font-weight:950;

    letter-spacing:.045em;
}


.pb-checkout-secondary{
    border:
        1px solid var(--line);

    color:white;

    background:
        #1a2328;
}


.pb-paypal-button{
    color:#161100;

    background:#ffc439;
}


.pb-paypal-button:disabled,
.pb-checkout-secondary:disabled{
    opacity:.42;

    cursor:not-allowed;
}


.pb-recipient{
    margin-bottom:9px;

    color:
        var(--emerald-2);

    font-size:11px;
}


.pb-quote-row{
    padding:4px 0;

    color:
        var(--muted);

    font-size:12px;
}


.pb-quote-total{
    margin-top:9px;

    padding-top:10px;

    border-top:
        1px solid var(--line);

    font-weight:950;
}


.pb-payment-note{
    margin-top:9px;

    color:
        var(--dim);

    text-align:center;

    font-size:10px;

    line-height:1.4;
}


.pb-legal-consents{
    display:grid;

    gap:11px;
}


.pb-legal-consents a{
    color:
        var(--emerald-2);
}


/* ============================================================
   ACCOUNT
   ============================================================ */

.account-main{
    padding:
        55px 0 100px;
}


.account-frame{
    margin-top:30px;

    display:grid;

    grid-template-columns:
        320px minmax(0,1fr);

    border:
        1px solid var(--line);

    background:
        #0f1518;

    clip-path:
        polygon(
            0 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% 100%,
            15px 100%,
            0 calc(100% - 15px)
        );
}


.pb-loading{
    grid-column:
        1 / -1;

    min-height:260px;

    display:grid;
    place-items:center;

    color:
        var(--muted);
}


.pb-guest{
    grid-column:
        1 / -1;

    min-height:350px;

    padding:40px;

    display:grid;

    grid-template-columns:
        1fr 320px;

    gap:50px;

    align-items:center;
}


.discord-showcase{
    min-height:200px;

    display:grid;
    place-items:center;

    border:
        1px solid #3942a4;

    background:
        linear-gradient(
            145deg,
            #171c48,
            #0e122d
        );

    color:#c5c9ff;

    font-size:12px;
    font-weight:950;
}


.profile-rail{
    min-height:470px;

    padding:29px;

    border-right:
        1px solid var(--line);

    background:#130d22;
}


.profile-user{
    display:flex;
    align-items:center;

    gap:13px;

    margin-top:17px;
}


.profile-avatar{
    width:58px;
    height:58px;

    border:
        2px solid var(--line);

    object-fit:cover;

    image-rendering:
        pixelated;
}


.profile-name{
    font-size:17px;
    font-weight:950;
}


.profile-note{
    margin-top:4px;

    color:
        var(--muted);

    font-size:10px;
}


.profile-rule{
    height:1px;

    margin:
        25px 0;

    background:
        var(--line);
}


.profile-links{
    display:grid;

    gap:5px;
}


.profile-links a{
    padding:10px;

    border-left:
        3px solid transparent;

    color:
        var(--muted);

    text-decoration:none;

    font-size:11px;
    font-weight:850;
}


.profile-links a.active{
    color:white;

    border-left-color:
        var(--emerald);

    background:
        rgba(181,91,255,.06);
}


.account-content{
    padding:34px;
}


.account-content h2{
    margin:
        9px 0 0;

    font-size:
        clamp(
            28px,
            3vw,
            40px
        );
}


.account-content p{
    color:
        var(--muted);

    line-height:1.6;
}


.player-panel{
    margin-top:22px;

    padding:24px;

    border:
        1px solid var(--line);

    background:
        linear-gradient(
            145deg,
            #151f22,
            #0d1316
        );
}


.player-name{
    margin-top:13px;

    font-size:31px;
    font-weight:950;
}


.player-stats{
    margin-top:22px;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;
}


.player-stat{
    padding:15px;

    border:
        1px solid var(--line);

    background:#0a0e10;
}


.player-stat span{
    display:block;

    color:
        var(--muted);

    font-size:9px;

    letter-spacing:.1em;
}


.player-stat strong{
    display:block;

    margin-top:6px;

    font-size:20px;
}


.pb-code{
    margin:
        15px 0;

    color:
        var(--emerald);

    font-size:
        clamp(
            32px,
            6vw,
            54px
        );

    font-weight:950;

    letter-spacing:.16em;
}


.pb-command{
    display:inline-block;

    padding:10px;

    border:
        1px solid var(--line);

    background:#050809;

    font-family:
        ui-monospace,
        Consolas,
        monospace;
}


.pb-error{
    padding:
        12px;

    border-left:
        3px solid var(--danger);

    background:
        rgba(236,108,118,.07);

    color:#ffc5ca;
}


/* ============================================================
   LEGAL / SUPPORT
   ============================================================ */

.legal-main{
    padding:
        55px 0 100px;
}


.legal-wrap{
    max-width:920px;
}


.legal-card{
    margin-top:22px;

    padding:
        clamp(22px,4vw,40px);

    border:
        1px solid var(--line);

    background:
        #160d28;
}


.legal-card h2{
    margin:
        32px 0 10px;

    font-size:22px;
}


.legal-card h2:first-child{
    margin-top:0;
}


.legal-card h3{
    margin:
        24px 0 8px;
}


.legal-card p,
.legal-card li{
    color:
        #b0b8bb;

    line-height:1.7;
}


.legal-card a{
    color:
        var(--emerald-2);
}


.legal-note{
    margin:
        18px 0;

    padding:
        14px;

    border-left:
        3px solid var(--gold);

    color:#e5d7b3;

    background:
        rgba(231,185,79,.06);

    line-height:1.6;
}


.legal-form{
    display:grid;

    gap:13px;

    margin-top:22px;
}


.legal-form label{
    display:grid;

    gap:6px;

    color:
        var(--muted);

    font-size:12px;
}


.legal-form input,
.legal-form textarea{
    width:100%;

    padding:11px 12px;

    border:
        1px solid var(--line);

    color:white;

    background:#070a0c;
}


.legal-form textarea{
    min-height:130px;

    resize:vertical;
}


/* ============================================================
   FOOTER
   ============================================================ */

.pb-footer{
    border-top:
        1px solid var(--line);

    background:#070a0b;
}


.footer-top{
    padding:
        42px 0 33px;

    display:grid;

    grid-template-columns:
        1.4fr repeat(3,1fr);

    gap:42px;
}


.footer-brand p{
    max-width:300px;

    color:
        var(--muted);

    font-size:12px;

    line-height:1.6;
}


.footer-col{
    display:grid;

    align-content:start;

    gap:9px;
}


.footer-col strong{
    margin-bottom:4px;

    color:white;

    font-size:10px;

    letter-spacing:.1em;
}


.footer-col a{
    color:
        var(--muted);

    text-decoration:none;

    font-size:11px;
}


.footer-col a:hover{
    color:
        var(--emerald-2);
}


.footer-col a.withdraw{
    color:
        var(--gold);
}


.footer-bottom{
    min-height:65px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    border-top:
        1px solid var(--line-soft);

    color:
        var(--dim);

    font-size:10px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1000px){

    .home-hero{
        grid-template-columns:
            1fr 380px;

        gap:35px;
    }


    .store-hero-grid{
        grid-template-columns:
            1fr 310px;

        gap:35px;
    }


    .rune-grid,
    .rank-strip{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .footer-top{
        grid-template-columns:
            1fr 1fr;
    }

}


@media(max-width:780px){

    .home-hero,
    .store-hero-grid,
    .account-frame,
    .pb-guest{
        grid-template-columns:
            1fr;
    }


    .world-window{
        min-height:350px;
    }


    .feature-grid,
    .featured,
    .rune-grid,
    .rank-strip,
    .player-stats{
        grid-template-columns:
            1fr;
    }


    .profile-rail{
        min-height:auto;

        border-right:0;

        border-bottom:
            1px solid var(--line);
    }


    .store-section-head,
    .section-head{
        align-items:flex-start;

        flex-direction:column;
    }

}


@media(max-width:620px){

    .pb-shell{
        width:
            calc(100% - 24px);
    }


    .pb-brand-sub{
        display:none;
    }


    .pb-nav a:not(.active){
        display:none;
    }


    .pb-title{
        font-size:
            clamp(
                42px,
                14vw,
                62px
            );
    }


    .home-hero{
        min-height:auto;

        padding:
            45px 0;
    }


    .world-window{
        min-height:300px;
    }


    .pb-section{
        padding:
            55px 0;
    }


    .footer-top{
        grid-template-columns:
            1fr;

        gap:27px;
    }


    .footer-bottom{
        align-items:flex-start;

        flex-direction:column;

        padding:
            20px 0;
    }


    .pb-cart-bar{
        left:12px;
        right:12px;
        bottom:12px;

        min-width:0;
    }


    .pb-cart-panel{
        padding:19px;
    }

}


/*
 * POTTER_SHOP_TAX_NOTICE_STYLE_V2
 */

.store-tax-note{
    margin-top:24px;

    padding:13px 15px;

    display:flex;
    align-items:flex-start;

    gap:14px;

    border:
        1px solid var(--line);

    border-left:
        3px solid var(--emerald);

    background:
        rgba(181,91,255,.035);

    color:
        var(--muted);

    font-size:11px;

    line-height:1.55;
}


.store-tax-note strong{
    flex:none;

    color:
        var(--emerald-2);

    font-size:9px;

    letter-spacing:.11em;
}


@media(max-width:620px){

    .store-tax-note{
        flex-direction:column;

        gap:5px;
    }

}


/*
 * POTTERBOT_ASSET_BRAND_STYLE_V1
 */

.pb-brand-media{

    position:relative;

    width:40px;
    height:40px;

    display:block;

    flex:none;
}


.pb-brand-media
.pb-brand-icon{

    position:absolute;

    inset:0;
}


.pb-brand-image{

    position:absolute;

    inset:0;

    z-index:5;

    width:100%;
    height:100%;

    object-fit:contain;

    display:none;
}


.pb-brand-image.asset-ready{

    display:block;
}


.pb-brand-media.has-image
.pb-brand-icon{

    display:none;
}


/*
 * POTTERBOT_REAL_BRAND_V1
 *
 * Ausschließlich echte PotterBot PNG Assets.
 */

.pb-brand.pb-brand-real{

    width:auto;

    min-width:0;

    height:54px;

    padding:5px 0;

    display:flex;

    align-items:center;
    justify-content:flex-start;

    gap:0;

    text-decoration:none;
}


.pb-brand-real
.pb-brand-full{

    display:block;

    width:auto;

    height:43px;

    max-width:245px;

    object-fit:contain;

    object-position:left center;

    filter:
        drop-shadow(
            0 3px 8px rgba(0,0,0,.32)
        );
}


.pb-brand-real
.pb-brand-compact{

    display:none;

    width:46px;
    height:46px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 3px 9px rgba(0,0,0,.35)
        );
}


/*
 * Alte künstliche Markenbestandteile können
 * selbst dann nicht mehr sichtbar werden,
 * falls irgendwo Legacy-Markup übrig bleibt.
 */

.pb-brand-real
.pb-brand-icon,

.pb-brand-real
.pb-brand-copy,

.pb-brand-real
.pb-brand-media{

    display:none !important;
}


/*
 * Footer darf etwas größer wirken.
 */

.pb-footer
.pb-brand-real{

    height:62px;
}


.pb-footer
.pb-brand-real
.pb-brand-full{

    height:50px;

    max-width:285px;
}


/*
 * Kleine Displays: PB Signet statt
 * zusammengedrückter Wortmarke.
 */

@media(max-width:620px){

    .pb-brand.pb-brand-real{

        height:52px;
    }


    .pb-brand-real
    .pb-brand-full{

        display:none;
    }


    .pb-brand-real
    .pb-brand-compact{

        display:block;
    }


    .pb-footer
    .pb-brand-real
    .pb-brand-full{

        display:block;

        height:42px;

        max-width:235px;
    }


    .pb-footer
    .pb-brand-real
    .pb-brand-compact{

        display:none;
    }

}


/* MineVoid UI visual pass v0.5 – visual-only, no behavior changes */
body::after { background: radial-gradient(circle at 13% 12%, rgba(158,54,251,.17), transparent 34rem), radial-gradient(circle at 90% 8%, rgba(198,84,255,.12), transparent 31rem); }
.pb-header { background: #0a0617; border-bottom-color: #38254f; }
.pb-header::after { background: linear-gradient(90deg,transparent,rgba(188,105,255,.8),transparent); }
.pb-brand-real .pb-brand-full { filter: drop-shadow(0 0 10px rgba(170,72,255,.22)); }
.pb-brand-real .pb-brand-compact { filter: drop-shadow(0 0 9px rgba(174,64,255,.36)); }
.pb-title span { color: var(--emerald-2); }
.pb-btn.primary { box-shadow: 0 6px 24px rgba(151,50,231,.16); }
.pb-nav a.active { border-color:rgba(185,89,254,.5); }