:root {
    --bg: #050505;
    --bg-soft: #0b0b0d;
    --panel: rgba(18,18,22,.92);
    --panel-soft: rgba(255,255,255,.04);

    --red: #d60000;
    --red-soft: #ff2d2d;
    --red-dark: #5a0000;

    --gold: #d6a93a;
    --white: #ffffff;
    --text: #e8e8e8;
    --muted: #9a9a9a;

    --border: rgba(255,255,255,.10);
    --shadow-red: 0 0 28px rgba(214,0,0,.28);
    --shadow-soft: 0 12px 35px rgba(0,0,0,.55);
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at top center, rgba(214,0,0,.22), transparent 32%),
        radial-gradient(circle at 15% 20%, rgba(255,45,45,.12), transparent 26%),
        radial-gradient(circle at 85% 75%, rgba(120,0,0,.16), transparent 30%),
        linear-gradient(180deg, #050505 0%, #090909 45%, #020202 100%);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
    opacity: .35;
    z-index: -1;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.72) 100%);
    z-index: -1;
}
/* ==================================================
   PREMIUM HEADER
================================================== */

header{
    position:sticky;
    top:0;
    z-index:1000;

    height:110px;

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

    background:
        linear-gradient(
            180deg,
            #090909 0%,
            #050505 100%
        );

    border-bottom:1px solid rgba(214,0,0,.35);

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

header::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-1px;

    transform:translateX(-50%);

    width:280px;
    height:2px;

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

    box-shadow:
        0 0 18px rgba(214,0,0,.65);
}

/* ==================================================
   LOGO
================================================== */

.logo{

    width:320px;
    height:80px;

    background:
        url("../images/logoarena.png")
        center
        center
        no-repeat;

    background-size:contain;

    text-indent:-9999px;
    overflow:hidden;

    filter:
        drop-shadow(0 0 15px rgba(214,0,0,.55));

    transition:.35s;
}

.logo:hover{

    transform:scale(1.03);

    filter:
        drop-shadow(0 0 22px rgba(255,40,40,.8));

}

/* ==================================================
   NAVIGATION
================================================== */

.navbar{

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

    gap:14px;

    padding:18px;

    background:
        rgba(12,12,12,.92);

    backdrop-filter:blur(8px);

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

}

.navbar a{

    position:relative;

    color:var(--text);

    text-decoration:none;

    padding:12px 22px;

    border-radius:10px;

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

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

    transition:
        .25s;

    font-weight:600;

    letter-spacing:.3px;

}

.navbar a:hover{

    color:white;

    border-color:
        rgba(214,0,0,.45);

    background:
        rgba(214,0,0,.12);

    transform:
        translateY(-2px);

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

}

.navbar a.active{

    background:
        linear-gradient(
            180deg,
            rgba(214,0,0,.22),
            rgba(120,0,0,.20)
        );

    border-color:
        rgba(214,0,0,.65);

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

}

.navbar a::after{

    content:"";

    position:absolute;

    left:15%;
    right:15%;
    bottom:5px;

    height:2px;

    background:var(--red);

    transform:scaleX(0);

    transition:.25s;

}

.navbar a:hover::after,
.navbar a.active::after{

    transform:scaleX(1);

}
/* ==================================================
   GRUNDLAYOUT
================================================== */

.container {
    width: 94%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 35px 20px;
}

h1, h2, h3 {
    color: var(--white);
    text-shadow: 0 0 18px rgba(214,0,0,.18);
}

h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: .5px;
}

h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

p {
    color: var(--text);
    line-height: 1.6;
}

a {
    color: var(--red-soft);
    text-decoration: none;
    transition: .25s;
}

a:hover {
    color: white;
}

/* ==================================================
   HERO / HEADLINE BEREICH
================================================== */

.hero {
    position: relative;
    text-align: center;

    margin: 25px auto 35px;
    padding: 45px 25px;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    box-shadow:
        var(--shadow-soft),
        inset 0 0 40px rgba(214,0,0,.06);

    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top center, rgba(214,0,0,.25), transparent 45%);

    pointer-events: none;
}

.hero h1,
.hero p {
    position: relative;
    z-index: 1;
}

.hero h1 {
    margin-bottom: 14px;
}

.hero p {
    color: var(--muted);
    font-size: 1.1rem;
}

/* ==================================================
   STANDARD PANELS / BOXEN
================================================== */

.player-box,
.warning-box,
.stats-card,
.leaderboard-card,
.social-card,
.wiki-box,
.wiki-card,
.wiki-infobox,
.stats-box,
.owner-row,
.fight-box,
.arena-left,
.arena-right {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.09);
    border-left: 3px solid rgba(214,0,0,.75);

    border-radius: 18px;

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

    backdrop-filter: blur(8px);
}

.player-box,
.warning-box,
.stats-card,
.social-card,
.wiki-box,
.wiki-card,
.wiki-infobox,
.stats-box,
.owner-row {
    padding: 24px;
}

.player-box {
    text-align: center;
    margin-bottom: 28px;
}

.warning-box {
    background:
        linear-gradient(
            180deg,
            rgba(214,0,0,.16),
            rgba(80,0,0,.12)
        );
    border-color: rgba(214,0,0,.55);
    text-align: center;
}

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

button,
.arena-button,
.login-btn {
    display: inline-block;

    padding: 12px 24px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #ff2d2d 0%,
            #b60000 48%,
            #680000 100%
        );

    color: white !important;

    font-weight: 800;
    letter-spacing: .3px;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(214,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

button:hover,
.arena-button:hover,
.login-btn:hover {
    transform: translateY(-2px) scale(1.02);

    box-shadow:
        0 0 26px rgba(255,45,45,.45),
        inset 0 1px 0 rgba(255,255,255,.25);

    filter: brightness(1.08);
}

button:disabled,
.arena-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(.4);
}
/* ==================================================
   FORMULARE
================================================== */

form {
    text-align: center;
}

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
    width: 300px;
    max-width: 100%;

    padding: 13px 15px;

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);

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

    color: white;

    outline: none;

    transition: .25s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(214,0,0,.75);
    box-shadow: 0 0 18px rgba(214,0,0,.25);
}

/* ==================================================
   KARTEN GRID
================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
    gap: 26px;
}

.card-link {
    color: white;
    text-decoration: none;
}

.card {
    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;

    overflow: hidden;

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

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

.card:hover {
    transform: translateY(-6px) scale(1.025);

    border-color: rgba(214,0,0,.55);

    box-shadow:
        0 20px 45px rgba(0,0,0,.65),
        0 0 24px rgba(214,0,0,.25);
}

.card img {
    width: 100%;
    display: block;
}

.card.unlocked {
    border-color: rgba(255,255,255,.16);
}

.card.locked {
    filter: grayscale(100%);
    opacity: .38;
}

.card.locked::after {
    content: "🔒";
    position: absolute;
    top: 12px;
    right: 12px;

    font-size: 2rem;

    filter: drop-shadow(0 0 8px black);
}

.card-title {
    padding-top: 15px;

    text-align: center;

    font-weight: 900;
    font-size: 1.1rem;
}

.card-subtitle {
    text-align: center;
    color: var(--muted);
    padding-bottom: 15px;
}

/* ==================================================
   KARTEN RÄNGE
================================================== */

.card.unlocked.silver {
    border: 3px solid #c0c0c0 !important;
    box-shadow:
        0 0 12px rgba(192,192,192,.75),
        0 0 28px rgba(192,192,192,.38) !important;
}

.card.unlocked.gold {
    border: 3px solid #ffd700 !important;
    box-shadow:
        0 0 12px rgba(255,215,0,.85),
        0 0 30px rgba(255,215,0,.42) !important;
}

.card.unlocked.diamond {
    border: 3px solid #00ffff !important;
    box-shadow:
        0 0 12px rgba(0,255,255,.85),
        0 0 32px rgba(0,255,255,.44) !important;
}

.rank-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;

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

    background: rgba(255,255,255,.08);
}

.rank-badge.silver {
    background: #c0c0c0;
    color: #000;
}

.rank-badge.gold {
    background: #ffd700;
    color: #000;
}

.rank-badge.diamond {
    background: #00ffff;
    color: #000;
}

.copies {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 800;
    color: white;
    text-align: center;
}

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

.progress {
    width: 100%;
    height: 34px;

    margin: 20px 0;

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

    border-radius: 999px;

    overflow: hidden;

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

.progress-bar,
.profile-progress-bar {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #780000,
            #d60000,
            #ff4545
        );

    border-radius: 999px;

    box-shadow: 0 0 18px rgba(214,0,0,.45);
}

.progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #780000,
            #d60000,
            #ff4545
        );

    border-radius: 999px;
}

.progress-text {
    text-align: center;
    margin-top: 10px;

    font-size: 1.2rem;
    font-weight: 900;
}

/* ==================================================
   LEADERBOARD
================================================== */

.leaderboard-card {
    padding: 20px;
    margin-bottom: 16px;

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

.leaderboard-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 18px 42px rgba(0,0,0,.55),
        0 0 24px rgba(214,0,0,.28);
}

.leaderboard-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 18px;

    margin-bottom: 12px;
}

.leaderboard-rank {
    min-width: 90px;
    font-size: 1.25rem;
    font-weight: 900;
}

.leaderboard-user {
    flex: 1;

    font-size: 1.1rem;
    font-weight: 900;
}

.leaderboard-user a {
    color: white;
}

.leaderboard-user a:hover {
    color: var(--red-soft);
}

.leaderboard-score,
.total-points {
    color: var(--red-soft);
    font-weight: 900;
    font-size: 1.2rem;
}

.leaderboard-details,
.leaderboard-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 14px;

    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}

.leaderboard-details span,
.leaderboard-stat {
    padding: 7px 11px;

    border-radius: 999px;

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

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

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

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

.stats-card {
    text-align: center;

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

.stats-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 42px rgba(0,0,0,.55),
        0 0 24px rgba(214,0,0,.28);
}

.stats-card h2 {
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: var(--muted);
}

.stats-card p {
    font-size: 1.6rem;
    font-weight: 900;
    color: white;
}

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

.profile-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 20px;

    margin: 30px 0;
}

.stat-box {
    min-width: 105px;

    padding: 18px 25px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;

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

    transition: .25s;
}

.stat-box:hover {
    transform: translateY(-4px);
    border-color: rgba(214,0,0,.55);
    box-shadow: 0 0 22px rgba(214,0,0,.35);
}

.stat-box div {
    margin-top: 8px;

    font-size: 28px;
    font-weight: 900;
    color: white;
}

.stat-box small {
    display: block;
    margin-top: 5px;

    font-size: 12px;
    color: var(--muted);
}

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

.hero-banner {
    width: 100%;
    max-width: 1400px;

    margin: 24px auto 34px;
    padding: 0 20px;

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

.hero-banner img {
    width: 100%;
    max-width: 1600px;
    max-height: 300px;

    object-fit: cover;
    display: block;

    border-radius: 22px;

    border: 1px solid rgba(214,0,0,.55);

    box-shadow:
        0 18px 45px rgba(0,0,0,.65),
        0 0 26px rgba(214,0,0,.22);
}

/* ==================================================
   QUICK / SOCIAL LINKS
================================================== */

.quick-links,
.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 18px;
}

.quick-links a,
.social-links a {
    padding: 15px 25px;

    color: white;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.09);
    border-left: 3px solid rgba(214,0,0,.75);

    border-radius: 15px;

    transition: .25s;
}

.quick-links a:hover,
.social-links a:hover {
    transform: translateY(-3px);

    border-color: rgba(214,0,0,.55);

    box-shadow: 0 0 20px rgba(214,0,0,.28);
}

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

@media (max-width: 900px) {

    header {
        height: 92px;
    }

    .logo {
        width: 260px;
        height: 64px;
    }

    .navbar {
        gap: 10px;
        padding: 12px;
    }

    .navbar a {
        flex: 1 1 42%;
        text-align: center;
        padding: 11px 12px;
    }

    .container {
        width: 96%;
        padding: 25px 12px;
    }

    .leaderboard-top {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .leaderboard-rank {
        min-width: auto;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill,minmax(170px,1fr));
        gap: 18px;
    }
}

@media (max-width: 520px) {

    .logo {
        width: 220px;
        height: 56px;
    }

    .navbar a {
        flex: 1 1 100%;
    }

    button,
    .arena-button,
    .login-btn {
        width: 100%;
        text-align: center;
    }
}
/* ==================================================
   Game Navigation Center Logo
================================================== */

.game-nav {
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 118px;

    display: grid;
    grid-template-columns: 1fr 260px 1fr;
    align-items: center;

    padding: 0 70px;

    background:
        linear-gradient(
            180deg,
            rgba(5,5,7,.94),
            rgba(8,8,10,.82)
        );

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.75),
        0 0 30px rgba(150,0,0,.16);
}

.game-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,35,35,.9),
            transparent
        );

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

.game-nav-side {
    display: flex;
    align-items: center;
    gap: 0;
}

.game-nav-left {
    justify-content: flex-end;
}

.game-nav-right {
    justify-content: flex-start;
}

.game-nav-side a {
    position: relative;

    min-height: 118px;

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

    padding: 0 28px;

    color: rgba(255,255,255,.72);
    text-decoration: none;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;

    border-left: 1px solid rgba(255,255,255,.05);

    transition: .25s;
}

.game-nav-side a:last-child {
    border-right: 1px solid rgba(255,255,255,.05);
}

.game-nav-side a::after {
    content: "";
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 0;

    height: 3px;

    background: #ff2e2e;

    opacity: 0;
    transform: scaleX(.4);

    box-shadow: 0 0 16px rgba(255,35,35,.7);

    transition: .25s;
}

.game-nav-side a:hover,
.game-nav-side a.active {
    color: #fff;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,30,30,.08)
        );

    text-shadow: 0 0 12px rgba(255,45,45,.38);
}

.game-nav-side a:hover::after,
.game-nav-side a.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.game-nav-logo {
    position: relative;
    z-index: 2;

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

    text-decoration: none;
}

.game-nav-logo img {
    height: 145px;
    width: auto;

    margin-top: 26px;

    filter:
        drop-shadow(0 0 18px rgba(255,40,40,.45))
        drop-shadow(0 0 45px rgba(255,40,40,.22));

    transition: .25s;
}

.game-nav-logo:hover img {
    transform: scale(1.04);
}

/* Mobile */
@media(max-width: 1100px) {

    .game-nav {
        height: auto;
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 8px;
    }

    .game-nav-logo {
        order: -1;
    }

    .game-nav-logo img {
        height: 105px;
        margin-top: 0;
    }

    .game-nav-side {
        justify-content: center;
        flex-wrap: wrap;
    }

    .game-nav-side a {
        min-height: 48px;
        padding: 0 14px;
        font-size: 12px;
        border: 0;
    }
}

/* Mobile */
@media(max-width: 1100px) {

    .game-nav {
        height: auto;
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 8px;
    }

    .game-nav-logo {
        order: -1;
    }

    .game-nav-logo img {
        height: 105px;
        margin-top: 0;
    }

    .game-nav-side {
        justify-content: center;
        flex-wrap: wrap;
    }

    .game-nav-side a {
        min-height: 48px;
        padding: 0 14px;
        font-size: 12px;
        border: 0;
    }
}

/* ==================================================
   Header Mobile
================================================== */

@media (max-width: 1000px) {

    .site-header-inner {
        flex-direction: column;
        gap: 0;
        padding: 12px 18px 0;
    }

    .site-logo img {
        height: 110px;
    }

   .navbar{
    justify-content:flex-start;
}

    .navbar a {
        min-height: 52px;
        padding: 0 14px;
        font-size: 13px;
    }

}

@media (max-width: 620px) {

    .site-logo img {
        height: 58px;
    }

    .navbar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .navbar a {
        min-height: 46px;
        padding: 0 8px;
        font-size: 12px;
    }

}
/* Startseiten-Layout befindet sich vollständig in assets/css/home.css. */

/* ==================================================
   Premium Card Detail
================================================== */

.card-detail-page{
    padding-top:30px;
}

.card-detail{

    display:grid;
    grid-template-columns:380px 1fr;

    gap:45px;

    align-items:center;

    padding:35px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(35,35,38,.96),
            rgba(10,10,12,.98)
        );

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

    box-shadow:
        0 24px 60px rgba(0,0,0,.72),
        0 0 30px rgba(255,40,40,.10);

}

.card-image{

    text-align:center;

}

.card-image img{

    width:100%;
    max-width:360px;

    border-radius:20px;

    transition:.35s;

    box-shadow:
        0 24px 45px rgba(0,0,0,.75),
        0 0 28px rgba(255,45,45,.22);

}

.card-image img:hover{

    transform:
        translateY(-10px)
        scale(1.04);

    box-shadow:
        0 35px 65px rgba(0,0,0,.82),
        0 0 40px rgba(255,45,45,.40);

}

.card-series{

    display:inline-block;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:999px;

    color:#ff5b5b;

    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;

    background:
        rgba(255,40,40,.10);

}

.card-info h1{

    margin:0;

    color:#fff;

    font-size:54px;

}

.card-info h2{

    margin:8px 0 20px;

    color:rgba(255,255,255,.70);

    font-size:24px;

    font-weight:500;

}

.card-description{

    margin:26px 0;

    color:rgba(255,255,255,.78);

    line-height:1.7;

    font-size:17px;

}

.card-arena-stats{

    display:grid;

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

    gap:18px;

    margin:26px 0;

}

.card-arena-stats div{

    text-align:center;

    padding:18px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(0,0,0,.22)
        );

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

}

.card-arena-stats span{

    font-size:28px;

}

.card-arena-stats strong{

    display:block;

    margin-top:10px;

    color:#fff;

    font-size:24px;

}

.card-arena-stats p{

    margin-top:6px;

    color:rgba(255,255,255,.58);

    font-weight:800;

}

.ability-box{

    padding:22px;

    margin:24px 0;

    border-radius:18px;

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

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

}

.ability-box h3{

    margin:0 0 10px;

    color:#fff;

}

.ability-box p{

    margin:0;

    color:rgba(255,255,255,.72);

    line-height:1.6;

}

.owner-list{

    margin-top:22px;

    display:grid;

    gap:12px;

}

.owner-row{

    padding:16px 20px;

    border-radius:16px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(0,0,0,.18)
        );

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

    transition:.25s;

}

.owner-row:hover{

    transform:translateX(8px);

    border-color:rgba(255,60,60,.28);

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

}

.owner-row a{

    color:#fff;

    text-decoration:none;

    font-weight:800;

}

@media(max-width:950px){

    .card-detail{

        grid-template-columns:1fr;

        text-align:center;

    }

    .card-image{

        order:-1;

    }

}

@media(max-width:650px){

    .card-arena-stats{

        grid-template-columns:1fr;

    }

    .card-info h1{

        font-size:40px;

    }

}
/* ==================================================
   Premium Profilseite
================================================== */

.profile-page{
    padding-top:30px;
}

.profile-hero{

    display:grid;
    grid-template-columns:110px 1fr 320px;

    gap:30px;

    align-items:center;

    padding:30px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(35,35,38,.96),
            rgba(10,10,12,.98)
        );

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

    box-shadow:
        0 22px 55px rgba(0,0,0,.65);

}

.profile-avatar{

    width:110px;
    height:110px;

    border-radius:50%;

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

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

    color:#fff;

    background:
        linear-gradient(
            180deg,
            #ff4545,
            #8f1111
        );

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

}

.profile-main-info span{

    color:#ff5555;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2px;

}

.profile-main-info h1{

    margin:8px 0;

    color:#fff;

    font-size:48px;

}

.profile-main-info p{

    color:rgba(255,255,255,.68);

}

.profile-level-box{

    padding:22px;

    border-radius:20px;

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

}

.profile-level-box strong{

    color:#fff;

}

.profile-progress{

    margin:15px 0;

    height:14px;

    border-radius:999px;

    overflow:hidden;

    background:#111;

}

.profile-progress div{

    height:100%;

    background:
        linear-gradient(
            90deg,
            #ff4a4a,
            #ffb347
        );

}

.profile-progress.big{

    margin-top:20px;

    height:18px;

}

.profile-dashboard{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

    margin-top:28px;

}

.profile-panel{

    padding:28px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(35,35,38,.96),
            rgba(10,10,12,.98)
        );

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

}

.profile-panel h2{

    margin-top:0;

    margin-bottom:24px;

}

.profile-stats-grid{

    display:grid;

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

    gap:16px;

}

.profile-stats-grid div{

    padding:18px;

    border-radius:16px;

    text-align:center;

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

}

.profile-stats-grid strong{

    display:block;

    color:#fff;

    font-size:28px;

}

.profile-stats-grid span{

    color:rgba(255,255,255,.58);

    font-size:13px;

}

.profile-season{

    margin-top:28px;

    padding:28px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(35,35,38,.96),
            rgba(10,10,12,.98)
        );

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

}

.profile-season span{

    color:#ff5555;

    text-transform:uppercase;

    font-weight:900;

    letter-spacing:2px;

}

.profile-cards-section{

    margin-top:30px;

}

.profile-card-grid{

    display:grid;

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

    gap:18px;

}

.profile-card-link{

    text-decoration:none;

}

.profile-card{

    position:relative;

    padding:14px;

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            rgba(35,35,38,.96),
            rgba(10,10,12,.98)
        );

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

    transition:.25s;

}

.profile-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.7),
        0 0 20px rgba(255,45,45,.20);

}

.profile-card img{

    width:100%;

    border-radius:14px;

}

.profile-card-info{

    margin-top:12px;

}

.profile-card-info strong{

    display:block;

    color:#fff;

    font-size:15px;

}

.profile-card-info span{

    display:block;

    margin-top:4px;

    color:rgba(255,255,255,.62);

    font-size:12px;

}

.profile-card-meta{

    display:flex;

    justify-content:space-between;

    margin-top:12px;

    color:#fff;

    font-size:13px;

    font-weight:900;

}

@media(max-width:1100px){

    .profile-hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .profile-avatar{

        margin:auto;

    }

    .profile-dashboard{

        grid-template-columns:1fr;

    }

}

@media(max-width:700px){

    .profile-stats-grid{

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

    }

    .profile-card-grid{

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

    }

}
.collector-king{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-left:16px;

    padding:8px 16px;

    border-radius:999px;

    color:#ffd95c;

    font-weight:900;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

    background:
        linear-gradient(
            180deg,
            rgba(255,215,0,.18),
            rgba(120,90,0,.28)
        );

    border:1px solid rgba(255,215,0,.35);

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

}
/* ==================================================
   Premium Kartenübersicht
================================================== */

.cards-page {
    padding-top: 30px;
}

.cards-overview-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

.cards-overview-bar div {
    padding: 22px;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(35,35,38,.96), rgba(10,10,12,.98));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 16px 38px rgba(0,0,0,.55);
}

.cards-overview-bar strong {
    display: block;
    color: #fff;
    font-size: 28px;
}

.cards-overview-bar span {
    color: rgba(255,255,255,.58);
    font-weight: 800;
}

.premium-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 24px;
}

.premium-card-link {
    text-decoration: none;
}

.premium-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(35,35,38,.96), rgba(10,10,12,.98));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 42px rgba(0,0,0,.6);
    transition: .25s;
}

.premium-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: rgba(255,60,60,.35);
    box-shadow:
        0 24px 55px rgba(0,0,0,.75),
        0 0 26px rgba(255,40,40,.22);
}

.premium-card-image {
    padding: 14px 14px 0;
}

.premium-card-image img {
    width: 100%;
    border-radius: 16px;
    display: block;
}

.premium-card-content {
    padding: 14px 16px 18px;
}

.premium-card-content span {
    color: #ff4a4a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.premium-card-content h2 {
    margin: 6px 0 4px;
    color: #fff;
    font-size: 18px;
}

.premium-card-content p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 13px;
}

@media(max-width: 700px) {
    .cards-overview-bar {
        grid-template-columns: 1fr;
    }

    .premium-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}
/* ================================
   CardRenderer Cards
================================ */

.game-card {
    height: 100%;
    background: linear-gradient(180deg, rgba(25,25,30,.96), rgba(10,10,14,.98));
    border: 1px solid rgba(255, 60, 60, .22);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.premium-card-link:hover .game-card {
    transform: translateY(-6px);
    border-color: rgba(255, 70, 70, .55);
    box-shadow: 0 24px 65px rgba(255,0,0,.16), 0 18px 45px rgba(0,0,0,.6);
}

.game-card-header {
    padding: 16px 16px 10px;
}

.game-card-header h3 {
    margin: 8px 0 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.15;
}

.card-rarity {
    display: inline-flex;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 0, 0, .14);
    border: 1px solid rgba(255, 80, 80, .35);
    color: #ffd0d0;
    font-size: 12px;
    font-weight: 700;
}

.card-image {
    width: 100%;
    background: rgba(255,255,255,.04);
    overflow: hidden;
    padding: 0 8px;
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.card-image-placeholder {
    display: grid;
    place-items: center;
    color: #777;
    font-size: 14px;
}

.card-stats {
    display: flex;
    gap: 10px;
    padding: 14px 16px 6px;
}

.card-stat {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
}

.card-stat.attack strong {
    color: #ffb3b3;
}

.card-stat.health strong {
    color: #b8ffbf;
}

.card-season {
    margin: 8px 16px 0;
    color: #aaa;
    font-size: 13px;
}

.card-description {
    padding: 10px 16px 0;
    color: #cfcfcf;
    font-size: 14px;
    line-height: 1.4;
}

.card-abilities {
    padding: 12px 16px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ability-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 0, 0, .14);
    border: 1px solid rgba(255, 80, 80, .35);
    color: #ffd0d0;
    font-size: 12px;
    line-height: 1;
}

.ability-badge .ability-desc,
.ability-badge .ability-admin-info {
    display: none;
}

.card-abilities.empty {
    padding: 12px 16px 16px;
    color: #888;
    font-size: 12px;
}

.rarity-gewöhnlich,
.rarity-normal {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #ddd;
}

.rarity-selten {
    background: rgba(60,130,255,.16);
    border-color: rgba(60,130,255,.35);
    color: #cfe0ff;
}

.rarity-episch {
    background: rgba(180,80,255,.16);
    border-color: rgba(180,80,255,.38);
    color: #edd4ff;
}

.rarity-mystisch,
.rarity-legendär {
    background: rgba(255,190,60,.17);
    border-color: rgba(255,190,60,.45);
    color: #ffe6a6;
}
/* ===== Ability Farben ===== */

.ability-default{
    background:#2b2b2b;
    border-color:#555;
    color:#eee;
}

.ability-attack{
    background:#5b1616;
    border-color:#d43c3c;
    color:#ffd8d8;
}

.ability-shield{
    background:#12345c;
    border-color:#3d8dff;
    color:#d8ebff;
}

.ability-heal{
    background:#124d26;
    border-color:#33c76b;
    color:#d8ffe7;
}

.ability-critical{
    background:#5b2b00;
    border-color:#ff9800;
    color:#ffe2b5;
}

.ability-lightning{
    background:#5d5200;
    border-color:#ffd500;
    color:#fff7c8;
}

.ability-poison{
    background:#3a1457;
    border-color:#b14dff;
    color:#eed9ff;
}

.ability-revive{
    background:#665100;
    border-color:#ffd94f;
    color:#fff6d2;
}

.ability-block{
    background:#4b1717;
    border-color:#ff6666;
    color:#ffdcdc;
}
/* ===== Ability Tooltip ===== */

.ability-badge {
    position: relative;
}

.ability-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%);
    min-width: 180px;
    max-width: 260px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(10,10,14,.97);
    border: 1px solid rgba(255,80,80,.35);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 12px 35px rgba(0,0,0,.55);
    z-index: 20;
    white-space: normal;
    text-align: center;
}

.ability-badge:hover .ability-tooltip {
    display: block;
}
.card-abilities-small {
    justify-content: center;
    gap: 8px;
    padding: 8px;
}

.card-abilities-small .ability-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-abilities-small .ability-icon {
    font-size: 15px;
}

.card-abilities-small .ability-name,
.card-abilities-small .ability-tooltip {
    display: none;
}
.home-news {
    max-width: 1200px;
    margin: 35px auto;
    padding: 0 20px;
}

.home-news-head {
    margin-bottom: 18px;
}

.home-news-head span {
    color: #ff4444;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-news-head h2 {
    margin: 6px 0 0;
    color: #fff;
}

.home-news-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.home-news-card {
    background: linear-gradient(145deg, #151515, #090909);
    border: 1px solid rgba(255, 0, 0, .28);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 0 25px rgba(160, 0, 0, .16);
}

.home-news-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.home-news-meta span {
    color: #ff4444;
    font-weight: 900;
}

.home-news-meta small {
    color: #aaa;
}

.home-news-card h3 {
    margin: 0 0 10px;
    color: #fff;
}

.home-news-card p {
    margin: 0;
    color: #ccc;
    line-height: 1.5;
}
.home-news-card {
    position: relative;
    overflow: hidden;
}

.home-news-card.news-type-update {
    border-color: rgba(255, 0, 0, .35);
}

.home-news-card.news-type-patch {
    border-color: rgba(140, 80, 255, .55);
}

.home-news-card.news-type-event {
    border-color: rgba(0, 150, 255, .55);
}

.home-news-card.news-type-season {
    border-color: rgba(255, 190, 40, .65);
}

.home-news-card.news-type-maintenance {
    border-color: rgba(160, 160, 160, .45);
}

.home-news-card.news-type-update .home-news-meta span {
    color: #ff4444;
}

.home-news-card.news-type-patch .home-news-meta span {
    color: #9b66ff;
}

.home-news-card.news-type-event .home-news-meta span {
    color: #36aaff;
}

.home-news-card.news-type-season .home-news-meta span {
    color: #ffcc44;
}

.home-news-card.news-type-maintenance .home-news-meta span {
    color: #aaa;
}

.home-news-pin {
    display: inline-block;
    margin-bottom: 12px;
    background: rgba(255, 204, 0, .12);
    border: 1px solid rgba(255, 204, 0, .45);
    color: #ffcc44;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.home-news-image {
    margin: -22px -22px 16px;
    height: 160px;
    overflow: hidden;
    background: #050505;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.home-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-title-badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 0, 0, .18);
    border: 1px solid rgba(255, 80, 80, .45);
    color: #ffd6d6;
    font-size: 13px;
    font-weight: 800;
}

.profile-hero.frame-red {
    border-color: rgba(255, 50, 50, .8);
    box-shadow: 0 0 28px rgba(255, 0, 0, .28);
}

.profile-hero.frame-gold {
    border-color: rgba(255, 200, 70, .9);
    box-shadow: 0 0 30px rgba(255, 190, 60, .28);
}

.profile-hero.frame-blue {
    border-color: rgba(80, 170, 255, .9);
    box-shadow: 0 0 30px rgba(60, 150, 255, .25);
}

.profile-hero.frame-purple {
    border-color: rgba(190, 90, 255, .9);
    box-shadow: 0 0 30px rgba(170, 70, 255, .25);
}
.profile-hero-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: 30px;
}

.profile-hero-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-avatar.big {
    width: 96px;
    height: 96px;
    font-size: 42px;
    border-radius: 28px;
    box-shadow: 0 0 28px rgba(255, 0, 0, .25);
}

.profile-label {
    color: #ff4444;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.profile-main-info h1 {
    margin: 6px 0 8px;
    font-size: 38px;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.profile-edit-btn {
    margin-top: 10px;
}

.profile-level-box-v2 {
    min-width: 290px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.level-circle {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(255,0,0,.25), rgba(20,20,20,.95));
    border: 1px solid rgba(255,80,80,.5);
    box-shadow: 0 0 28px rgba(255,0,0,.22);
}

.level-circle strong {
    font-size: 30px;
    line-height: 1;
}

.level-circle span {
    font-size: 12px;
    color: #aaa;
    margin-top: -18px;
}

.level-info {
    flex: 1;
}

@media (max-width: 850px) {
    .profile-hero-v2,
    .profile-hero-left,
    .profile-level-box-v2 {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-level-box-v2 {
        width: 100%;
    }
}
.profile-dashboard-v2 {
    grid-template-columns: repeat(3, 1fr);
}

.big-panel {
    position: relative;
    overflow: hidden;
}

.big-panel h2 {
    margin-bottom: 15px;
}

.big-number {
    font-size: 46px;
    font-weight: 900;
    color: #ff4444;
    margin-bottom: 12px;
}

.mini-stats {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 15px;
}

.mini-stats span {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
}


@media(max-width:900px){

    .profile-dashboard-v2 {
        grid-template-columns:1fr;
    }

}
.cards-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.cards-section-head span {
    color: #ff4444;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.cards-section-head h2 {
    margin: 5px 0 0;
    font-size: 30px;
}

.cards-section-head strong {
    background: rgba(255,0,0,.14);
    border: 1px solid rgba(255,70,70,.4);
    padding: 10px 14px;
    border-radius: 999px;
    color: #ffd6d6;
}
.season-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0;
}

.season-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    border-radius: 999px;
    background: linear-gradient(145deg, #171717, #0b0b0b);
    border: 1px solid rgba(255,255,255,.09);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    transition: .15s;
}

.season-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(255,0,0,.55);
    box-shadow: 0 0 18px rgba(180,0,0,.18);
}

.season-tab.active {
    background: linear-gradient(145deg, #b00000, #5c0000);
    border-color: rgba(255,80,80,.75);
    box-shadow: 0 0 22px rgba(255,0,0,.26);
}

.season-tab span {
    font-size: 18px;
}
.stat-label {
    color: #aaa;
    font-weight: 800;
    margin-top: -5px;
}
.season-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0;
}

.season-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    border-radius: 999px;
    background: linear-gradient(145deg, #171717, #0b0b0b);
    border: 1px solid rgba(255,255,255,.09);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    transition: .15s;
}

.season-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(255,0,0,.55);
    box-shadow: 0 0 18px rgba(180,0,0,.18);
}

.season-tab.active {
    background: linear-gradient(145deg, #b00000, #5c0000);
    border-color: rgba(255,80,80,.75);
    box-shadow: 0 0 22px rgba(255,0,0,.26);
}

.season-tab span {
    font-size: 18px;
}
.frame-mystic {
    border: 2px solid #b65cff !important;
    box-shadow:
        0 0 20px #b65cff,
        0 0 55px rgba(180,70,255,.55) !important;
}
.frame-fire {
    border: 2px solid #ff3b00 !important;
    box-shadow:
        0 0 20px #ff3b00,
        0 0 45px rgba(255,70,0,.45) !important;
}
.frame-diamond {
    border: 2px solid #65e8ff !important;
    box-shadow:
        0 0 20px #65e8ff,
        0 0 45px rgba(100,230,255,.45) !important;
}
.frame-champion {
    border: 2px solid gold !important;
    box-shadow:
        0 0 20px gold,
        0 0 55px rgba(255,215,0,.5) !important;
}
.frame-demerzli {
    border: 2px solid #ff0000 !important;
    box-shadow:
        0 0 25px #ff0000,
        0 0 60px rgba(255,0,0,.55) !important;
}
/* ==========================
   XP SHOP PROFILRAHMEN
========================== */

.profile-hero-v2.frame-fire {
    border: 2px solid #ff3b00 !important;

    box-shadow:
        0 0 0 2px rgba(255,90,0,.35),
        0 0 25px rgba(255,80,0,.8),
        0 0 60px rgba(255,50,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}


.profile-hero-v2.frame-diamond {
    border: 2px solid #5eeaff !important;

    box-shadow:
        0 0 0 2px rgba(94,234,255,.35),
        0 0 25px rgba(94,234,255,.8),
        0 0 60px rgba(94,234,255,.45),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}


.profile-hero-v2.frame-mystic {
    border: 2px solid #b44cff !important;

    box-shadow:
        0 0 0 2px rgba(180,76,255,.35),
        0 0 25px rgba(180,76,255,.8),
        0 0 60px rgba(180,76,255,.45),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}


.profile-hero-v2.frame-champion {
    border: 2px solid #ffd700 !important;

    box-shadow:
        0 0 0 2px rgba(255,215,0,.35),
        0 0 25px rgba(255,215,0,.9),
        0 0 70px rgba(255,215,0,.5),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}


.profile-hero-v2.frame-demerzli {
    border: 2px solid #ff0000 !important;

    box-shadow:
        0 0 0 2px rgba(255,0,0,.35),
        0 0 30px rgba(255,0,0,.9),
        0 0 75px rgba(255,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* ======================
   XP SHOP FRAME PREVIEW
====================== */

.shop-preview-frame.frame-fire {
    border-color: #ff3b00 !important;
    box-shadow:
        0 0 20px rgba(255,80,0,.9),
        0 0 45px rgba(255,50,0,.45);
}

.shop-preview-frame.frame-aqua {
    border-color: #00c8ff !important;
    box-shadow:
        0 0 20px rgba(0,200,255,.9),
        0 0 45px rgba(0,200,255,.45);
}

.shop-preview-frame.frame-nature {
    border-color: #32d74b !important;
    box-shadow:
        0 0 20px rgba(50,215,75,.9),
        0 0 45px rgba(50,215,75,.45);
}

.shop-preview-frame.frame-diamond {
    border-color: #5eeaff !important;
    box-shadow:
        0 0 20px rgba(94,234,255,.9),
        0 0 50px rgba(94,234,255,.45);
}

.shop-preview-frame.frame-mystic {
    border-color: #b44cff !important;
    box-shadow:
        0 0 20px rgba(180,76,255,.9),
        0 0 55px rgba(180,76,255,.45);
}

.shop-preview-frame.frame-lightning {
    border-color: #ffe600 !important;
    box-shadow:
        0 0 20px rgba(255,230,0,.9),
        0 0 55px rgba(255,230,0,.45);
}

.shop-preview-frame.frame-bloodmoon {
    border-color: #b00000 !important;
    box-shadow:
        0 0 25px rgba(176,0,0,1),
        0 0 60px rgba(176,0,0,.55);
}

.shop-preview-frame.frame-champion {
    border-color: #ffd700 !important;
    box-shadow:
        0 0 25px rgba(255,215,0,.9),
        0 0 65px rgba(255,215,0,.55);
}

.shop-preview-frame.frame-demerzli {
    border-color: #ff0000 !important;
    box-shadow:
        0 0 30px rgba(255,0,0,1),
        0 0 75px rgba(255,0,0,.6);
}
.game-nav-coins{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 10px;border:1px solid rgba(255,205,70,.35);border-radius:999px;background:rgba(80,55,0,.35);color:#ffd76a;font-weight:900;font-size:.88rem}