@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
    background:#121214;
    font-family:'Inter',-apple-system,sans-serif;
    color:#ece8e4;
    display:flex;
    justify-content:center;
    min-height:100vh
}

.bg-gif{
    position:fixed;
    inset:0;
    background-image:url('../images/Zappy_Hintergrund.gif');
    background-size:cover;
    background-position:center;
    opacity:0.1;
    z-index:0;
    pointer-events:none
}

#main,#load{position:relative;z-index:1}

/* LOADING */

#load{
    position:fixed;
    inset:0;
    z-index:999;
    background:#121214;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:opacity 0.35s
}
#load.hide{opacity:0;pointer-events:none}

.l-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px
}

.l-dot{
    width:6px;height:6px;
    background:#d4a373;
    border-radius:50%;
    animation:lBounce 0.7s ease infinite alternate
}
@keyframes lBounce{
    0%{transform:translateY(-10px);opacity:0.3}
    100%{transform:translateY(10px);opacity:0.8}
}

.l-title{
    font-size:48px;
    font-weight:900;
    letter-spacing:-2px;
    color:#ece8e4
}

.l-sub{
    font-size:10px;
    font-weight:600;
    letter-spacing:5px;
    text-transform:uppercase;
    color:#ece8e4;
    opacity:0.15
}

/* MAIN */

.hide{display:none!important}

#main{
    width:100%;
    max-width:420px;
    padding:32px 16px 24px;
    animation:ff 0.45s ease
}
@keyframes ff{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

.grid{
    display:flex;
    flex-direction:column;
    gap:14px
}

/* CARDS */

.card{
    background:#1a1a20;
    border-radius:20px;
    padding:24px;
    border:1px solid rgba(255,255,255,0.04)
}

.card-row{
    display:flex;
    gap:14px
}
.card-row .card{flex:1;min-width:0}

/* HERO */

.card-hero{
    position:relative;
    padding:0;
    overflow:hidden;
    border-radius:20px
}

.hero-bg{
    position:absolute;
    inset:0;
    background-image:url('../images/Zappy_Hintergrund.gif');
    background-size:cover;
    background-position:center
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(0,0,0,0.65),rgba(0,0,0,0.5))
}

.hero-inner{
    position:relative;
    z-index:1;
    padding:32px 24px 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px
}

.av{
    width:80px;height:80px;
    border-radius:50%;
    padding:3px;
    background:rgba(212,163,115,0.12);
    display:flex;
    align-items:center;
    justify-content:center
}
.av img{
    width:100%;height:100%;
    border-radius:50%;
    object-fit:cover
}

.nm{
    font-size:52px;
    font-weight:900;
    letter-spacing:-2px;
    line-height:0.95;
    color:#fff;
    text-shadow:0 2px 20px rgba(0,0,0,0.3)
}

.pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center
}
.pills span{
    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:20px;
    background:rgba(255,255,255,0.05);
    color:rgba(255,255,255,0.7);
    border:1px solid rgba(255,255,255,0.06)
}

/* STAT CARDS */

.scard{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:20px 16px;
    text-align:center
}
.scard i{
    font-size:22px;
    color:#d4a373;
    opacity:0.35
}
.sl{
    font-size:10px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#ece8e4;
    opacity:0.25
}
.sbar{
    width:100%;
    height:3px;
    background:#28282e;
    border-radius:3px;
    overflow:hidden
}
.sbar-fill{
    height:100%;
    background:#d4a373;
    border-radius:3px
}

/* TRADING */

.tcard{
    padding:20px 24px
}
.tc-h{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px
}
.tc-h i{
    font-size:16px;
    color:#d4a373;
    opacity:0.3
}
.tc-h span{
    font-size:10px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#ece8e4;
    opacity:0.25
}
.tbar{
    height:4px;
    background:#28282e;
    border-radius:4px;
    overflow:hidden
}
.tbar-fill{
    height:100%;
    width:70%;
    background:linear-gradient(90deg,#d4a373,#e8c4a0);
    border-radius:4px
}

/* MUSIC */

.mcard{
    padding:24px
}
.np-h{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px
}
.np-h span{
    font-size:9px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#ece8e4;
    opacity:0.12
}
.np-dot{
    width:5px;height:5px;
    border-radius:50%;
    background:#d4a373;
    opacity:0;
    transition:opacity 0.2s
}
.np-dot.on{opacity:0.6;animation:pd 1s ease infinite}
@keyframes pd{
    0%,100%{opacity:0.2}
    50%{opacity:0.8}
}

.sn{
    font-size:24px;
    font-weight:800;
    letter-spacing:-0.3px;
    color:#ece8e4;
    line-height:1.1
}
.ar{
    font-size:12px;
    font-weight:400;
    color:#ece8e4;
    opacity:0.15;
    display:block;
    margin-bottom:14px
}

.pr{
    height:3px;
    background:#28282e;
    border-radius:3px;
    overflow:hidden;
    margin-bottom:18px
}
.pr-fill{
    height:100%;
    width:0%;
    background:#d4a373;
    border-radius:3px;
    transition:width 0.3s linear
}

.mc-ctrl{
    display:flex;
    align-items:center;
    gap:14px
}
#pb-btn{
    width:42px;height:42px;
    border-radius:50%;
    border:none;
    background:#d4a373;
    color:#121214;
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:opacity 0.15s
}
#pb-btn:hover{opacity:0.85}
#pb-btn:active{transform:scale(0.95)}

.vol-w{
    flex:1;height:3px;
    background:#28282e;
    border-radius:3px;
    position:relative
}
#vol{
    position:absolute;inset:0;
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    background:transparent;
    outline:none;cursor:pointer;margin:0;height:3px
}
#vol::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:12px;height:12px;
    border-radius:50%;
    background:#d4a373;
    cursor:pointer;border:none;
    box-shadow:0 0 0 4px rgba(212,163,115,0.08)
}
#vol::-moz-range-thumb{
    width:12px;height:12px;
    border-radius:50%;
    background:#d4a373;
    cursor:pointer;border:none
}

/* DISCORD ROW */

.dc-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:20px 12px;
    border:none;
    cursor:pointer;
    font-family:inherit;
    text-align:center;
    background:#1a1a20;
    transition:all 0.15s
}
.dc-btn:hover{background:rgba(88,101,242,0.04)}
.dc-btn:active{transform:scale(0.97)}
.dc-btn i{
    font-size:22px;
    color:#5865f2;
    opacity:0.25
}
.dc-name{
    font-size:12px;
    font-weight:700;
    color:#ece8e4;
    letter-spacing:0.3px
}
.dc-act{
    font-size:9px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#ece8e4;
    opacity:0.1
}

.dc-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:20px 12px;
    text-decoration:none;
    background:#1a1a20;
    transition:all 0.15s
}
.dc-link:hover{background:rgba(88,101,242,0.04)}
.dc-link i{font-size:18px;color:#5865f2;opacity:0.2}
.dc-link span{
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#ece8e4;
    opacity:0.15
}
.dc-link .fa-arrow-right{
    font-size:14px;
    color:#d4a373;
    opacity:0.06
}
.dc-link:hover .fa-arrow-right{transform:translateX(3px)}

/* FOOTER */

.ft{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:20px 0 8px;
    font-size:9px;
    font-weight:400;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#ece8e4;
    opacity:0.06
}
.ft-d{font-size:10px;color:#d4a373;opacity:0.2}

/* TOAST */

#toast{
    position:fixed;
    bottom:40px;
    left:50%;
    transform:translateX(-50%) translateY(16px);
    z-index:1000;
    background:#1a1a20;
    border-radius:20px;
    padding:10px 24px;
    font-size:12px;
    font-weight:600;
    color:#ece8e4;
    box-shadow:0 4px 24px rgba(0,0,0,0.3);
    opacity:0;
    transition:all 0.3s ease;
    pointer-events:none;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,0.04)
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:480px){
    #main{padding:24px 12px 20px}
    .grid{gap:12px}
    .card-row{gap:12px}
    .card{padding:20px}
    .hero-inner{padding:28px 20px 24px}
    .nm{font-size:40px}
    .scard{padding:16px 12px}
    .tcard{padding:16px 20px}
    .mcard{padding:20px}
    .sn{font-size:20px}
    .dc-btn,.dc-link{padding:16px 10px}
}