/*
 * Leon Games · Portal Redesign 2026
 * Globaler visueller Layer. Spiel-iframe-CSS bleibt bewusst unangetastet.
 */
:root {
    --bg: #080a10;
    --surface: #11141d;
    --surface-2: #171b26;
    --surface-3: #202533;
    --border: rgba(255, 255, 255, .075);
    --accent: #8b7cf6;
    --accent-hover: #a99eff;
    --accent-soft: rgba(139, 124, 246, .14);
    --success: #4ce1b6;
    --danger: #ff786f;
    --warning: #e5b95f;
    --text: #f5f6fa;
    --text-dim: #8991a5;
    --text-faint: #5f687b;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 24px 70px rgba(0, 0, 0, .35);
    --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-title: 'Rajdhani', 'Segoe UI', sans-serif;
}

html, body {
    background:
        radial-gradient(circle at 76% -12%, rgba(139, 124, 246, .10), transparent 31rem),
        radial-gradient(circle at 102% 82%, rgba(209, 107, 154, .07), transparent 28rem),
        var(--bg);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

h1, h2, h3, h4 { letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 3vw, 2.65rem); }

.app-shell { position: relative; }
.sidebar {
    width: 230px;
    padding: 1.35rem 1rem 1rem;
    background: rgba(11, 13, 20, .90);
    border-right-color: var(--border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.sidebar__brand { padding: .35rem .75rem 1.6rem; }
.sidebar__logo { height: 30px; max-width: 150px; }
.nav-section {
    display: block;
    padding: 1.05rem .75rem .38rem;
    color: #555e70;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
}
.nav-section:first-child { padding-top: .1rem; }
.nav-link {
    position: relative;
    gap: .7rem;
    margin: 0 0 .12rem;
    padding: .64rem .72rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #8f97a9;
    font-size: .86rem;
    font-weight: 600;
}
.nav-link:hover { background: rgba(255,255,255,.035); color: #fff; }
.nav-link.active {
    background: linear-gradient(100deg, rgba(139,124,246,.22), rgba(139,124,246,.055));
    border-color: rgba(139,124,246,.06);
    color: #fff;
    box-shadow: inset 3px 0 var(--accent);
}
.nav-link__icon {
    width: 20px;
    color: #687186;
    font-size: 1.08rem;
    line-height: 1;
}
.nav-link.active .nav-link__icon { color: #b4aaff; }

body .topbar {
    height: 70px;
    padding: 0 2rem;
    background: rgba(8, 10, 16, .78);
    border-bottom-color: var(--border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}
.content { max-width: 1380px; padding: 2rem; }

.card, .stat-tile, .tile {
    background: linear-gradient(145deg, rgba(19,22,32,.97), rgba(14,17,25,.97));
    border-color: var(--border);
    box-shadow: 0 1px 0 rgba(255,255,255,.015);
}
.card { padding: 1.35rem; }
.card--glass { background: rgba(17,20,29,.72); }
.tile:hover, .card[href]:hover {
    border-color: rgba(139,124,246,.38);
    box-shadow: var(--shadow);
}

.btn { border-radius: 10px; min-height: 38px; }
.btn--primary {
    background: linear-gradient(135deg, #7967ea, #a45fd2);
    border-color: rgba(181,169,255,.28);
    box-shadow: 0 8px 22px rgba(116,88,224,.22);
}
.btn--primary:hover { background: linear-gradient(135deg, #8876f4, #b16ddd); transform: translateY(-1px); }
.btn--ghost { background: rgba(255,255,255,.025); border-color: var(--border); }

.input, .select {
    background: #0d1017;
    border-color: var(--border);
}
.input:focus, .select:focus { box-shadow: 0 0 0 3px rgba(139,124,246,.13); }

.xpbar, .meter { background: #252a36; }
.xpbar__fill, .meter__fill {
    background: linear-gradient(90deg, #7765e9, #c66bde);
    box-shadow: 0 0 16px rgba(139,124,246,.35);
}

.table th { color: #667084; letter-spacing: .1em; }
.table td { border-bottom-color: var(--border); }
.table tr:hover td { background: rgba(139,124,246,.045); }

.badge { background: #202533; }
.badge--accent { background: rgba(139,124,246,.14); color: #b4aaff; }
.status-dot--online { box-shadow: 0 0 10px rgba(76,225,182,.58); }

.tabs { border-bottom-color: var(--border) !important; }
.tab-btn { color: #7f8799 !important; border-radius: 9px 9px 0 0; }
.tab-btn:hover { color: #fff !important; background: rgba(255,255,255,.03) !important; }
.tab-btn.active { color: #fff !important; border-bottom-color: var(--accent) !important; background: linear-gradient(to top, rgba(139,124,246,.10), transparent) !important; }

.modal-backdrop { background: rgba(2,3,6,.78); backdrop-filter: blur(8px); }
.modal { border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }

@media (max-width: 920px) {
    .sidebar { width: 205px; }
    .content { padding: 1.35rem; }
}
@media (max-width: 720px) {
    .sidebar { display: none; }
    body .topbar { height: 60px; padding: 0 .8rem; }
    .content { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
/* Hexagonale Spiele-Embleme: ein einheitliches Icon-System für Bibliothek, Profil und Rangliste. */
.game-hex{--game-hex-size:64px;--game-hex-a:#7c6cff;--game-hex-b:#c9c3ff;display:inline-grid;width:var(--game-hex-size);height:var(--game-hex-size);place-items:center;flex:0 0 auto;filter:drop-shadow(0 9px 16px rgba(0,0,0,.3));vertical-align:middle}
.game-hex__rim,.game-hex__core{display:grid;width:100%;height:100%;place-items:center;clip-path:polygon(25% 5%,75% 5%,98% 50%,75% 95%,25% 95%,2% 50%)}
.game-hex__rim{padding:3px;background:linear-gradient(145deg,var(--game-hex-b),var(--game-hex-a) 48%,#201939 49%,var(--game-hex-a));box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.game-hex__core{position:relative;overflow:hidden;background:radial-gradient(circle at 38% 24%,rgba(255,255,255,.18),transparent 32%),#111322}
.game-hex__core::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 28%,rgba(255,255,255,.22) 46%,transparent 62%);transform:translateX(-130%);animation:game-hex-shine 6s ease-in-out infinite;pointer-events:none}
.game-hex img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.game-hex__fallback{font-family:'Fraunces',serif;font-size:calc(var(--game-hex-size)*.27);font-weight:850;letter-spacing:.02em;color:#fff}
.game-hex--coral{--game-hex-a:#ff765e;--game-hex-b:#ffc47b}.game-hex--gold{--game-hex-a:#d9a441;--game-hex-b:#fff0a6}.game-hex--violet{--game-hex-a:#8a72ff;--game-hex-b:#dbb7ff}.game-hex--mint{--game-hex-a:#3fbd91;--game-hex-b:#b4ffe2}.game-hex--blue{--game-hex-a:#4c8cff;--game-hex-b:#a6d8ff}
.tile--crystal{position:relative;overflow:hidden}.tile--crystal::before{content:"";position:absolute;inset:auto -30% -55% 35%;height:80%;background:radial-gradient(circle,rgba(132,111,255,.18),transparent 68%);pointer-events:none}.tile__art--hex{overflow:visible;background:transparent}.featured-art--hex{overflow:visible;background:transparent}
@keyframes game-hex-shine{0%,55%,100%{transform:translateX(-140%)}70%{transform:translateX(140%)}}
@media (prefers-reduced-motion:reduce){.game-hex__core::after{animation:none}}

/* 2026 Portal-Shell – direkt aus der freigegebenen Designvorschau portiert. */
.portal-ambient{position:fixed;width:42rem;height:42rem;border-radius:50%;filter:blur(110px);opacity:.11;pointer-events:none;z-index:0}.portal-ambient--one{top:-24rem;right:-8rem;background:#7b5cff}.portal-ambient--two{right:-20rem;bottom:-22rem;background:#ff526f}.portal-shell{z-index:1;min-height:100vh}.portal-shell .sidebar{width:228px;padding:28px 16px 18px;background:rgba(7,9,15,.96);border-right:1px solid rgba(255,255,255,.07)}.portal-shell .sidebar__brand{padding:4px 13px 31px}.portal-shell .sidebar__logo{height:31px;max-width:154px}.portal-shell .nav-link{min-height:44px;padding:0 14px;margin:1px 0;border-radius:11px;font-size:.86rem}.portal-shell .nav-section{padding:19px 14px 8px;font-size:.59rem;letter-spacing:.19em}.sidebar-server{margin-top:auto;display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#10131c}.sidebar-server strong,.sidebar-server small{display:block}.sidebar-server strong{font-size:.72rem;color:#e9ebf4}.sidebar-server small{font-size:.62rem;color:#6f788b;margin-top:2px}.portal-shell .main{margin-left:228px}.portal-topbar{justify-content:space-between!important;height:72px!important;padding:0 32px!important}.portal-topbar__title{display:flex;flex-direction:column;line-height:1.15}.portal-topbar__title span{font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#616a7d}.portal-topbar__title strong{font-family:var(--font-title);font-size:1.05rem;color:#f5f6fa}.portal-topbar__actions{margin-left:auto;display:flex;align-items:center;gap:10px}.portal-shell .content{max-width:none;width:100%;padding:32px;box-sizing:border-box}.portal-shell .card{border-radius:17px;background:linear-gradient(145deg,rgba(18,21,31,.98),rgba(11,14,22,.98));border:1px solid rgba(255,255,255,.08)}
body .profile-shell,body .profile-hero,body .season-legacy-list{font-family:var(--font)}body .profile-banner{border-radius:20px!important;border:1px solid rgba(255,255,255,.09)!important;background:radial-gradient(circle at 72% 18%,rgba(128,65,214,.35),transparent 35%),linear-gradient(135deg,#111525,#19132a 62%,#0c1019)!important}body .season-legacy-card{border-radius:17px!important;background:#11141d!important;border-color:rgba(255,255,255,.08)!important}body .tabs{gap:10px!important}body .tab-btn{min-height:44px!important;padding:0 17px!important;font-weight:700!important}
@media(max-width:900px){.portal-shell .sidebar{width:205px}.portal-shell .main{margin-left:205px}.portal-shell .content{padding:22px}.logout-compact{display:none}}@media(max-width:720px){.portal-shell .sidebar{display:none}.portal-shell .main{margin-left:0}.portal-topbar__title{display:none}.portal-topbar__actions{width:100%;justify-content:flex-end}.portal-shell .content{padding:15px}.portal-shell .user-chip{max-width:190px}}