/*
Theme Name: Pixelonien Classic
Author: moti
Version: 5.0
Description: Pixelonien Theme
*/

:root{
    --bg-top:#d7eef4;
    --bg-mid:#d6eef4;
    --bg-bottom:#efe8d2;
    --brown:#8d5a2b;
    --brown-dark:#5c3616;
    --brown-light:#b27a42;
    --cream:#f8f1d9;
    --paper:#fbf4df;
    --green:#7ad12a;
    --green-dark:#4f9d14;
    --glitch:#b13cff;
    --cyan:#20d9ff;
    --text:#4d3218;
}

*{ box-sizing:border-box; }

html,body{
    margin:0;
    padding:0;
}

body{
    font-family: Georgia, serif;
    color:var(--text);
    background:
        radial-gradient(circle at 8% 14%, rgba(255,255,255,.38) 0 70px, transparent 71px),
        radial-gradient(circle at 92% 22%, rgba(255,255,255,.32) 0 78px, transparent 79px),
        linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-mid) 54%, var(--bg-bottom) 100%);
    min-height:100vh;
}

a{
    text-decoration:none;
}

#wpadminbar{
    z-index:999999;
}

.px-page{
    width:min(1620px, calc(100% - 40px));
    margin:0 auto;
}

/* HEADER */
.px-world-header{
    position:relative;
    min-height:900px;
    padding-top:8px;
}

.px-menu-shell{
    position:relative;
    height:258px;
    z-index:60;
}

.px-menu-shell::before{
    content:"";
    position:absolute;
    left:6%;
    right:6%;
    top:0;
    height:168px;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(255,255,255,.78) 10%,
            rgba(255,247,218,.96) 50%,
            rgba(255,255,255,.78) 90%,
            rgba(255,255,255,0)
        ),
        linear-gradient(
            180deg,
            rgba(141,90,43,.14),
            transparent 16%,
            transparent 82%,
            rgba(141,90,43,.14)
        );
    border-bottom:2px solid rgba(141,90,43,.28);
    border-radius:0 0 40px 40px;
    filter:drop-shadow(0 10px 14px rgba(91,53,17,.15));
    transition:height .26s ease;
    z-index:40;
}

.px-menu-shell:hover::before{
    height:294px;
}

.px-top-icons{
    position:relative;
    z-index:90;
    height:132px;
    width:1160px;
    margin:0 auto;
    display:grid;
    grid-template-columns:160px 160px 1fr 160px 160px;
    align-items:start;
    justify-content:center;
    column-gap:18px;
    padding-top:16px;
}

/* LOGO */
.px-logo-area{
    position:relative;
    z-index:100;
    text-align:center;
    padding-top:0;
}

.px-logo-image{
    display:block;
    width:480px;
    max-width:100%;
    height:auto;
    margin:-6px auto 0;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.16));
}

.px-logo-sub{
    display:block;
    margin-top:-10px;
    font-family:"Courier New", monospace;
    font-size:20px;
    font-weight:900;
    letter-spacing:2px;
    color:#f8fff8;
    text-transform:uppercase;
    text-shadow:
        -1px 0 0 var(--cyan),
        1px 0 0 var(--glitch),
        0 2px 0 rgba(0,0,0,.58);
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}

/* TOP ICONS */
.px-top-icon{
    position:relative;
    display:block;
    width:160px;
    height:84px;
    padding-top:54px;
    text-align:center;
    color:#5a3818;
    font-family:"Courier New", monospace;
    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    background:none;
    border:none;
    box-shadow:none;
}

.px-top-icon:hover{
    filter:brightness(1.06);
}

.px-top-icon span{
    position:relative;
    z-index:3;
    display:inline-block;
    padding:2px 7px 1px;
    border-radius:10px;
    background:rgba(255,247,218,.7);
}

.px-top-icon::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:54px;
    height:54px;
    transform:translateX(-50%);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    image-rendering:pixelated;
    z-index:2;
}

.px-icon-1::before{ background-image:url('assets/icon_spiel.png'); }
.px-icon-2::before{ background-image:url('assets/icon_wiki.png'); }
.px-icon-3::before{ background-image:url('assets/icon_community.png'); }
.px-icon-4::before{ background-image:url('assets/icon_support.png'); }

/* DROPDOWN */
.px-mega-menu{
    position:absolute;
    z-index:80;
    top:144px;
    left:50%;
    transform:translateX(-50%);
    width:1160px;
    padding:10px 0 12px;
    display:grid;
    grid-template-columns:160px 160px 1fr 160px 160px;
    column-gap:18px;
    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease .08s;
}

.px-menu-shell:hover .px-mega-menu{
    opacity:1;
    pointer-events:auto;
}

.px-mega-column{
    text-align:center;
}

.px-mega-column-1{ grid-column:1; }
.px-mega-column-2{ grid-column:2; }
.px-mega-column-4{ grid-column:4; }
.px-mega-column-5{ grid-column:5; }

.px-mega-line{
    width:100%;
    height:1px;
    margin:0 auto 10px;
    background:rgba(141,90,43,.28);
}

.px-mega-column a{
    display:block;
    padding:4px 2px;
    color:#5b3918;
    font-size:14px;
    font-weight:700;
}

.px-mega-column a:hover{
    color:#7b1ef0;
}

/* PLAY BUTTON */
.px-play-button{
    position:absolute;
    top:224px;
    left:50%;
    transform:translateX(-50%);
    display:block;
    z-index:58;
    animation:pxFloatPlay 3.6s ease-in-out infinite;
}

.px-play-button::after{
    content:"";
    position:absolute;
    top:8%;
    left:-18%;
    width:24%;
    height:84%;
    transform:skewX(-20deg);
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
    opacity:0;
    transition:opacity .2s ease;
    pointer-events:none;
}

.px-play-button:hover::after{
    opacity:1;
    animation:pxShine 1s ease;
}

.px-play-button img{
    display:block;
    width:520px;
    height:auto;
    filter:drop-shadow(0 10px 16px rgba(85,47,17,.18));
}

@keyframes pxFloatPlay{
    0%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(-8px); }
    100%{ transform:translateX(-50%) translateY(0); }
}

@keyframes pxShine{
    0%{
        left:-18%;
        opacity:0;
    }
    15%{
        opacity:1;
    }
    100%{
        left:108%;
        opacity:0;
    }
}

/* SHOWCASE */
.px-showcase{
    position:absolute;
    top:356px;
    left:50%;
    transform:translateX(-50%);
    width:1340px;
    display:grid;
    grid-template-columns:320px 672px 320px;
    gap:12px;
    align-items:end;
    justify-content:center;
}

.px-character{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:0;
    min-height:370px;
    z-index:12;
}

.px-character img{
    width:auto;
    display:block;
    filter:drop-shadow(0 14px 18px rgba(74,51,27,.18));
}

.px-char-gold{
    max-height:325px;
    margin-right:-8px;
}

.px-char-decorator{
    max-height:318px;
    margin-left:-22px;
    transform:translateX(-8px);
}

.px-char-fashion{
    max-height:316px;
    margin-right:-20px;
    transform:translateX(8px);
}

.px-char-adventure{
    max-height:320px;
    margin-left:-10px;
}

.px-slider-window{
    position:relative;
    width:672px;
    aspect-ratio:16 / 9;
    border:12px solid #8f5b28;
    border-radius:6px;
    background:
        linear-gradient(to bottom, #d7eef6 0%, #d0ebf3 46%, #8ad547 47%, #7acb36 100%);
    box-shadow:
        inset 0 0 0 3px #d4a260,
        inset 0 0 32px rgba(255,255,255,.18),
        0 6px 0 #6d3f18,
        0 14px 22px rgba(91,53,17,.12);
    overflow:hidden;
    z-index:10;
}

.px-slider-window::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid rgba(255,248,220,.35);
    pointer-events:none;
}

.px-slider-window::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:34%;
    background:linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0));
    pointer-events:none;
}

.px-slider-label{
    position:absolute;
    top:14px;
    left:18px;
    z-index:5;
    font-family:"Courier New", monospace;
    font-size:14px;
    font-weight:700;
    color:#fff7e2;
    padding:4px 12px;
    background:#8d775c;
    border-radius:14px;
    letter-spacing:1px;
    box-shadow:0 2px 0 rgba(0,0,0,.2);
}

.px-slide{
    position:absolute;
    inset:0;
    opacity:0;
    animation:pxFadeSlider 12s infinite;
}

.px-slide-1{
    background:
        radial-gradient(circle at 25% 35%, rgba(255,255,255,.24), transparent 14%),
        linear-gradient(to bottom, #d6edf6 0%, #d5edf5 52%, #a7db62 53%, #8dd747 100%);
}

.px-slide-2{
    animation-delay:4s;
    background:
        radial-gradient(circle at 70% 22%, rgba(255,255,255,.24), transparent 14%),
        linear-gradient(to bottom, #d8eef7 0%, #d3ebf2 52%, #98d957 53%, #82cf3f 100%);
}

.px-slide-3{
    animation-delay:8s;
    background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,.24), transparent 14%),
        linear-gradient(to bottom, #d9f0f8 0%, #d7edf4 52%, #a9de65 53%, #8ed64a 100%);
}

.px-slider-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 30%, rgba(255,255,255,.18), transparent 18%),
        radial-gradient(circle at 78% 20%, rgba(255,255,255,.15), transparent 18%);
    z-index:4;
}

@keyframes pxFadeSlider{
    0%{opacity:0;}
    8%{opacity:1;}
    31%{opacity:1;}
    39%{opacity:0;}
    100%{opacity:0;}
}

/* leichte Überlappung ins Bild */
.px-character-left{
    justify-content:flex-end;
    margin-right:-18px;
}

.px-character-right{
    justify-content:flex-start;
    margin-left:-18px;
}

/* CONTENT / NEWS */
.px-content{
    width:1100px;
    margin:448px auto 40px;
}

.px-news{
    background:
        linear-gradient(to bottom, #fff8e6 0%, #f6ead0 100%);
    border:1px solid #9a6836;
    border-radius:10px;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.32),
        0 4px 0 #714117,
        0 16px 22px rgba(91,53,17,.10);
    overflow:hidden;
}

.px-news-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    background:
        linear-gradient(to bottom, #ab6e32, #754019);
    color:#fff0c6;
    border-bottom:1px solid rgba(72,38,12,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.px-news-head h2{
    margin:0;
    font-size:30px;
    text-transform:uppercase;
    letter-spacing:1px;
    text-shadow:1px 1px 0 #4a250e;
}

.px-news-all{
    display:inline-block;
    padding:10px 16px;
    border-radius:12px;
    background:rgba(89,47,20,.40);
    color:#fff5dd;
    font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.px-news-item{
    position:relative;
    padding:28px 28px 46px;
    border-top:1px solid rgba(124,81,36,.14);
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}

.px-news-date{
    color:#8c6b44;
    font-size:14px;
    margin-bottom:10px;
}

.px-news-item h3{
    margin:0 0 14px;
    font-size:28px;
    color:#3b6f10;
}

.px-news-item h3 a{
    color:#3b6f10;
}

.px-news-item p{
    margin:0;
    line-height:1.65;
    font-size:18px;
    color:#5a3818;
    max-width:90%;
}

.px-more{
    position:absolute;
    right:22px;
    bottom:18px;
    color:#3f7f12;
    font-weight:700;
    font-size:17px;
}

/* FOOTER */
.px-footer{
    margin:34px auto 34px;
    width:1100px;
    border-radius:16px;
    background:
        linear-gradient(180deg, #2a2018 0%, #1d1510 100%);
    border:1px solid rgba(143,91,40,.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 20px rgba(0,0,0,.12);
    color:#efe3c4;
    overflow:hidden;
}

.px-footer-inner{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:22px;
    padding:24px 26px;
    align-items:start;
}

.px-footer strong{
    display:block;
    font-size:20px;
    margin-bottom:8px;
    color:#fff4d0;
}

.px-footer span,
.px-footer p{
    margin:0;
    line-height:1.6;
    color:#ddcfb4;
    font-size:15px;
}

.px-footer-badge{
    display:inline-block;
    margin-bottom:10px !important;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(122,209,42,.16);
    color:#d8ffb1 !important;
    border:1px solid rgba(122,209,42,.35);
    font-family:"Courier New", monospace;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* RESPONSIVE */
@media (max-width: 1480px){
    .px-showcase{
        width:1240px;
        grid-template-columns:284px 620px 284px;
    }

    .px-slider-window{
        width:620px;
    }

    .px-character img{
        max-height:300px;
    }

    .px-content,
    .px-footer{
        width:1040px;
    }
}

@media (max-width: 1280px){
    .px-top-icons,
    .px-mega-menu{
        width:1040px;
        grid-template-columns:140px 140px 1fr 140px 140px;
    }

    .px-logo-image{
        width:430px;
    }

    .px-showcase{
        width:1060px;
        grid-template-columns:210px 640px 210px;
    }

    .px-slider-window{
        width:640px;
    }

    .px-character img{
        max-height:270px;
    }

    .px-content,
    .px-footer{
        width:min(1000px, calc(100% - 30px));
    }

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

@media (max-width: 1100px){
    .px-top-icons,
    .px-mega-menu{
        width:920px;
        grid-template-columns:120px 120px 1fr 120px 120px;
    }

    .px-showcase{
        width:900px;
        grid-template-columns:1fr;
    }

    .px-character{
        display:none;
    }

    .px-slider-window{
        width:min(680px, 100%);
        margin:0 auto;
    }

    .px-content{
        margin-top:360px;
        width:min(960px, calc(100% - 20px));
    }

    .px-footer{
        width:min(960px, calc(100% - 20px));
    }
}
/* Fix: Jetzt-spielen-Button über Dropdown-Menü */
.px-play-button{
    z-index: 200 !important;
}

.px-menu-shell{
    z-index: 60 !important;
}

.px-mega-menu{
    z-index: 80 !important;
}

/* Pixelonien Layout Override - aus Live Style Tuner */
.px-world-header{min-height:711px !important;}
.px-menu-shell{height:258px !important;}
.px-menu-shell::before{height:143px !important;}
.px-menu-shell:hover::before{height:235px !important;}
.px-top-icons{width:1160px !important;grid-template-columns:160px 160px 1fr 160px 160px !important;column-gap:18px !important;padding-top:16px !important;}
.px-top-icon{width:160px !important;padding-top:63px !important;}
.px-top-icon::before{width:63px !important;height:63px !important;}
.px-logo-image{width:406px !important;margin-top:-29px !important;}
.px-logo-sub{margin-top:-23px !important;font-size:19px !important;}
.px-mega-menu{top:105px !important;width:1160px !important;grid-template-columns:160px 160px 1fr 160px 160px !important;column-gap:18px !important;padding-top:10px !important;}
.px-play-button{top:185px !important;z-index:200 !important;}
.px-menu-shell{z-index:60 !important;}
.px-mega-menu{z-index:80 !important;}
.px-play-button img{width:462px !important;}
.px-showcase{top:280px !important;width:calc((267px * 2) + 706px + (0px * 2)) !important;grid-template-columns:267px 706px 267px !important;gap:0px !important;}
.px-slider-window{width:706px !important;border-width:4px !important;}
.px-character img{max-height:332px !important;}
.px-character-left{margin-right:-41px !important;}
.px-character-right{margin-left:-41px !important;}
.px-character img.px-char-gold{max-height:332px !important;transform:translate(0px, 0px) !important;}
.px-character img.px-char-decorator{max-height:332px !important;transform:translate(-8px, 0px) !important;}
.px-character img.px-char-fashion{max-height:332px !important;transform:translate(8px, 0px) !important;}
.px-character img.px-char-adventure{max-height:332px !important;transform:translate(0px, 0px) !important;}
.px-content{margin-top:0px !important;width:1166px !important;}
.px-news{border-radius:8px !important;}
.px-footer{width:1450px !important;}
/* Ende Pixelonien Layout Override */