*{box-sizing:border-box;font-family:Inter,Arial,sans-serif}
body{
 margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
 color:#172945;
}
.bg{
 position:fixed;inset:0;
 background:linear-gradient(135deg,#eaf6ff,#b9dbff);
 z-index:-1;
}
.container{
 width:min(950px,92%);
 padding:40px;
 border-radius:35px;
 background:rgba(255,255,255,.62);
 backdrop-filter:blur(20px);
 box-shadow:0 30px 80px rgba(50,110,190,.22);
}
header{
 height:300px;
 display:flex;
 align-items:center;
 justify-content:space-between;
}
.status{
 display:inline-flex;
 gap:9px;
 align-items:center;
 padding:10px 18px;
 border-radius:25px;
 background:#dcfaea;
 color:#16934c;
 font-weight:700;
}
.status span{
 width:10px;height:10px;border-radius:50%;background:#16d86b;
}
.welcome{
 margin-top:22px;
 letter-spacing:6px;
 color:#6c86ad;
}
h1{
 margin:5px 0;
 font-size:110px;
 line-height:1;
 color:#3982ff;
}
p{
 margin:0;
 color:#617999;
 font-size:19px;
}
.character{
 width:360px;
 height:360px;
 object-fit:contain;
 filter:drop-shadow(0 20px 30px rgba(60,110,200,.25));
}
.line{
 height:1px;background:rgba(100,150,220,.25);
}
.cards{
 margin-top:35px;
 display:grid;
 gap:22px;
}
.card{
 height:150px;
 padding:30px;
 border-radius:30px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 text-decoration:none;
 color:inherit;
 background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(220,237,255,.8));
 box-shadow:0 18px 35px rgba(50,100,180,.15),inset 0 2px 10px white;
}
.card:hover{transform:scale(1.03);box-shadow:0 24px 45px rgba(50,100,180,.22),inset 0 2px 10px white;}
.title{display:flex;align-items:center;gap:15px}
h2{font-size:32px;margin:0}
label{
 background:#d9ffe8;
 color:#13934b;
 padding:5px 12px;
 border-radius:20px;
 font-weight:800;
 font-size:13px;
}
.content p{margin-top:10px}
.count{
 width:120px;height:105px;border-radius:28px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:#e4f1ff;
 box-shadow:inset 0 2px 10px white;
}
.count strong{font-size:42px;color:#3180ff}
.count span{font-weight:700;color:#60799a}
@media(max-width:700px){
 header{height:auto;flex-direction:column-reverse;text-align:center}
 .character{width:260px;height:260px}
 h1{font-size:80px}
 .card{height:auto;min-height:130px}
}


/* ===== BIG animations ===== */

.bg{
    animation:bgMove 18s ease-in-out infinite alternate;
}

@keyframes bgMove{
    from{filter:hue-rotate(0deg) scale(1);}
    to{filter:hue-rotate(8deg) scale(1.05);}
}

.container{
    animation:fadeUp .8s ease both;
}

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

.character{
    animation:float 4s ease-in-out infinite;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

.status span{
    animation:pulse 1.8s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(22,216,107,.5);
    }
    70%{
        box-shadow:0 0 0 12px rgba(22,216,107,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(22,216,107,0);
    }
}

.card{
    opacity:0;
    animation:cardIn .7s ease forwards;
}

.card:nth-child(1){
    animation-delay:.25s;
}

.card:nth-child(2){
    animation-delay:.45s;
}

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

.card{
    position:relative;
    overflow:hidden;
    transition:.35s ease;
}



.card:hover{transform:scale(1.03);box-shadow:0 24px 45px rgba(50,100,180,.22),inset 0 2px 10px white;}


.socials{
 margin-top:22px;
 display:flex;
 align-items:center;
 gap:12px;
}

.discord-btn{
 width:58px;
 height:58px;
 border-radius:18px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 text-decoration:none;
 background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(223,236,255,.85));
 box-shadow:0 14px 28px rgba(50,100,180,.14), inset 0 2px 8px rgba(255,255,255,.95);
 transition:transform .25s ease, box-shadow .25s ease;
}

.discord-btn:hover{
 transform:scale(1.08);
 box-shadow:0 20px 34px rgba(50,100,180,.22), inset 0 2px 8px rgba(255,255,255,.95);
}

.discord-btn svg{
 width:28px;
 height:28px;
 fill:#5865F2;
}

@media(max-width:700px){
 .socials{
  justify-content:center;
 }
}


.discord-link{
    margin-top:22px;
    width:max-content;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 18px;
    border-radius:22px;
    text-decoration:none;
    color:#172945;
    background:rgba(255,255,255,.75);
    box-shadow:0 12px 25px rgba(50,100,180,.12), inset 0 2px 8px white;
    transition:.25s ease;
}

.discord-link img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.discord-link strong{
    display:block;
    font-size:17px;
}

.discord-link span{
    font-size:13px;
    color:#657d9f;
}

.discord-link:hover{
    transform:scale(1.05);
    box-shadow:0 18px 35px rgba(50,100,180,.2), inset 0 2px 8px white;
}

@media(max-width:700px){
    .discord-link{
        margin-left:auto;
        margin-right:auto;
    }
}


.brand-row{
    display:flex;
    align-items:center;
    gap:22px;
}

.discord-mini{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:20px;
    text-decoration:none;
    color:#172945;
    background:rgba(255,255,255,.8);
    box-shadow:0 12px 25px rgba(50,100,180,.14), inset 0 2px 8px white;
    transition:.25s ease;
    margin-top:10px;
}

.discord-mini img{
    width:32px;
    height:32px;
    object-fit:contain;
}

.discord-mini span{
    font-size:15px;
    font-weight:700;
    color:#5865F2;
}

.discord-mini:hover{
    transform:scale(1.06);
    box-shadow:0 18px 35px rgba(50,100,180,.22), inset 0 2px 8px white;
}

@media(max-width:700px){
    .brand-row{
        justify-content:center;
    }
    .discord-mini span{
        display:none;
    }
}


.card{
    cursor:pointer;
}

.card:after{
    content:"OPEN →";
    position:absolute;
    right:30px;
    bottom:18px;
    font-size:12px;
    font-weight:800;
    color:#6b8fc5;
    opacity:0;
    transition:.25s ease;
}

.card:hover:after{
    opacity:1;
}



/* Dashboard hover interaction */
.card{
    position:relative;
    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.card:hover{
    transform:translateY(-8px) scale(1.035);
    box-shadow:
        0 30px 55px rgba(50,100,180,.28),
        inset 0 2px 12px rgba(255,255,255,.95);
}

.card:hover .count{
    transform:scale(1.08);
    background:#d8ebff;
}

.card .count{
    transition:.25s ease;
}

.card:hover .title h2{
    color:#287cff;
}

.card:active{
    transform:scale(.99);
}

.card:after{
    content:"CLICK TO OPEN →";
    position:absolute;
    right:32px;
    top:18px;
    padding:5px 12px;
    border-radius:15px;
    background:#e8f3ff;
    color:#3982ff;
    font-size:11px;
    font-weight:800;
    opacity:0;
    transform:translateY(-8px);
    transition:.25s ease;
}

.card:hover:after{
    opacity:1;
    transform:translateY(0);
}


/* ===== clearer CLICK TO OPEN label + extra responsiveness ===== */
.card:after{
    font-size:14px !important;
    padding:8px 14px !important;
    letter-spacing:.4px;
    border-radius:18px;
}

.card{
    min-width:0;
}

.content{
    min-width:0;
}

.content p{
    max-width:100%;
    word-break:break-word;
}

.title{
    flex-wrap:wrap;
}

.brand-row{
    flex-wrap:wrap;
}

.left{
    min-width:0;
}

@media (max-width: 900px){
    .container{
        width:min(96%, 96%);
        padding:30px;
    }

    header{
        gap:20px;
    }

    .character{
        width:300px;
        height:300px;
    }

    h1{
        font-size:88px;
    }

    .card{
        padding:24px;
    }
}

@media (max-width: 700px){
    .container{
        padding:22px;
        border-radius:28px;
    }

    .brand-row{
        justify-content:center;
        gap:14px;
    }

    .card{
        flex-direction:row;
        align-items:center;
        gap:16px;
    }

    .card:after{
        font-size:12px !important;
        padding:6px 11px !important;
        right:18px;
        top:14px;
    }

    .count{
        width:96px;
        height:88px;
        flex-shrink:0;
    }

    .count strong{
        font-size:34px;
    }

    .count span{
        font-size:12px;
    }

    h2{
        font-size:28px;
    }
}

@media (max-width: 520px){
    .container{
        padding:18px;
    }

    h1{
        font-size:64px;
    }

    .welcome{
        letter-spacing:4px;
        font-size:13px;
    }

    .status{
        padding:8px 14px;
        font-size:14px;
    }

    .character{
        width:220px;
        height:220px;
    }

    .card{
        min-height:120px;
        padding:20px;
        border-radius:24px;
    }

    h2{
        font-size:24px;
    }

    .content p{
        font-size:15px;
    }

    .card:after{
        position:static;
        display:inline-block;
        margin-top:10px;
        opacity:1;
        transform:none;
        font-size:11px !important;
    }
}

@media (min-width: 1200px){
    .container{
        width:min(1000px, 90%);
    }
}


/* mobile dashboard cleanup */
@media(max-width:700px){
    .cards{
        gap:18px;
    }

    .card{
        min-height:125px;
        padding:22px;
        display:flex;
        flex-direction:row;
        align-items:center;
    }

    .content{
        flex:1;
        min-width:0;
    }

    .title{
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
        gap:10px;
    }

    h2{
        font-size:26px;
        white-space:nowrap;
    }

    label{
        flex-shrink:0;
        font-size:12px;
        padding:5px 10px;
    }

    .content p{
        display:none;
    }

    .count{
        width:90px;
        height:85px;
        flex-shrink:0;
    }

    .card:after{
        right:12px;
        top:auto;
        bottom:12px;
        font-size:11px !important;
        padding:5px 9px !important;
    }
}


/* FINAL MOBILE FIX */
@media (max-width:700px){

    .container{
        width:94%;
        padding:20px;
        overflow:hidden;
    }

    header{
        gap:10px;
    }

    .left{
        width:100%;
    }

    .brand-row{
        justify-content:center;
    }

    .discord-mini{
        width:42px;
        height:42px;
        padding:8px;
    }

    .discord-mini span{
        display:none;
    }

    .cards{
        width:100%;
    }

    .card{
        width:100%;
        height:105px;
        min-height:105px;
        padding:18px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
    }

    .content{
        flex:1;
        overflow:hidden;
    }

    .title{
        display:flex;
        align-items:center;
        gap:8px;
        flex-wrap:nowrap;
    }

    .title h2{
        font-size:22px;
        white-space:nowrap;
    }

    label{
        font-size:11px;
        padding:4px 8px;
    }

    .count{
        width:70px;
        height:70px;
        flex-shrink:0;
        border-radius:20px;
    }

    .count strong{
        font-size:28px;
    }

    .count span{
        font-size:10px;
    }

    .card:after{
        content:"→";
        right:14px;
        top:12px;
        font-size:18px !important;
        background:none;
        padding:0 !important;
    }

    .card:hover{
        transform:scale(1.02);
    }
}

@media(max-width:420px){

    h1{
        font-size:62px;
    }

    .character{
        width:210px;
        height:210px;
    }

    .card{
        height:95px;
        padding:15px;
    }

    .title h2{
        font-size:20px;
    }

    label{
        display:none;
    }
}