/* ==================== ROOT & VARIABLES ==================== */
:root {
    --gold: #F59E0B;
    --gold-dark: #D97706;
    --gold-light: #FBBF24;
}

/* ==================== BASE STYLES ==================== */
body {
    font-family: 'Montserrat', sans-serif;
    background: #0F172A;
    color: #F8FAFC;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
}

/* ==================== NAV & LOGO ==================== */
.glass-nav {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.main-navbar {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold) !important;
}

.logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
    font-weight: 900;
    font-size: 1.35rem;
}

.logo-img{
    height:58px;
    width:auto;
    transition:.3s;
}

.logo:hover .logo-img{
    transform:scale(1.03);
}

/* ==================== MENU LINKS ==================== */
.menu-link{
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex-wrap: nowrap;
    white-space: nowrap;

    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;

    padding: 10px 18px !important;
    transition: all .3s ease;
	color: #e2e8f0;
}

.menu-link i {
    font-size: 1.15rem;
    opacity: 0.9;
    flex: 0 0 auto;
    line-height: 1;	
}

.menu-link span{
    display: inline-block;
    white-space: nowrap;
}

.menu-link:hover,
.menu-link.active {
    color: var(--gold) !important;
}

.menu-link:hover i,
.menu-link.active i {
    color: var(--gold);
}

.menu-link::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2.5px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: all 0.3s ease;
}

.menu-link:hover::after,
.menu-link.active::after {
    transform: scaleX(1);
}

.main-menu{
    gap:12px;
}

.menu-link{
    text-transform:uppercase;
    font-size:.9rem;
    letter-spacing:.4px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
}

.menu-link::after{
    bottom:-14px;
    height:3px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    box-shadow:
        0 0 8px rgba(245,158,11,.8),
        0 0 16px rgba(245,158,11,.4);
}

.menu-link.active{
    text-shadow:
        0 0 10px rgba(245,158,11,.5);
}
/*
.main-navbar{
    position:relative;
}

.main-navbar::after{
    content:'';

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(245,158,11,.65),
        transparent
    );
}
*/

/* ==================== BUTTONS ==================== */
.btn-goldz {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
    transition: all 0.3s ease;
}

.btn-goldz:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.btn-gold{
    background: linear-gradient(
        180deg,
        #f8d978 0%,
        #f2c14e 35%,
        #d89b20 100%
    );

    color:#0b0b0b;
    border:1px solid rgba(255,214,102,.55);

    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;

    padding:.8rem 1.8rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 6px 18px rgba(216,155,32,.28);

    transition:all .25s ease;
}

.btn-gold:hover{
    color:#000;

    background: linear-gradient(
        180deg,
        #ffe59d 0%,
        #f6cf69 35%,
        #e1a62a 100%
    );

    transform:translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 10px 26px rgba(216,155,32,.40);
}

.btn-gold:active{
    transform:translateY(0);

    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.18),
        0 3px 10px rgba(216,155,32,.25);
}

.btn-gold:focus{
    color:#000;
    box-shadow:
        0 0 0 .25rem rgba(245, 193, 78, .35);
}

.btn-gold::before{
    content:'';
    position:absolute;
    inset:1px;
    border-radius:inherit;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        transparent 45%
    );

    pointer-events:none;
}

.btn-gold{
    position:relative;
    overflow:hidden;
}

.btn-outline-light {
    border: 2px solid #e2e8f0;
    color: #e2e8f0;
    font-weight: 600;
}

.btn-outline-light:hover {
    background: #fff;
    color: #0F172A;
    border-color: #fff;
}

/* ==================== HERO ==================== */
.heroz {
    background: linear-gradient(135deg, #0F172A, #1E293B);
    padding-top: 90px;
    position: relative;
    overflow: hidden;
}

.hero{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(2,6,23,.97) 0%,
            rgba(2,6,23,.93) 25%,
            rgba(2,6,23,.55) 55%,
            rgba(2,6,23,.20) 100%
        ),
        url('./assets/placeholder.png');

    background-size:cover;
    background-position:center center;

    /*padding-top:90px;*/
}

.hero::before{
    content:'';

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at left center,
            rgba(37,99,235,.20),
            transparent 45%
        );

    pointer-events:none;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
}

.hero .container{
    position:relative;
    z-index:2;
}

.hero .lead{
    max-width:520px;
    font-size:1.4rem;
}

.gold-gradient-text {
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==================== CARDS & SECTIONS ==================== */
.hero-card {
    /*background: #1E293B;*/
    padding: 2rem;
    border-radius: 20px;
	border-color: white;
    height: 100%;
    transition: all 0.3s ease;
}

.feature-card,
.news-card {
    background: #1E293B;
    padding: 2rem;
    border-radius: 20px;
    height: 100%;
    transition: all 0.3s ease;
}

.news-image{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:16px;
}

.news-card{
    overflow:hidden;
}

.feature-card:hover,
.news-card:hover {
    transform: translateY(-8px);
}

.feature-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
}

.dark-section {
    background: #111827;
}

.cta {
    background: linear-gradient(135deg, #2563EB, #06B6D4);
}

/* ==================== HERO IMAGE ==================== */
.hero-image-wrapper {
    padding: 20px;
}

.hero-image {
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    transition: all 0.3s ease;
}

.hero-image:hover {
    transform: translateY(-8px);
}

/* ==================== FOOTER ==================== */
footer {
    background: #020617;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer li {
    margin: 0.4rem 0;
    color: #CBD5E1;
}







main.site-content{
    padding-top:32px;
}

@media (max-width:991.98px){

    main.site-content{
        padding-top:40px;
    }

}












/* ==================== INTERNAL PAGES ==================== */

.page-hero{
    min-height: 360px;
    display: flex;
    align-items: center;
}

.page-hero h1{
    margin-bottom: 1rem;
}

.page-hero .lead{
    margin: 0 auto;
}

.content-card{
    background: #1E293B;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
}

.content-editor h1,
.content-editor h2,
.content-editor h3,
.content-editor h4,
.content-editor h5{
    color: var(--gold-light);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content-editor h1:first-child,
.content-editor h2:first-child{
    margin-top: 0;
}

.content-editor p,
.content-editor li{
    line-height: 1.9;
    color: #e2e8f0;
}

.content-editor ul,
.content-editor ol{
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.content-editor a{
    color: var(--gold-light);
}

.content-editor table{
    width: 100%;
    margin: 1.5rem 0;
}

@media (max-width: 768px){

    .content-card{
        padding: 2rem 1.5rem;
    }

}












/* DASHBOARD */

.dashboard-top{
    margin-top:90px;
}

.dashboard-card{
    background:#1E293B;
    border-radius:20px;
    padding:1.8rem;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
    /*height:100%;*/
}

.player-meta{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.player-meta span{
    color:#cbd5e1;
    font-size:.95rem;
}

.player-meta i{
    color:var(--gold-light);
    margin-right:6px;
}

.stat-card{
    text-align:center;
    padding:1.2rem;
}

.stat-value{
    font-size:2rem;
    font-weight:700;
    color:var(--gold-light);
    line-height:1.1;
}

.stat-title{
    color:#cbd5e1;
    margin-top:.4rem;
    font-size:.95rem;
}

.quick-play-card{
    padding:2.5rem;
}

.section-title{
    color:var(--gold-light);
    margin-bottom:1.5rem;
}

.campaign-item{
    display:flex;
    gap:1.5rem;
    margin-bottom:2rem;
}

.campaign-item:last-child{
    margin-bottom:0;
}

.campaign-image{
    width:180px;
    min-width:180px;
    height:120px;
    object-fit:cover;
    border-radius:16px;
}

.campaign-content{
    flex:1;
}

.progress{
    height:10px;
    background:#0F172A;
    border-radius:20px;
    overflow:hidden;
}

.progress-bar{
    background:var(--gold);
}

.task-list,
.achievement-list,
.ranking-list{
    margin:0;
    padding-left:1.2rem;
	list-style: none;
}

.task-list li,
.achievement-list li,
.ranking-list li{
    margin-bottom:1rem;
    color:#cbd5e1;
}

.task-list li:last-child,
.achievement-list li:last-child,
.ranking-list li:last-child{
    margin-bottom:0;
}

.task-list i,
.achievement-list i{
    color:var(--gold-light);
    margin-right:.5rem;
}

.avatar-image{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--gold);
}

.stat-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:120px;
}

@media (max-width:991px){

    .dashboard-top{
        margin-top:80px;
    }

    .campaign-item{
        flex-direction:column;
    }

    .campaign-image{
        width:100%;
        min-width:100%;
        height:220px;
    }

}

@media (max-width:768px){

    .player-meta{
        flex-direction:column;
        gap:10px;
    }

}



/* AUTH */

.auth-page{
    padding-top:140px;
    padding-bottom:80px;
}

.auth-card{
    max-width:100%;
}

.auth-logo{
    max-width:120px;
    margin-bottom:1.5rem;
}

.auth-title{
    margin-bottom:1rem;
}

.auth-subtitle{
    color:#cbd5e1;
    margin-bottom:0;
}

.form-label{
    color:#e2e8f0;
    font-weight:600;
    margin-bottom:.7rem;
}

.input-group-text{
    background:#0F172A;
    border:1px solid rgba(255,255,255,.1);
    color:var(--gold-light);
}

.form-control{
    background:#0F172A;
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    padding:.85rem 1rem;
}

.form-control:focus{
    background:#0F172A;
    color:#fff;
    border-color:var(--gold);
    box-shadow:none;
}

.form-control::placeholder{
    color:#94a3b8;
}

.btn-password{
    background:#0F172A;
    border:1px solid rgba(255,255,255,.1);
    color:var(--gold-light);
}

.form-check-label{
    color:#cbd5e1;
}

.auth-link{
    color:var(--gold-light);
    text-decoration:none;
}

.auth-link:hover{
    color:#fff;
}

.auth-divider{
    text-align:center;
    margin:2rem 0;
    position:relative;
}

.auth-divider:before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:rgba(255,255,255,.1);
}

.auth-divider span{
    background:#1E293B;
    position:relative;
    padding:0 1rem;
    color:#cbd5e1;
}

.btn-social{
    background:#0F172A;
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    padding:.8rem;
}

.btn-social:hover{
    border-color:var(--gold);
    color:var(--gold-light);
}

.btn-social i{
    margin-right:.5rem;
}





.form-text{
    color:#94a3b8;
    margin-top:.5rem;
    font-size:.9rem;
}

.form-check{
    margin-bottom:.5rem;
}

.form-check-input{
    background-color:#0F172A;
    border-color:rgba(255,255,255,.2);
}

.form-check-input:checked{
    background-color:var(--gold);
    border-color:var(--gold);
}




/* EMAIL VERIFICATION */

.verification-card{
    padding:4rem 3rem;
}

.verification-icon{
    width:120px;
    height:120px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 2rem;
    font-size:4rem;
}

.verification-success{
    background:rgba(34,197,94,.15);
    color:#22c55e;
    border:2px solid rgba(34,197,94,.3);
}

.verification-error{
    background:rgba(239,68,68,.15);
    color:#ef4444;
    border:2px solid rgba(239,68,68,.3);
}

.verification-card .auth-title{
    margin-bottom:1.5rem;
}

.verification-card .auth-subtitle{
    max-width:550px;
    margin-left:auto;
    margin-right:auto;
}

@media (max-width:768px){

    .verification-card{
        padding:3rem 1.5rem;
    }

    .verification-icon{
        width:90px;
        height:90px;
        font-size:3rem;
    }

}









/* ==========================================================
   HERO CARD
   ========================================================== */

.hero-card{

    position:sticky;
    top:110px;

    overflow:hidden;

    padding:0;

    background:#1B2435;

    border:1px solid rgba(255,215,120,.15);

    border-radius:22px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.03);

}



/* декоративен фон */

.hero-card-frame{

    position:relative;

    padding:30px;

    text-align:center;

    background:
        radial-gradient(circle at top,
            rgba(255,215,120,.18),
            transparent 45%),

        linear-gradient(
            180deg,
            #24344D 0%,
            #1B2435 45%,
            #151D2C 100%
        );

}



/* декоративна рамка */

.hero-card-frame:before{

    content:"";

    position:absolute;

    inset:14px;

    border-radius:16px;

    border:2px solid rgba(255,215,120,.35);

    pointer-events:none;

}



.hero-portrait{

    position:relative;

    width:220px;

    height:280px;

    margin:auto;

    overflow:hidden;

    border-radius:18px;

    border:4px solid #C9A64C;

    background:#101826;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 25px rgba(255,215,120,.15);

}



.hero-portrait img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



.hero-level{

    position:absolute;

    top:12px;

    right:12px;

    padding:6px 12px;

    border-radius:30px;

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

    color:#FFD86A;

    font-size:.80rem;

    font-weight:700;

    letter-spacing:.08em;

}



.hero-stars{

    margin-top:22px;

    font-size:1.2rem;

    color:#FFD86A;

    letter-spacing:4px;

}



.hero-name{

    margin-top:18px;

    margin-bottom:8px;

    font-size:2rem;

    color:#fff;

}



.hero-rank{

    color:#B9C4D5;

    font-size:.95rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/* ==========================================================
   SUMMARY
   ========================================================== */

.hero-summary{

    padding:25px 30px;

    border-top:1px solid rgba(255,255,255,.06);

}



.hero-summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}



.hero-summary-row:last-child{

    border-bottom:none;

}



.hero-summary-row span{

    color:#B9C4D5;

}



.hero-summary-row strong{

    color:#FFD86A;

    font-size:1.05rem;

}



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

.hero-card .btn{

    margin:0 30px 12px;

}



.hero-card .btn:last-child{

    margin-bottom:30px;

}



/* ==========================================================
   PREMIUM BADGE
   ========================================================== */

.premium-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(255,215,120,.12);

    border:1px solid rgba(255,215,120,.30);

    color:#FFD86A;

    font-weight:600;

}



/* ==========================================================
   PAYMENT TABLE
   ========================================================== */

.table-dark{

    background:transparent;

}



.table-dark th,
.table-dark td{

    background:transparent;

    border-color:rgba(255,255,255,.08);

}



.table-dark tbody tr:hover{

    background:rgba(255,255,255,.03);

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:991px){

    .hero-card{

        position:static;

    }

}



@media (max-width:575px){

    .hero-portrait{

        width:180px;

        height:230px;

    }

    .hero-name{

        font-size:1.6rem;

    }

}
















/* =======================================================
   CAMPAIGNS v1
======================================================= */

.page-header{

    text-align:center;

}

.page-header h1{

    margin-bottom:15px;

}

.page-header p{

    max-width:760px;

    margin:auto;

    color:#c9d2df;

}

.campaign-filters{

    padding:30px;

}

.campaign-card{

    overflow:hidden;

    padding:0;

    transition:.25s;

}

.campaign-card:hover{

    transform:translateY(-6px);

}

.campaign-thumb{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

}

.campaign-body{

    padding:28px;

}

.campaign-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:15px;

}

.campaign-top h3{

    margin:0;

}

.campaign-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin:22px 0;

    color:#d3d9e4;

}

.campaign-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.campaign-progress{

    margin-bottom:25px;

}

.campaign-progress small{

    display:block;

    margin-top:8px;

    color:#b6bfd0;

}

.campaign-actions{

    display:flex;

    gap:15px;

}

.pagination .page-link{

    background:#202a3b;

    border:none;

    color:white;

    margin:0 4px;

}

.pagination .active .page-link{

    background:var(--gold);

    color:black;

}

@media(max-width:768px){

    .campaign-top{

        flex-direction:column;

    }

    .campaign-actions{

        flex-direction:column;

    }

}






/* ==========================================================
   CAMPAIGN PAGE v2
   ========================================================== */

.campaign-filter-bar{
    padding:30px;
}

/* ==========================================================
   BOARD CARD
   ========================================================== */

.campaign-board-card{

    position:relative;

    height:100%;

    border-radius:22px;

    overflow:hidden;

    background:#1a2334;

    border:2px solid rgba(214,175,82,.35);

    box-shadow:
        0 15px 35px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.campaign-board-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.45),
        0 0 30px rgba(214,175,82,.20);

}



/* ==========================================================
   GOLD FRAME
   ========================================================== */

.campaign-frame{

    position:relative;

    margin:16px;

    border-radius:16px;

    overflow:hidden;

    border:4px solid #c7a64a;

    background:#000;

    box-shadow:
        inset 0 0 25px rgba(255,215,0,.18),
        0 0 18px rgba(255,215,0,.10);

}

.campaign-frame img{

    width:100%;

    height:250px;

    display:block;

    object-fit:cover;

}

.campaign-frame::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.65),
            rgba(0,0,0,0) 45%
        );

    pointer-events:none;

}



/* ==========================================================
   RIBBON
   ========================================================== */

.campaign-ribbon{

    position:absolute;

    top:26px;

    right:-38px;

    width:170px;

    text-align:center;

    padding:10px 0;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.12em;

    color:#111;

    transform:rotate(45deg);

    z-index:20;

    box-shadow:0 6px 15px rgba(0,0,0,.25);

}

.campaign-ribbon.free{

    background:linear-gradient(#7ce77c,#3bb54a);

}

.campaign-ribbon.premium{

    background:linear-gradient(#ffe89c,#d6af52);

}



/* ==========================================================
   DIFFICULTY
   ========================================================== */

.campaign-difficulty{

    position:absolute;

    left:15px;

    bottom:15px;

    z-index:10;

    padding:8px 15px;

    border-radius:30px;

    font-size:.82rem;

    font-weight:600;

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

}

.campaign-difficulty.easy{

    background:rgba(46,204,113,.75);

}

.campaign-difficulty.medium{

    background:rgba(243,156,18,.80);

}

.campaign-difficulty.hard{

    background:rgba(231,76,60,.82);

}



/* ==========================================================
   SCROLL
   ========================================================== */

.campaign-scroll{

    position:relative;

    margin:0 16px 16px;

    padding:26px;

    border-radius:14px;

    background:

        linear-gradient(
            180deg,
            #efe2bc 0%,
            #e4d1a2 100%
        );

    color:#2d2212;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.08);

}

.campaign-scroll::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:12px;

    background:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.45),
            transparent
        );

}

.campaign-scroll h3{

    margin-bottom:15px;

    color:#342514;

    font-size:1.45rem;

}

.campaign-scroll p{

    color:#4a3c27;

    line-height:1.7;

    margin-bottom:22px;

}



/* ==========================================================
   STATS
   ========================================================== */

.campaign-stats{

    display:flex;

    justify-content:space-between;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:18px;

    font-weight:600;

}

.campaign-stats div{

    display:flex;

    align-items:center;

    gap:8px;

}

.campaign-stats i{

    color:#9d6d12;

}



/* ==========================================================
   TAGS
   ========================================================== */

.campaign-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.campaign-tags span{

    background:rgba(111,83,28,.12);

    border:1px solid rgba(111,83,28,.20);

    color:#5b421b;

    padding:7px 14px;

    border-radius:20px;

    font-size:.82rem;

}



/* ==========================================================
   PROGRESS
   ========================================================== */

.campaign-progress{

    margin-bottom:25px;

}

.campaign-progress .progress{

    height:10px;

    background:#c9b27d;

}

.campaign-progress .progress-bar{

    background:linear-gradient(
        90deg,
        #d6af52,
        #f5d87f
    );

}

.campaign-progress small{

    display:block;

    margin-top:8px;

    color:#6b5731;

}



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

.campaign-buttons{

    display:flex;

    gap:12px;

}

.campaign-buttons .btn{

    flex:1;

}



/* ==========================================================
   PAGINATION
   ========================================================== */

.pagination .page-link{

    background:#1d2738;

    color:#fff;

    border:none;

    margin:0 3px;

    border-radius:8px;

}

.pagination .page-item.active .page-link{

    background:linear-gradient(
        #f5d87f,
        #d6af52
    );

    color:#111;

}



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

@media (max-width:991px){

    .campaign-frame img{

        height:220px;

    }

}

@media (max-width:767px){

    .campaign-buttons{

        flex-direction:column;

    }

    .campaign-scroll{

        padding:22px;

    }

    .campaign-stats{

        flex-direction:column;

        gap:10px;

    }

    .campaign-ribbon{

        right:-46px;

    }

}













/* ==========================================================
   EPIC CAMPAIGN CARDS v3
========================================================== */

.campaign-card-epic{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    transition:.35s;

}

.campaign-card-epic:hover{

    transform:translateY(-8px);

}



/* ==========================================================
   METAL FRAME
========================================================== */

.campaign-metal-frame{

    position:relative;

    padding:14px;

    border-radius:22px;

    background:
        linear-gradient(145deg,
            #8b6a2c 0%,
            #d7b252 18%,
            #f6dd8c 35%,
            #c79932 52%,
            #7d5d1d 100%);

    box-shadow:
        0 12px 35px rgba(0,0,0,.35),
        inset 0 0 0 2px rgba(255,255,255,.18),
        inset 0 0 12px rgba(255,255,255,.25);

}

.campaign-card-epic:hover .campaign-metal-frame{

    box-shadow:
        0 20px 40px rgba(0,0,0,.45),
        0 0 25px rgba(214,175,82,.35),
        inset 0 0 0 2px rgba(255,255,255,.25);

}



/* ==========================================================
   IMAGE
========================================================== */

.campaign-image{

    position:relative;

    overflow:hidden;

    border-radius:14px;

    border:2px solid rgba(255,255,255,.15);

}

.campaign-image img{

    display:block;

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.4s;

}

.campaign-card-epic:hover img{

    transform:scale(1.05);

}

.campaign-image::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:45%;

    background:

        linear-gradient(to top,
            rgba(0,0,0,.65),
            rgba(0,0,0,0));

}



/* ==========================================================
   RARITY
========================================================== */

.campaign-rarity{

    position:absolute;

    top:18px;

    left:-38px;

    width:160px;

    text-align:center;

    transform:rotate(-45deg);

    padding:8px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    z-index:20;

    color:#111;

    box-shadow:0 6px 12px rgba(0,0,0,.35);

}

.campaign-rarity.free{

    background:#4bd26f;

}

.campaign-rarity.premium{

    background:linear-gradient(#ffe28d,#d6af52);

}



/* ==========================================================
   EMBLEM
========================================================== */

.campaign-emblem{

    position:absolute;

    right:18px;

    bottom:18px;

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(circle,
            #f5dc8a,
            #c99b31);

    border:3px solid rgba(255,255,255,.25);

    color:#332300;

    font-size:1.5rem;

    box-shadow:
        0 0 18px rgba(255,215,0,.35);

    z-index:5;

}



/* ==========================================================
   TITLE PLAQUE
========================================================== */

.campaign-title-plaque{

    position:relative;

    margin:-18px auto 0;

    padding:14px 35px;

    width:85%;

    border-radius:10px;

    text-align:center;

    font-family:'Orbitron',sans-serif;

    font-size:1.15rem;

    color:#2b1f0c;

    background:

        linear-gradient(#f4e2a9,#d5b26b);

    border:2px solid #7d5d1d;

    box-shadow:
        0 6px 16px rgba(0,0,0,.25);

    z-index:30;

}



/* ==========================================================
   SCROLL
========================================================== */

.campaign-scroll{

    flex:1;

    margin-top:-8px;

    padding:45px 28px 30px;

    border-radius:0 0 18px 18px;

    background:

        linear-gradient(#f1e6c4,#e3d3a4);

    color:#45341d;

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.08);

}

.campaign-scroll p{

    line-height:1.7;

    margin-bottom:25px;

}



/* ==========================================================
   ICONS
========================================================== */

.campaign-icons{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.campaign-icons div{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

}

.campaign-icons i{

    color:#a87412;

}



/* ==========================================================
   TAGS
========================================================== */

.campaign-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;

}

.campaign-tags span{

    padding:6px 14px;

    border-radius:30px;

    background:#d6c08b;

    color:#5c4316;

    font-size:.82rem;

}



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

.campaign-footer{

    display:flex;

    gap:12px;

}

.campaign-footer .btn{

    flex:1;

}



/* ==========================================================
   PAGINATION
========================================================== */

.pagination .page-link{

    background:#1d2738;

    border:none;

    color:#fff;

    margin:0 4px;

}

.pagination .page-item.active .page-link{

    background:var(--gold);

    color:#111;

}



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

@media(max-width:992px){

    .campaign-image img{

        height:230px;

    }

}

@media(max-width:768px){

    .campaign-footer{

        flex-direction:column;

    }

    .campaign-icons{

        flex-direction:column;

    }

    .campaign-title-plaque{

        width:92%;

        font-size:1rem;

    }

}














/* ==========================================================
   CAMPAIGN DETAILS
==========================================================*/

.campaign-details{
    margin-bottom:60px;
}

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

.campaign-hero{

    position:relative;

    overflow:hidden;

    border-radius:20px;

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

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.campaign-hero img{

    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

}

.campaign-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:60px;

    background:
        linear-gradient(to top,
            rgba(10,15,25,.92) 0%,
            rgba(10,15,25,.55) 45%,
            rgba(10,15,25,.05) 100%);

}

.campaign-header{

    max-width:720px;

}

.campaign-header h1{

    margin:20px 0;

}

.campaign-header p{

    font-size:1.15rem;

    margin-bottom:35px;

    color:#d2d7df;

}

.campaign-actions{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.campaign-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:var(--gold);

    color:#111;

    font-weight:700;

    letter-spacing:.05em;

}



/* ==========================================================
   LEARNING
==========================================================*/

.learning-grid{

    display:grid;

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

    gap:18px;

}

.learn-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:12px;

    background:rgba(255,255,255,.04);

}

.learn-item i{

    font-size:1.6rem;

    color:var(--gold);

}



/* ==========================================================
   GALLERY
==========================================================*/

.gallery-grid{

    display:grid;

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

    gap:20px;

}

.gallery-grid img{

    width:100%;

    border-radius:12px;

    display:block;

}



/* ==========================================================
   REWARDS
==========================================================*/

.reward-grid{

    display:grid;

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

    gap:22px;

}

.reward-card{

    text-align:center;

    padding:20px;

    border-radius:14px;

    background:rgba(255,255,255,.03);

    transition:.25s;

}

.reward-card:hover{

    transform:translateY(-5px);

}

.reward-card img{

    width:100%;

    border-radius:10px;

    margin-bottom:15px;

}

.reward-card h5{

    margin-bottom:8px;

}



/* ==========================================================
   RIGHT COLUMN
==========================================================*/

.campaign-side h3{

    margin-bottom:25px;

}

.campaign-specs{

    list-style:none;

    padding:0;

    margin:0;

}

.campaign-specs li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.campaign-specs li:last-child{

    border-bottom:none;

}

.campaign-specs strong{

    color:#fff;

}



/* ==========================================================
   REQUIREMENTS
==========================================================*/

.campaign-requirements{

    padding-left:20px;

    margin:0;

}

.campaign-requirements li{

    margin-bottom:12px;

}



/* ==========================================================
   RELATED
==========================================================*/

.related-campaign{

    display:flex;

    align-items:center;

    gap:15px;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.2s;

    cursor:pointer;

}

.related-campaign:last-child{

    border-bottom:none;

}

.related-campaign:hover{

    transform:translateX(5px);

}

.related-campaign img{

    width:90px;

    height:70px;

    object-fit:cover;

    border-radius:10px;

}



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

@media (max-width:991px){

    .campaign-overlay{

        padding:35px;

    }

    .campaign-hero img{

        height:420px;

    }

    .reward-grid{

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

    }

}

@media (max-width:768px){

    .campaign-overlay{

        padding:25px;

    }

    .campaign-header h1{

        font-size:2rem;

    }

    .campaign-actions{

        flex-direction:column;

    }

    .campaign-actions .btn{

        width:100%;

    }

    .learning-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .reward-grid{

        grid-template-columns:1fr;

    }

    .campaign-hero img{

        height:320px;

    }

}


















/* ==========================================================
   RANKINGS
========================================================== */

.ranking-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}

.ranking-tabs .btn{
    min-width:150px;
}


/* ==========================================================
   PODIUM
========================================================== */

.podium-card{

    position:relative;

    text-align:center;

    padding:30px 25px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

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

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    transition:.25s;

    overflow:hidden;

}

.podium-card:hover{

    transform:translateY(-6px);

}

.podium-card.first{

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

    transform:scale(1.05);

}

.podium-card.first:hover{

    transform:scale(1.05) translateY(-6px);

}

.podium-card.second{

    margin-top:35px;

}

.podium-card.third{

    margin-top:55px;

}

.podium-place{

    font-size:2.5rem;

    margin-bottom:12px;

}

.podium-avatar{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.12);

    margin-bottom:20px;

}

.podium-card.first .podium-avatar{

    border-color:var(--gold);

}

.podium-title{

    color:#cfcfcf;

    margin-top:8px;

    margin-bottom:12px;

}

.podium-score{

    font-size:1.15rem;

    color:var(--gold);

    font-weight:700;

}



/* ==========================================================
   TABLE
========================================================== */

.ranking-table{

    display:flex;

    flex-direction:column;

}

.ranking-row{

    display:grid;

    grid-template-columns:
        70px
        1.8fr
        1fr
        120px
        120px;

    align-items:center;

    gap:20px;

    padding:16px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.2s;

}

.ranking-row:last-child{

    border-bottom:none;

}

.ranking-row:hover{

    background:rgba(255,255,255,.04);

}

.ranking-head{

    font-weight:700;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.06em;

    background:rgba(255,255,255,.03);

}

.player-cell{

    display:flex;

    align-items:center;

    gap:15px;

    font-weight:600;

}

.player-cell img{

    width:54px;

    height:54px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.15);

}



/* ==========================================================
   CURRENT PLAYER
========================================================== */

.my-ranking{

    border:2px solid rgba(214,175,82,.45);

}

.current-player{

    background:rgba(214,175,82,.10);

    border-radius:12px;

    border:1px solid rgba(214,175,82,.25);

}



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

@media (max-width:991px){

    .podium-card.first{

        transform:none;

    }

    .podium-card.first:hover{

        transform:translateY(-6px);

    }

    .podium-card.second,
    .podium-card.third{

        margin-top:0;

    }

}

@media (max-width:768px){

    .ranking-tabs{

        flex-direction:column;

    }

    .ranking-tabs .btn{

        width:100%;

    }

    .ranking-row{

        grid-template-columns:
            55px
            1fr;

        gap:10px;

    }

    .ranking-head{

        display:none;

    }

    .ranking-row > div:nth-child(3),
    .ranking-row > div:nth-child(4),
    .ranking-row > div:nth-child(5){

        margin-left:65px;

        color:#cfcfcf;

        font-size:.95rem;

    }

    .player-cell img{

        width:46px;

        height:46px;

    }

    .podium-avatar{

        width:95px;

        height:95px;

    }

}















/* ==========================================================
   NEWS LIST
========================================================== */

.news-list{

    display:flex;

    flex-direction:column;

    gap:30px;

}



/* ==========================================================
   NEWS CARD
========================================================== */

.news-card{

    display:flex;

    gap:30px;

    align-items:stretch;

    transition:.25s;

}

.news-card:hover{

    transform:translateY(-4px);

}



/* ==========================================================
   THUMBNAIL
========================================================== */

.news-thumb{

    flex:0 0 320px;

}

.news-thumb img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:12px;

    display:block;

}



/* ==========================================================
   CONTENT
========================================================== */

.news-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.news-content h2{

    margin:10px 0 18px;

    font-size:1.9rem;

    line-height:1.25;

}

.news-content p{

    flex:1;

    color:#d4d8df;

    line-height:1.8;

    margin-bottom:25px;

}



/* ==========================================================
   META
========================================================== */

.news-meta{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    color:#9ea9bb;

    font-size:.92rem;

}

.news-meta span{

    display:flex;

    align-items:center;

}

.news-meta i{

    color:var(--gold);

}



/* ==========================================================
   BUTTON
========================================================== */

.news-content .btn{

    align-self:flex-start;

}



/* ==========================================================
   PAGINATION
========================================================== */

.pagination{

    margin-top:10px;

}

.pagination .page-link{

    min-width:44px;

    text-align:center;

}



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

@media (max-width:991px){

    .news-card{

        flex-direction:column;

    }

    .news-thumb{

        flex:auto;

    }

    .news-thumb img{

        height:280px;

    }

}

@media (max-width:768px){

    .news-thumb img{

        height:220px;

    }

    .news-content h2{

        font-size:1.45rem;

    }

    .news-meta{

        gap:12px;

        font-size:.85rem;

    }

    .news-content .btn{

        width:100%;

    }

}







/* ==========================================================
   NEWS DETAILS
========================================================== */

.news-hero{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    margin-bottom:35px;

    box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.news-hero img{

    width:100%;

    height:500px;

    display:block;

    object-fit:cover;

}

.news-hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    background:
        linear-gradient(
            to top,
            rgba(8,12,22,.92) 0%,
            rgba(8,12,22,.55) 45%,
            rgba(8,12,22,0) 100%
        );

}

.news-hero-content{

    padding:50px;

    max-width:900px;

}

.news-hero-content h1{

    margin:18px 0 0;

    font-size:3rem;

    line-height:1.15;

}

.news-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:var(--gold);

    color:#111;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.05em;

}



/* ==========================================================
   META
========================================================== */

.news-meta-card{

    margin-bottom:35px;

}

.news-meta-row{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    justify-content:flex-start;

}

.news-meta-row div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#d5d9df;

}

.news-meta-row i{

    color:var(--gold);

    font-size:1.15rem;

}



/* ==========================================================
   ARTICLE
========================================================== */

.article-card{

    margin-bottom:60px;

}

.article-content{

    max-width:920px;

    margin:0 auto;

    font-size:1.08rem;

    line-height:1.95;

}

.article-content p{

    margin-bottom:22px;

}

.article-content h2{

    margin-top:45px;

    margin-bottom:20px;

}

.article-content ul{

    padding-left:28px;

    margin-bottom:30px;

}

.article-content li{

    margin-bottom:10px;

}

.article-content blockquote{

    margin:40px 0;

    padding:25px 30px;

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

    background:rgba(255,255,255,.04);

    border-radius:0 12px 12px 0;

    font-size:1.2rem;

    font-style:italic;

    color:#f2f2f2;

}



/* ==========================================================
   RELATED NEWS
========================================================== */

.related-news-section{

    margin-top:20px;

}

.related-news-card{

    overflow:hidden;

    transition:.25s;

}

.related-news-card:hover{

    transform:translateY(-6px);

}

.related-news-card img{

    width:100%;

    height:210px;

    object-fit:cover;

    display:block;

}

.related-news-content{

    padding-top:20px;

}

.related-news-content h4{

    margin-bottom:15px;

    line-height:1.35;

}

.related-news-content p{

    color:#cfd5dd;

    margin-bottom:22px;

    line-height:1.7;

}



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

@media (max-width:992px){

    .news-hero img{

        height:400px;

    }

    .news-hero-content{

        padding:35px;

    }

    .news-hero-content h1{

        font-size:2.4rem;

    }

}



@media (max-width:768px){

    .news-hero img{

        height:280px;

    }

    .news-hero-content{

        padding:25px;

    }

    .news-hero-content h1{

        font-size:1.9rem;

    }

    .news-meta-row{

        flex-direction:column;

        gap:14px;

    }

    .article-content{

        font-size:1rem;

        line-height:1.8;

    }

}







/* ==========================================================
   FAQ
========================================================== */

.quick-help-card{

    display:block;

    height:100%;

    text-decoration:none;

    color:inherit;

    text-align:center;

    transition:.25s;

}

.quick-help-card:hover{

    transform:translateY(-6px);

    text-decoration:none;

    color:inherit;

}

.quick-help-icon{

    width:74px;

    height:74px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    background:rgba(214,175,82,.12);

    border:2px solid rgba(214,175,82,.35);

    color:var(--gold);

}

.quick-help-card h4{

    margin-bottom:10px;

}

.quick-help-card p{

    margin:0;

    color:#bfc7d4;

}



/* ==========================================================
   ACCORDION
========================================================== */

.faq-accordion{

    --bs-accordion-bg:transparent;

    --bs-accordion-border-width:0;

    --bs-accordion-btn-focus-box-shadow:none;

    --bs-accordion-btn-padding-x:26px;

    --bs-accordion-btn-padding-y:22px;

    --bs-accordion-active-bg:rgba(255,255,255,.04);

    --bs-accordion-active-color:#fff;

    --bs-accordion-color:#fff;

}

.faq-accordion .accordion-item{

    background:rgba(255,255,255,.03);

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

    border-radius:14px;

    margin-bottom:16px;

    overflow:hidden;

}

.faq-accordion .accordion-button{

    background:transparent;

    color:#fff;

    font-weight:600;

    font-size:1.08rem;

}

.faq-accordion .accordion-button:hover{

    background:rgba(255,255,255,.03);

}

.faq-accordion .accordion-button:not(.collapsed){

    color:var(--gold);

    box-shadow:none;

}

.faq-accordion .accordion-button::after{

    filter:invert(1);

    opacity:.75;

}

.faq-accordion .accordion-button:not(.collapsed)::after{

    filter:none;

}

.faq-accordion .accordion-body{

    color:#d0d7df;

    line-height:1.8;

    padding:0 26px 24px;

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .quick-help-card{

        padding:24px;

    }

    .quick-help-icon{

        width:60px;

        height:60px;

        font-size:1.6rem;

    }

    .faq-accordion .accordion-button{

        font-size:1rem;

        padding:18px 20px;

    }

    .faq-accordion .accordion-body{

        padding:0 20px 20px;

    }

}














/* ==========================================================
   AUTH PAGES
   Forgot password / Change password / Email sent / Link expired
========================================================== */

.auth-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:2.6rem;

    color:var(--gold);

    background:rgba(214,175,82,.10);

    border:2px solid rgba(214,175,82,.35);

    box-shadow:
        inset 0 0 18px rgba(214,175,82,.12),
        0 10px 25px rgba(0,0,0,.18);

}



/* ==========================================================
   SUCCESS
========================================================== */

.auth-icon.success{

    color:#49d17d;

    background:rgba(73,209,125,.10);

    border-color:rgba(73,209,125,.35);

}



/* ==========================================================
   ERROR
========================================================== */

.auth-icon.error{

    color:#ff7a6a;

    background:rgba(255,122,106,.10);

    border-color:rgba(255,122,106,.35);

}



/* ==========================================================
   AUTH TEXT
========================================================== */

.auth-card p{

    line-height:1.8;

}

.auth-card .text-muted{

    color:#b8c0cc !important;

}



/* ==========================================================
   SMALL LINKS
========================================================== */

.auth-card a{

    text-decoration:none;

    transition:.2s;

}

.auth-card a:hover{

    color:var(--gold);

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .auth-icon{

        width:72px;

        height:72px;

        font-size:2rem;

        margin-bottom:22px;

    }

}



















/* =======================================================
   ARTIFACT COLLECTION
======================================================= */

.artifact-header{
    overflow:hidden;
}

.artifact-progress{
    height:12px;
    margin:15px 0 8px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
}

.artifact-progress .progress-bar{
    background:linear-gradient(90deg,#b8860b,#f4d35e,#fff3a3);
}

.artifact-album{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:30px;
}



/* =======================================================
   CARD
======================================================= */

.artifact-card{

    position:relative;

    background:linear-gradient(180deg,#21262f,#171b21);

    border:2px solid rgba(255,215,120,.25);

    border-radius:18px;

    padding:18px;

    text-align:center;

    transition:.30s;

    cursor:pointer;

    overflow:hidden;

    box-shadow:
        0 0 0 1px rgba(255,215,120,.06),
        0 10px 30px rgba(0,0,0,.35);

}

.artifact-card:hover{

    transform:translateY(-8px);

    border-color:#f1c75b;

    box-shadow:
        0 18px 45px rgba(0,0,0,.55),
        0 0 25px rgba(241,199,91,.18);

}

.artifact-card::before{

    content:"";

    position:absolute;

    inset:8px;

    border:1px solid rgba(255,215,120,.18);

    border-radius:12px;

    pointer-events:none;

}



/* =======================================================
   IMAGE
======================================================= */

.artifact-card img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:18px;

    border:2px solid rgba(255,215,120,.20);

}

.artifact-card h5{

    margin-bottom:8px;

}

.artifact-card p{

    margin:0;

    opacity:.8;

    font-size:.92rem;

}



/* =======================================================
   RARITY
======================================================= */

.artifact-rarity{

    position:absolute;

    top:15px;

    right:15px;

    padding:5px 10px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:700;

    backdrop-filter:blur(10px);

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

}

.legendary{

    color:#ffd54d;

}

.epic{

    color:#cf8dff;

}

.rare{

    color:#71b8ff;

}



/* =======================================================
   LOCKED
======================================================= */

.artifact-card.locked{

    filter:grayscale(100%);

    opacity:.65;

}

.artifact-card.locked img{

    filter:brightness(.35);

}

.artifact-lock{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:4rem;

    color:#c8c8c8;

    z-index:3;

    text-shadow:0 0 20px rgba(255,255,255,.25);

}

.artifact-card.locked:hover{

    transform:none;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

}



/* =======================================================
   MODAL
======================================================= */

/* Бутон за затваряне на модала */
.artifact-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:1056;

    width:42px;
    height:42px;

    padding:0;
    border-radius:50%;

    background-color:rgba(255,255,255,.45);
    background-size:14px;
    opacity:1;

    transition:all .2s ease;
}

.artifact-modal-close:hover{
    background-color:#d4af37;
    transform:scale(1.08);
}

.artifact-modal-close:focus{
    box-shadow:none;
}


#artifactModal .modal-content{

    background:linear-gradient(180deg,#242b36,#171b21);

    border:2px solid rgba(255,215,120,.25);

    border-radius:24px;

    color:#fff;

}

.artifact-large-image{

    width:100%;

    max-width:420px;

    border-radius:18px;

    border:3px solid rgba(255,215,120,.30);

    box-shadow:
        0 15px 45px rgba(0,0,0,.45);

}

.artifact-subtitle{

    color:#f3cf6b;

    font-weight:600;

    margin-bottom:25px;

}

#artifactModal h4{

    margin-top:28px;

    margin-bottom:10px;

    color:#f3cf6b;

}

#artifactModal ul{

    padding-left:20px;

}

#artifactModal li{

    margin-bottom:8px;

}



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

@media (max-width:991px){

    .artifact-album{

        grid-template-columns:
        repeat(auto-fill,minmax(170px,1fr));

        gap:20px;

    }

}

@media (max-width:576px){

    .artifact-album{

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

    }

}









/* ==========================================================
   HALL OF FAME
   ========================================================== */

.hall-card{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:2rem 1.5rem;
}

.hall-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top,
        rgba(212,175,55,.18),
        transparent 60%);
    pointer-events:none;
}

.hall-crown{
    width:72px;
    height:72px;
    margin:0 auto 1rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    color:#2b1b05;
    background:linear-gradient(#f7de8a,#d4af37);
    box-shadow:
        0 0 20px rgba(212,175,55,.45),
        inset 0 2px 2px rgba(255,255,255,.4);
}

.hall-avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #d4af37;
    margin-bottom:1rem;
    box-shadow:0 0 25px rgba(212,175,55,.35);
}

.timeline{
    position:relative;
    padding-left:30px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:8px;
    top:6px;
    bottom:6px;
    width:2px;
    background:#d4af37;
}

.timeline-item{
    position:relative;
    padding-left:22px;
    margin-bottom:1.8rem;
}

.timeline-item:last-child{
    margin-bottom:0;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:-1px;
    top:6px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#d4af37;
    border:3px solid #1b1f28;
}

.timeline-item strong{
    color:#f2d26b;
}

.table-dark{
    --bs-table-bg:transparent;
    --bs-table-striped-bg:rgba(255,255,255,.03);
    --bs-table-hover-bg:rgba(212,175,55,.08);
    --bs-table-border-color:rgba(255,255,255,.08);
}

.table-dark th{
    color:#f2d26b;
    font-weight:600;
}

.table-dark td{
    vertical-align:middle;
}

.badge.bg-warning{
    background:#d4af37 !important;
    color:#221a0b !important;
    font-weight:600;
    padding:.5rem .8rem;
}



/* ==========================================================
   TEAM
   ========================================================== */

.team-card{
    text-align:center;
    transition:.25s;
}

.team-card:hover{
    transform:translateY(-6px);
}

.team-photo{
    width:140px;
    height:140px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #d4af37;
    margin-bottom:1.2rem;
    box-shadow:0 0 25px rgba(212,175,55,.35);
}

.team-role{
    display:inline-block;
    margin-bottom:1rem;
    padding:.35rem .9rem;
    border-radius:30px;
    background:rgba(212,175,55,.15);
    color:#f2d26b;
    font-size:.9rem;
    font-weight:600;
    border:1px solid rgba(212,175,55,.35);
}

.team-card p{
    min-height:72px;
}

.team-social{
    display:flex;
    justify-content:center;
    gap:.8rem;
    margin-top:1rem;
}

.team-social a{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#d4af37;
    border:1px solid rgba(212,175,55,.35);
    background:rgba(255,255,255,.03);
    transition:.25s;
}

.team-social a:hover{
    background:#d4af37;
    color:#221a0b;
    transform:translateY(-2px);
}



/* ==========================================================
   COMMON POLISH
   ========================================================== */

.dashboard-card .section-title i{
    color:#d4af37;
    margin-right:.4rem;
}

@media (max-width:991px){

    .hall-avatar{
        width:96px;
        height:96px;
    }

    .team-photo{
        width:110px;
        height:110px;
    }

}

















/* ==========================================================
   SHOP
   ========================================================== */

.player-wallet{
    display:inline-block;
    text-align:center;
    padding:1rem 1.5rem;
    border:1px solid rgba(212,175,55,.35);
    border-radius:16px;
    background:rgba(212,175,55,.08);
}

.player-wallet small{
    display:block;
    color:#bfbfbf;
    margin-bottom:.35rem;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.wallet-value{
    font-size:2rem;
    font-weight:700;
    color:#f2d26b;
    font-family:'Orbitron',sans-serif;
}

.wallet-value i{
    margin-right:.35rem;
}



/* ---------- Premium packages ---------- */

.shop-pack{
    position:relative;
    height:100%;
    text-align:center;
    padding:2rem 1.5rem;
    border:1px solid rgba(212,175,55,.25);
    border-radius:18px;
    background:rgba(255,255,255,.02);
    transition:.25s;
}

.shop-pack:hover{
    transform:translateY(-6px);
    border-color:#d4af37;
    box-shadow:0 10px 30px rgba(212,175,55,.15);
}

.shop-pack h4{
    margin-bottom:1rem;
    color:#fff;
    font-size:2rem;
}

.shop-price{
    font-family:'Orbitron',sans-serif;
    font-size:2.4rem;
    color:#f2d26b;
    line-height:1;
}

.shop-unit{
    margin:1rem 0 2rem;
    color:#bbb;
}

.shop-badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    padding:.35rem 1rem;
    background:#d4af37;
    color:#2b1b05;
    border-radius:30px;
    font-size:.8rem;
    font-weight:700;
    white-space:nowrap;
}

.shop-pack.featured{
    border:2px solid #d4af37;
    box-shadow:0 0 35px rgba(212,175,55,.18);
}



/* ---------- Market ---------- */

.shop-item{
    height:100%;
    text-align:center;
    transition:.25s;
}

.shop-item:hover{
    transform:translateY(-6px);
}

.shop-item img{
    width:96px;
    height:96px;
    object-fit:cover;
    margin-bottom:1.2rem;
    border-radius:16px;
    border:2px solid rgba(212,175,55,.35);
}

.shop-item h4{
    margin-bottom:.75rem;
    color:#f2d26b;
}

.shop-item p{
    min-height:60px;
    color:#cfcfcf;
    margin-bottom:1.5rem;
}

.shop-cost{
    display:inline-block;
    margin-bottom:1.5rem;
    padding:.45rem 1rem;
    border-radius:30px;
    background:rgba(212,175,55,.12);
    color:#f2d26b;
    font-weight:600;
}



/* ---------- Purchase history ---------- */

.table-dark{
    --bs-table-bg:transparent;
    --bs-table-border-color:rgba(255,255,255,.08);
    --bs-table-striped-bg:rgba(255,255,255,.03);
    --bs-table-hover-bg:rgba(212,175,55,.05);
}

.table-dark th{
    color:#f2d26b;
    font-weight:600;
}

.table-dark td{
    vertical-align:middle;
}



/* ---------- Responsive ---------- */

@media (max-width:991px){

    .player-wallet{
        width:100%;
    }

    .wallet-value{
        font-size:1.8rem;
    }

    .shop-price{
        font-size:2rem;
    }

}

/* ==========================================================
   PLAYER RESOURCES
   ========================================================== */

.resource-card{

    display:flex;
    align-items:center;
    gap:1rem;

    height:100%;

    padding:1rem 1.2rem;

    border:1px solid rgba(212,175,55,.20);
    border-radius:14px;

    background:rgba(255,255,255,.03);

    transition:.25s;

}

.resource-card:hover{

    border-color:#d4af37;

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(212,175,55,.10);

}

.resource-icon{

    width:58px;
    height:58px;

    flex-shrink:0;

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

    border-radius:50%;

    background:linear-gradient(#f5d97d,#d4af37);

    color:#2b1b05;

    font-size:1.45rem;

}

.resource-content{

    flex:1;

}

.resource-name{

    font-size:.9rem;

    color:#bdbdbd;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.resource-value{

    margin:.15rem 0;

    font-family:'Orbitron',sans-serif;

    font-size:1.35rem;

    color:#f2d26b;

    line-height:1.2;

}

.resource-content small{

    color:#8f949d;

}

@media (max-width:768px){

    .resource-card{

        padding:.9rem;

    }

    .resource-icon{

        width:50px;
        height:50px;

        font-size:1.2rem;

    }

    .resource-value{

        font-size:1.15rem;

    }

}















/* ===========================================================
   MARKET
=========================================================== */

.resources-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:20px;
}

.resource-box{
    text-align:center;
    padding:22px 15px;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    transition:.25s;
}

.resource-box:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(214,177,74,.45);
}

.resource-value{
    font-size:2rem;
    font-weight:700;
    color:#d6b14a;
    font-family:'Orbitron',sans-serif;
    line-height:1;
}

.resource-label{
    margin-top:10px;
    color:#cfcfcf;
    font-size:.92rem;
    text-transform:uppercase;
    letter-spacing:1px;
}



/* ===========================================================
   STALL CAROUSEL
=========================================================== */
/*
.market-carousel{
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
}

.market-track{
    display:flex;
    gap:22px;
    min-width:max-content;
}

.market-carousel::-webkit-scrollbar{
    height:8px;
}

.market-carousel::-webkit-scrollbar-thumb{
    background:#6d5730;
    border-radius:20px;
}

.market-carousel::-webkit-scrollbar-track{
    background:rgba(255,255,255,.06);
}
*/
.stall-card{
    width:210px;
    flex:0 0 auto;
    text-align:center;
    border-radius:20px;
    padding:18px;
    background:rgba(255,255,255,.03);
    border:2px solid rgba(255,255,255,.08);
    cursor:pointer;
    transition:.25s;
}

.stall-card:hover{
    transform:translateY(-5px);
    border-color:#d6b14a;
    box-shadow:0 0 18px rgba(214,177,74,.25);
}

.stall-card.active{
    border-color:#d6b14a;
    background:rgba(214,177,74,.12);
}

.stall-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:14px;
    margin-bottom:14px;
}

.stall-card h4{
    margin:0;
    color:#fff;
    font-size:1.05rem;
}



/* ===========================================================
   PRODUCTS
=========================================================== */

.shop-category{
    color:#d6b14a;
    font-weight:700;
    letter-spacing:1px;
}
/*
.products-carousel{
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
}

.products-track{
    display:flex;
    gap:24px;
    min-width:max-content;
}

.products-carousel::-webkit-scrollbar{
    height:8px;
}

.products-carousel::-webkit-scrollbar-thumb{
    background:#6d5730;
    border-radius:20px;
}

.products-carousel::-webkit-scrollbar-track{
    background:rgba(255,255,255,.06);
}
*/
.product-card{
    width:260px;
    flex:0 0 auto;
    border-radius:20px;
    padding:20px;
    background:rgba(255,255,255,.03);
    border:2px solid rgba(255,255,255,.08);
    text-align:center;
    transition:.25s;
}

.product-card:hover{
    transform:translateY(-5px);
    border-color:#d6b14a;
    box-shadow:0 0 18px rgba(214,177,74,.22);
}

.product-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:14px;
    margin-bottom:16px;
}

.product-card h4{
    margin-bottom:10px;
    color:#fff;
}

.product-card p{
    color:#bdbdbd;
    min-height:48px;
    font-size:.95rem;
}

.price{
    display:inline-block;
    margin:12px 0 18px;
    padding:7px 18px;
    border-radius:999px;
    background:#d6b14a;
    color:#111;
    font-weight:700;
    font-size:1.1rem;
}



/* ===========================================================
   MOBILE
=========================================================== */

@media (max-width:991px){

    .stall-card{
        width:180px;
    }

    .product-card{
        width:220px;
    }

    .resource-value{
        font-size:1.6rem;
    }

}

@media (max-width:576px){

    .resources-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .stall-card{
        width:160px;
        padding:14px;
    }

    .product-card{
        width:200px;
        padding:16px;
    }

    .resource-box{
        padding:18px 10px;
    }

}







.swiper{
    overflow: visible;
    padding: 15px 45px 20px;
}

/* Хоризонтално остава ограничен, вертикално не */
.swiper-horizontal{
    overflow-x: hidden;
    overflow-y: visible;
}

/* Самият wrapper също не реже картите */
.swiper-wrapper{
    padding: 8px 0;
}

.swiper-slide{
    height:auto;
}

.swiper-button-prev,
.swiper-button-next{
    color:#d6b14a;
}

.swiper-button-prev::after,
.swiper-button-next::after{
    font-size:28px;
}

.stallsSwiper .swiper-slide{
    width:220px;
}

.productsSwiper .swiper-slide{
    width:280px;
}