/* ===================================================================
   REVIVEGG — PREMIUM ORANGE THEME
   Live Beta v1 — FINAL STABLE
=================================================================== */

/* =========================
   GLOBAL
========================= */
* {
    box-sizing: border-box;
}

body {
    background: #121212;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    padding-bottom: 60px; /* Footer Platz */
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================
   HEADER
========================= */
.revive-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: #0f0f0f;
    border-bottom: 3px solid #ff6600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    z-index: 10000;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.revive-logo {
    height: 42px;
    filter: drop-shadow(0 0 4px #ff6600);
}

.revive-title {
    color: #ff7a1a;
    font-size: 22px;
    font-weight: 900;
}

.header-nav {
    display: flex;
    gap: 28px;
}

.header-nav a {
    color: #ddd;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

.header-nav a:hover {
    color: #ff8c3c;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-right: 20px; /* weniger Druck nach links */
}

.global-search {
    height: 38px;
    padding: 0 12px;
    background: #1e1e1e;
    border-radius: 6px;
    border: none;
    color: #fff;
}

.header-user {
    padding: 8px 14px;
    background: #1a1a1a;
    border-radius: 6px;
    max-width: 220px; /* vorher zu eng */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* =========================
   SIDEBAR
========================= */
.revive-sidebar {
    position: fixed;
    top: 0px;
    left: 0;
    width: 220px;
    height: calc(100vh - 90px);
    background: #0f0f0f;
    border-right: 3px solid #ff6600;
    padding-top: 15px;
    overflow-y: auto;
    z-index: 9999;
}

.sidebar-section-title {
    padding: 10px 22px;
    font-size: 12px;
    font-weight: 700;
    color: #ff7a1a;
}

.sb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.sb-item:hover {
    background: #1a1a1a;
}

.sb-item.active {
    background: #ff6600;
    color: #000;
    font-weight: 700;
}

/* =========================
   CONTENT (GLOBAL – ALLE SEITEN)
========================= */
.content-wrapper {
    margin-left: 250px;
    margin-top: 90px;
    padding: 24px;

    max-width: 1550px;
    margin-right: auto;

    min-height: calc(100vh - 142px); /* Header + Footer */
    overflow: visible;               /* ❗ NIEMALS hidden */
}

/* =========================
   CARDS
========================= */
.content-card {
    background: linear-gradient(180deg, #181818, #141414);
    border: 1px solid #292929;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 0 16px rgba(255,102,0,0.15);
}

/* =========================
   BUTTONS
========================= */
.revive-btn-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 900;
    background: linear-gradient(135deg, #ff8a00, #ff5200);
    color: #000;
    border: 1px solid #ff9a3c;
    cursor: pointer;
    transition: 0.15s ease;
}

.revive-btn-orange:hover {
    background: linear-gradient(135deg, #ff9a33, #ff6500);
    box-shadow: 0 0 16px rgba(255,102,0,0.35);
    transform: translateY(-1px);
}

.revive-btn-orange.danger {
    background: linear-gradient(135deg, #aa0000, #ff3300);
    color: #fff;
}

/* =========================
   FOOTER
========================= */
.rev-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px;
    background: #0c0c0c;
    border-top: 2px solid #ff6600;
    display: flex;
    align-items: center;
    z-index: 9999;
}

.rev-footer-inner {
    max-width: 1550px;
    margin: 0 auto;
    width: 100%;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #999;
}

/* ===================================================================
   LOBBY ROOM — ISOLATED (ZERSTÖRT KEINE ANDEREN SEITEN)
=================================================================== */

.page-lobby-room .lobby-room-grid-fixed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 10px;
}

.page-lobby-room .lobby-team-card {
    min-height: 220px;
    max-height: 260px;
    overflow-y: auto;
}

.page-lobby-room .spectator-card {
    min-height: 180px;
    max-height: 220px;
}

.page-lobby-room .lobby-chat-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.page-lobby-room .lobby-chat-box {
    flex: 1;
    background: #101010;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 12px;
    overflow-y: auto;
    font-size: 14px;
}

.page-lobby-room .chat-input-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.page-lobby-room .chat-input-row input {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background: #1e1e1e;
    border: 1px solid #333;
    color: #fff;
}

/* =========================
   MAP VOTING
========================= */
.page-lobby-room .map-holder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.page-lobby-room .map-btn {
    background: linear-gradient(180deg, #1b1b1b, #121212);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
}

.page-lobby-room .map-btn:hover {
    border-color: #ff6600;
    box-shadow: 0 0 10px rgba(255,102,0,0.25);
}

.page-lobby-room .map-btn.active {
    outline: 2px solid #ff6600;
}
/* ======================================================
   PROFILE — MODERN BETA FIX (FINAL)
====================================================== */

/* HERO CARD */
.profile-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* LEFT SIDE */
.profile-left {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* AVATAR FALLBACK (BUCHSTABE) */
.avatar-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at top left, #ff8a00, #ff5200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 900;
    color: #000;
    box-shadow: 0 0 18px rgba(255,102,0,0.45);
    user-select: none;
}

/* PROFILE INFO */
.profile-info h2 {
    margin: 0;
    font-size: 26px;
    color: #ff6600;
}

.profile-info .last-online {
    margin-top: 6px;
    font-size: 13px;
    color: #aaa;
}

/* RIGHT SIDE */
.profile-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

/* ELO BOX */
.elo-box {
    background: #0f0f0f;
    border: 2px solid #ff6600;
    border-radius: 12px;
    padding: 14px 22px;
    text-align: center;
    min-width: 140px;
}

.elo-label {
    font-size: 13px;
    color: #ccc;
}

.elo-value {
    font-size: 34px;
    font-weight: 900;
    color: #ff6600;
    line-height: 1.1;
}

/* LEVEL BAR */
.level-box {
    width: 180px;
}

.level-box span {
    font-size: 13px;
    color: #aaa;
}

.level-bar {
    height: 8px;
    background: #222;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 6px;
}

.level-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8a00, #ff5200);
    box-shadow: 0 0 8px rgba(255,102,0,0.6);
}

/* STATS GRID */
.content-grid.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px;
    margin-bottom: 30px;
}

/* STAT CARD */
.stat-card {
    text-align: center;
}

.stat-title {
    font-size: 13px;
    color: #aaa;
}

.stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #ff6600;
}

/* BETA INFO */
.beta-info p {
    color: #bbb;
    font-size: 14px;
    line-height: 1.6;
}
/* ===============================
   SETTINGS – REVIVEGG PREMIUM
================================ */

.settings-card {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px 34px;
    background: linear-gradient(180deg, #141414, #0e0e0e);
    border: 1px solid #262626;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(255,102,0,0.08);
}

.settings-card h2 {
    color: #ff7a18;
    margin-bottom: 22px;
    font-size: 22px;
}

.settings-section {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #1f1f1f;
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section h3 {
    color: #ff6600;
    margin-bottom: 14px;
    font-size: 15px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Inputs */
.settings-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.settings-row input,
.settings-section select {
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    transition: all .2s ease;
}

.settings-row input:focus,
.settings-section select:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 2px rgba(255,102,0,.2);
    outline: none;
}

/* Toggles */
.settings-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.toggle {
    position: relative;
    padding: 8px 14px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    cursor: pointer;
    color: #ccc;
    font-size: 13px;
    transition: all .2s ease;
}

.toggle input {
    display: none;
}

.toggle:has(input:checked) {
    background: linear-gradient(135deg, #ff6600, #ff7a18);
    color: #000;
    border-color: transparent;
    box-shadow: 0 0 12px rgba(255,102,0,.5);
}

/* Save Button */
.settings-actions {
    margin-top: 26px;
    display: flex;
    justify-content: flex-end;
}

.settings-actions button {
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

/* Mobile */
@media (max-width: 900px) {
    .settings-row {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   REVIVEGG — PATCH PACK (keep old working CSS, add missing parts)
   -> Ganz unten in style.css einfügen
=================================================================== */

/* GLOBAL SAFETY (verhindert kaputte Bilder/Overflows wie in Ranking) */
img { max-width: 100%; height: auto; }
.content-card, .ranking-table-wrapper, .server-entry { overflow: hidden; }

/* ---------------------------
   DASHBOARD: ACTION BUTTONS
   Matches/Profil als Buttons (auch wenn es nur <a> Links sind)
--------------------------- */
.dash-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top: 12px; }

.dash-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none !important;
    border: 1px solid #2a2a2a;
    background: #171717;
    color: #fff !important;
    transition: .15s ease;
}

.dash-actions a:hover {
    transform: translateY(-1px);
    border-color: #ff6600;
    box-shadow: 0 0 12px rgba(255,102,0,.20);
}

/* Orange Primary bleibt orange */
.dash-actions a.lobby-join-btn {
    background: linear-gradient(135deg, #ff8a00, #ff5200) !important;
    border: 1px solid #ff9a3c !important;
}

/* Blue Buttons (falls du revive-btn-blue nutzt) */
.dash-actions a.revive-btn-blue,
.revive-btn-blue {
    background: #2850ff !important;
    border: 1px solid #4d6dff !important;
    color: #fff !important;
}
.dash-actions a.revive-btn-blue:hover,
.revive-btn-blue:hover {
    background: #3b63ff !important;
}

/* ---------------------------
   LOBBY PAGE: Layout helpers (damit nicht alles links klebt)
--------------------------- */
.lobby-page-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 22px;
    align-items: start;
}

@media (max-width: 1100px) {
    .lobby-page-grid { grid-template-columns: 1fr; }
}

.lobby-create-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 600px) {
    .lobby-create-card .form-row { grid-template-columns: 1fr; }
}

.lobby-create-card label {
    display:block;
    font-size: 12px;
    color:#aaa;
    margin-bottom:6px;
    font-weight:700;
}

.input-text, .input-select {
    width: 100%;
    padding: 10px 12px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.input-text:focus, .input-select:focus {
    border-color: #ff6600;
    box-shadow: 0 0 8px rgba(255,102,0,0.25);
}

/* Lobby Cards schöner & lesbar */
.lobby-card {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 14px;
    padding: 14px;
    background:#111;
    border:1px solid #222;
    border-radius: 12px;
    margin-bottom: 12px;
}

.lobby-card .meta {
    display:flex;
    flex-direction:column;
    gap: 4px;
    font-size: 13px;
    color:#bbb;
}

.lobby-card .title {
    font-size: 15px;
    font-weight: 900;
    color:#fff;
}

.lobby-card .title small {
    font-weight: 700;
    color:#ff8c3c;
}

/* ---------------------------
   RANKING: restore missing table styles (war bei dir vorher drin)
--------------------------- */
.ranking-table-wrapper {
    width: 100%;
    background: #0f0f0f;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #ff6600;
    overflow-x: auto;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th {
    text-align: left;
    padding: 12px;
    font-size: 14px;
    color: #ff914d;
    border-bottom: 2px solid #333;
    white-space: nowrap;
}

.ranking-table td {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid #222;
}

.rank-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rank-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ff6600;
    object-fit: cover;
}

.rank-me {
    background: rgba(255, 102, 0, 0.15);
    border-left: 4px solid #ff6600;
}

.online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.online  { background: #00ff44; }
.offline { background: #ff3333; }
.busy    { background: #ffaa00; }

/* ---------------------------
   SERVER: restore list styling (war bei dir vorher drin)
--------------------------- */
.server-filter-bar {
    display:flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px;
    background:#1a1a1a;
    border:1px solid #292929;
    border-radius: 12px;
    margin-bottom: 18px;
}

.server-entry {
    margin-top: 16px;
    padding: 18px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #292929;
    box-shadow: 0 0 12px rgba(255,102,0,0.12);
    transition: 0.2s ease;
}
.server-entry:hover {
    border-color:#ff6600;
    box-shadow: 0 0 20px rgba(255,102,0,0.22);
}

.server-info-row {
    display:grid;
    grid-template-columns: 70px 1fr 110px 80px 140px;
    align-items:center;
    gap: 16px;
}
@media (max-width: 900px) {
    .server-info-row { grid-template-columns: 1fr; }
}

.server-game-icon img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid #ff6600;
    background: #0f0f0f;
    padding: 4px;
}

.btn-orange {
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff8a00, #ff5200);
    border-radius: 8px;
    text-decoration: none;
    color: white !important;
    font-weight: 800;
    border: 1px solid #ff9a3c;
    display: inline-block;
    text-align: center;
}

.btn-disabled {
    padding: 10px 18px;
    background: #333;
    border-radius: 8px;
    text-decoration: none;
    color: #777;
    font-weight: 700;
    border: 1px solid #444;
    cursor: not-allowed;
}

/* ---------------------------
   PROFILE + SETTINGS: minimale “nicht-kaputt” Defaults
--------------------------- */
.profile-header,
.settings-card {
    background: #141414;
    border: 1px solid #292929;
    border-radius: 14px;
}

.settings-row {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .settings-row { grid-template-columns: 1fr; } }

/* ===============================
   DASHBOARD – FINAL FIX
=============================== */
.page-dashboard {
    width: 100%;
}

.page-dashboard .dash-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1200px) {
    .page-dashboard .dash-grid {
        grid-template-columns: 1fr;
    }
}

/* Stats Grid sauber ausrichten */
.page-dashboard .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
}

/* Match Cards dürfen NICHT stretchen */
.page-dashboard .match-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
/* ===============================
   FORCE BUTTON STYLE
   für <a> Links wie Beitreten
=============================== */
a.lobby-join-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 900;
    text-decoration: none !important;
    background: linear-gradient(135deg, #ff8a00, #ff5200);
    color: #000 !important;
    border: 1px solid #ff9a3c;
    transition: 0.15s ease;
}

a.lobby-join-btn:hover {
    background: linear-gradient(135deg, #ff9a33, #ff6500);
    box-shadow: 0 0 16px rgba(255,102,0,0.35);
    transform: translateY(-1px);
}
/* ===============================
   HEADER – ALIGNMENT FIX
=============================== */
.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 20px; /* weniger Druck nach links */
}

.header-user {
    max-width: 220px; /* vorher zu eng */
}

/* =========================
   HEADER PROFILE DROPDOWN
========================= */
.profile-menu {
    position: absolute;
    top: 70px;
    right: 25px;
    background: #111;
    border: 1px solid #292929;
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    z-index: 10001;
}

.profile-menu.open {
    display: flex;
}

.profile-menu a {
    padding: 12px 16px;
    color: #ddd;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid #222;
}

.profile-menu a:hover {
    background: #1a1a1a;
    color: #ff8c3c;
}

.profile-menu a.logout {
    color: #ff5555;
    border-bottom: none;
}
/* ===================================================================
   DASHBOARD V2 — FACEIT-STYLE (BETA v1)
   Ergänzung, KEIN Ersatz
=================================================================== */

/* HERO */
.dash-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.dash-hero h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    color: #ff7a1a;
}

.dash-sub {
    margin-top: 6px;
    font-size: 14px;
    color: #aaa;
}

/* LIVE PILLS */
.pills {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pill {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    background: #101010;
    border: 1px solid #292929;
    border-radius: 999px;
    font-size: 13px;
    color: #ccc;
}

.pill strong {
    color: #fff;
    font-weight: 900;
}

/* PRIMARY ACTION */
.dash-actions {
    display: flex;
    align-items: center;
}

.dash-actions .lobby-join-btn {
    font-size: 16px;
    padding: 14px 26px;
    border-radius: 12px;
}

/* GRID */
.page-dashboard .dash-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 24px;
}

@media (max-width: 1200px) {
    .page-dashboard .dash-grid {
        grid-template-columns: 1fr;
    }
}

/* PERFORMANCE SNAPSHOT */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stat-box {
    background: #111;
    border: 1px solid #262626;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
}

.stat-box .label {
    font-size: 12px;
    color: #aaa;
}

.stat-box .value {
    font-size: 22px;
    font-weight: 900;
    color: #ff7a1a;
    margin-top: 4px;
}

/* ACTIVE LOBBIES */
.lobby-card {
    background: #0f0f0f;
    border: 1px solid #262626;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.lobby-card + .lobby-card {
    margin-top: 12px;
}

.lobby-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lobby-title {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
}

.lobby-sub {
    font-size: 13px;
    color: #aaa;
}

.lobby-status {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    background: #222;
    color: #fff;
}

.lobby-status.waiting { background: #ffaa00; color:#000; }
.lobby-status.live    { background: #ff3300; color:#fff; }

/* RECOMMENDATION */
.reco-box {
    background: #101010;
    border: 1px dashed #ff6600;
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
    color: #ddd;
}

/* ======================================================
   SERVER PAGE – FINAL POLISH (Logos, Slots, Join Button)
   Nur Ergänzung – zerstört nichts Bestehendes
====================================================== */

/* Server Entry sauber strukturieren */
.server-entry {
    display: block;
}

/* Grid anpassen: Logo | Info | Slots | Button */
.server-info-row {
    display: grid;
    grid-template-columns: 64px 1fr 90px 140px;
    align-items: center;
    gap: 18px;
}

/* =========================
   GAME LOGOS
========================= */
.server-game-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.server-game-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 8px;
    background: #0c0c0c;
    border: 1px solid #ff6600;
    padding: 6px;
    box-shadow: 0 0 10px rgba(255,102,0,0.25);
}

/* =========================
   SERVER INFO TEXT
========================= */
.server-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.server-info .server-name {
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
}

.server-info .server-meta {
    font-size: 13px;
    color: #aaa;
}

/* =========================
   LIVE SLOTS
========================= */
.server-slots {
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #ffb36b;
}

.server-slots strong {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: #ff7a1a;
}

/* =========================
   JOIN BUTTON – DEZENT
========================= */
.server-join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none !important;

    /* weniger grell */
    background: linear-gradient(135deg, #ff7a18, #ff5200);
    color: #000;

    border: 1px solid #ff9a3c;
    transition: all 0.15s ease;
}

.server-join-btn:hover {
    background: linear-gradient(135deg, #ff8f3a, #ff6a1a);
    box-shadow: 0 0 14px rgba(255,102,0,0.35);
    transform: translateY(-1px);
}

/* Disabled / Offline */
.server-join-btn.disabled {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
}

/* =========================
   MOBILE FIX
========================= */
@media (max-width: 900px) {
    .server-info-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .server-game-icon {
        margin-bottom: 8px;
    }
}
/* ======================================================
   SERVER PAGE – MODERN COMPACT GRID (FINAL)
====================================================== */

/* Grid für alle Public Server */
.server-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

/* Einzelne Server Card */
.server-entry {
    background: linear-gradient(180deg, #161616, #0f0f0f);
    border: 1px solid #262626;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.15s ease;
}

.server-entry:hover {
    border-color: #ff7a18;
    box-shadow: 0 0 18px rgba(255,122,24,0.15);
    transform: translateY(-2px);
}

/* Inhalt vertikal */
.server-info-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

/* =========================
   GAME LOGO – kleiner!
========================= */
.server-game-icon img {
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 10px;
    background: #0b0b0b;
    border: 1px solid #ff7a18;
    box-shadow: none;
}

/* =========================
   SERVER NAME
========================= */
.server-info .server-name {
    font-size: 15px;
    font-weight: 900;
    color: #ffffff;
}

.server-info .server-meta {
    font-size: 12px;
    color: #9a9a9a;
    line-height: 1.4;
}

/* =========================
   LIVE SLOTS – kompakt
========================= */
.server-slots {
    font-size: 12px;
    color: #aaa;
}

.server-slots strong {
    font-size: 16px;
    color: #ff7a18;
}

/* =========================
   JOIN BUTTON – ruhig
========================= */
.server-join-btn {
    width: 100%;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    text-align: center;

    background: #1f1f1f;
    color: #ff7a18;

    border: 1px solid #ff7a18;
    transition: all 0.15s ease;
}

.server-join-btn:hover {
    background: #ff7a18;
    color: #000;
    box-shadow: 0 0 12px rgba(255,122,24,0.35);
}

/* Disabled */
.server-join-btn.disabled {
    background: #1a1a1a;
    color: #666;
    border-color: #333;
    cursor: not-allowed;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
    .server-list {
        grid-template-columns: 1fr;
    }
}
/* ===============================
   SERVER PAGE – FORCE COMPACT
   überschreibt alte Layouts
=============================== */

/* Alte Listenbreite killen */
.server-entry {
    margin: 0 !important;
    width: 100% !important;
}

/* Kein seitliches Strecken mehr */
.server-info-row {
    width: 100%;
}

/* Server-Seite zentrieren */
.page-server .content-wrapper {
    max-width: 1400px;
}

/* Falls alte Buttons reinfunken */
a.btn-orange,
.btn-orange {
    all: unset;
}

/* ===============================
   PUBLIC SERVER – FINAL DESIGN
=============================== */

.page-server .server-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
    margin-top: 25px;
}

.server-card {
    background: linear-gradient(145deg,#161616,#101010);
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 18px;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 15px;
    align-items: center;
    transition: all .2s ease;
}

.server-card:hover {
    border-color: #ff8800;
    box-shadow: 0 0 14px rgba(255,136,0,.25);
}

.server-icon {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #0d0d0d;
}

.server-name {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
}

.server-meta {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

.server-slots {
    text-align: center;
    font-size: 13px;
    color: #ddd;
}

.server-slots strong {
    display: block;
    font-size: 15px;
    color: #ff9900;
}

.server-join-btn {
    background: linear-gradient(135deg,#ff8800,#ff6600);
    padding: 9px 14px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    transition: all .2s ease;
}

.server-join-btn:hover {
    background: linear-gradient(135deg,#ffaa00,#ff7700);
    transform: translateY(-1px);
}
/* =========================
   SERVER CARDS
========================= */

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.server-card {
    display: flex;
    gap: 18px;
    padding: 16px;
    background: linear-gradient(145deg, #0f0f0f, #161616);
    border: 1px solid #262626;
    border-radius: 14px;
    align-items: center;
    transition: 0.25s;
}

.server-card.online {
    border-color: #ff7a00;
}

.server-card.offline {
    opacity: 0.6;
}

.server-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(255,122,0,0.15);
}

/* ICON */
.server-icon img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #111;
}

/* INFO */
.server-info {
    flex: 1;
}

.server-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.server-meta {
    font-size: 13px;
    color: #aaa;
    margin: 4px 0 8px;
    display: flex;
    gap: 12px;
}

/* STATUS */
.status-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.status-badge.online {
    background: rgba(0,180,90,0.2);
    color: #4cff9a;
}

.status-badge.offline {
    background: rgba(180,0,0,0.2);
    color: #ff5a5a;
}

/* SLOTS */
.server-slots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slot-bar {
    width: 140px;
    height: 8px;
    background: #222;
    border-radius: 6px;
    overflow: hidden;
}

.slot-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff7a00, #ffaa00);
}

/* ACTION */
.server-action {
    min-width: 120px;
    text-align: right;
}

.btn-join {
    background: linear-gradient(135deg, #ff7a00, #ff9f2d);
    color: #000;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.btn-join:hover {
    filter: brightness(1.1);
}

.btn-disabled {
    color: #777;
    font-size: 13px;
}
/* =========================
   LOBBY – MATCH SETUP CARD
========================= */

.lobby-setup-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.setup-map-preview {
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
}

.setup-map-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.setup-info h3 {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #ff6600;
}

.setup-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.setup-row span {
    color: #aaa;
}

.setup-row strong {
    color: #fff;
    font-weight: 600;
}

.setup-server {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
}

.server-label {
    color: #aaa;
    display: block;
}

.server-status {
    color: #ff6600;
    font-weight: 600;
}
/* ===================================================================
   REVIVEGG — LOBBY ROOM (PHASE 3 UI ONLY)
=================================================================== */
.page-lobby-room .content-card{
  border-radius: 14px;
}

.page-lobby-room .muted{ color:#a7a7a7; }
.page-lobby-room .tiny{ font-size:12px; margin-top:8px; opacity:.8; }

.lobby-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.lobby-kicker{
  color:#ff6600;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.9;
}
.lobby-title h2{
  margin:4px 0 0 0;
}
.lobby-sub{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.status-pill.is-waiting{ box-shadow:0 0 0 1px rgba(255,102,0,.20) inset; }
.status-pill.is-live{ box-shadow:0 0 0 1px rgba(0,255,170,.18) inset; }
.status-pill.is-starting{ box-shadow:0 0 0 1px rgba(255,204,0,.18) inset; }
.status-pill.is-finished{ box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; }

.lobby-hero-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.revive-btn-orange.outline{
  background: transparent !important;
  border:1px solid rgba(255,102,0,.65) !important;
}

.lobby-actionbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.action-group{
  display:flex;
  align-items:center;
  gap:10px;
}
.action-group.right{ margin-left:auto; }
.action-label{
  font-size:12px;
  color:#a7a7a7;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.action-meta{
  color:#ffffff;
  font-weight:600;
  font-size:13px;
  opacity:.9;
}
.action-divider{
  width:1px;
  height:34px;
  background: rgba(255,255,255,.08);
}

.slot-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:700;
}

.segmented{
  display:flex;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  overflow:hidden;
}
.seg-btn{
  border:0;
  background:transparent;
  color:#cfcfcf;
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
}
.seg-btn:hover{ background: rgba(255,255,255,.06); }
.seg-btn.active{
  background: rgba(255,102,0,.18);
  color:#fff;
}

#ready-btn.active{
  box-shadow:0 0 0 2px rgba(255,102,0,.25) inset;
}

/* GRID */
.lobby-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:16px;
  margin-top:16px;
}
@media (max-width: 1200px){
  .lobby-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.card-head h3{
  margin:0;
  letter-spacing:.02em;
}
.mini-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  min-width:26px;
}

/* TEAM LIST */
.team-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:120px;
}
.player-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border-radius:10px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.player-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.player-name{
  font-weight:700;
}
.leader-badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,102,0,.18);
  border:1px solid rgba(255,102,0,.35);
  color:#fff;
  font-weight:800;
}
.ready-badge{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
}
.ready-badge.yes{
  background: rgba(0,255,170,.12);
  border-color: rgba(0,255,170,.20);
}
.ready-badge.no{
  background: rgba(255,0,0,.10);
  border-color: rgba(255,0,0,.18);
}
.empty{
  color:#7b7b7b;
  padding:12px 0;
}

/* CHAT */
.chat-box{
  height: 220px;
  max-height: 220px;
  overflow-y:auto;
  padding:10px;
  border-radius:12px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
}
.chat-line{ padding:4px 0; }
.chat-name{ color:#ff6600; font-weight:800; }
.chat-msg{ color:#f1f1f1; }
.chat-input-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.chat-input-row input{
  flex:1;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  outline:none;
}
.chat-input-row input:focus{
  border-color: rgba(255,102,0,.55);
  box-shadow:0 0 0 3px rgba(255,102,0,.12);
}

/* MAP VOTE */
.map-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 1200px){
  .map-grid{ grid-template-columns: 1fr 1fr; }
}
.map-tile{
  text-align:left;
  border-radius:12px;
  padding:12px;
  cursor:pointer;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.map-tile:hover{
  border-color: rgba(255,102,0,.30);
}
.map-tile.active{
  border-color: rgba(255,102,0,.70);
  box-shadow:0 0 0 2px rgba(255,102,0,.18) inset;
}
.map-name{
  font-weight:900;
  letter-spacing:.02em;
}
.map-meta{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.map-votes{
  font-weight:900;
  color:#ff6600;
}

/* MATCH SETUP */
.map-preview{
  position:relative;
  width:100%;
  height:160px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}
.map-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}
.map-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.map-overlay-title{
  font-weight:950;
  font-size:16px;
}
.map-overlay-sub{
  color:#cfcfcf;
  font-size:12px;
  margin-top:2px;
}
.setup-rows{
  margin-top:12px;
}
.setup-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px;
}
.setup-row span{ color:#a7a7a7; }
.setup-row strong{ color:#fff; font-weight:900; }
.setup-server{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.server-status{
  color:#ff6600;
  font-weight:900;
}
/* CREATOR BADGE */
.creator-badge{
  font-size:11px;
  padding:4px 9px;
  border-radius:999px;
  background: linear-gradient(135deg, #ff6600, #ff9900);
  color:#000;
  font-weight:900;
  letter-spacing:.04em;
  border:1px solid rgba(255,153,0,.8);
  box-shadow: 0 0 0 2px rgba(255,153,0,.15);
}
/* HEADER – System Ampel */
.system-ampel { display:flex; align-items:center; margin-right:6px; }
.ampel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.ampel-dot.green { background: #2ecc71; }
.ampel-dot.red   { background: #e74c3c; }
.ampel-dot.yellow{ background: #f1c40f; }
/* FOOTER – Social Icons */
.footer-social { display:flex; gap:14px; align-items:center; }
.footer-social a svg {
  width:18px; height:18px; fill:#aaa; transition:.15s ease;
}
.footer-social a:hover svg { fill:#ff7a18; }
/* =========================
   HEADER LOGO
========================= */
.revive-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.revive-logo-icon {
    width: 36px;
    height: 36px;
    fill: #ff7a18;
    filter: drop-shadow(0 0 6px rgba(255,122,24,0.6));
    flex-shrink: 0;
}

.revive-logo-text {
    font-size: 24px;          /* LOGO-GRÖSSE */
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #ff7a18;
    text-shadow:
        0 0 6px rgba(255,122,24,0.6),
        0 0 14px rgba(255,122,24,0.35);
}

/* Mobile */
@media (max-width: 768px) {
    .revive-logo-text {
        font-size: 18px;
    }
    .revive-logo-icon {
        width: 28px;
        height: 28px;
    }
}
/* =========================
   REVIVEGG BRANDING (HEADER)
========================= */

.revive-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.revive-brand-logo {
    height: 48px; /* doppelt so präsent wie vorher */
    width: auto;
    filter: drop-shadow(0 0 6px rgba(255,120,0,0.5));
}

.revive-brand-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ff7a00;
    text-transform: uppercase;
}
/* Mobile */
@media (max-width: 768px) {
    .revive-brand-logo {
        height: 36px;
    }
    .revive-brand-text {
        font-size: 22px;
        letter-spacing: 0.8px;
    }
}
.xp-bar {
  width: 100%;
  height: 8px;
  background: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff7a00, #ffae42);
  transition: width 0.4s ease;
}

.xp-text {
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
}
/* ===================================================================
   DASHBOARD PATCH (Card-Header, Pills, 4-Grid, XP wrapper)
=================================================================== */

.page-dashboard .dash-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.card-header h3{
  margin:0;
}

.card-link{
  color:#ff6600;
  font-weight:600;
  text-decoration:none;
  opacity:.9;
  white-space:nowrap;
}
.card-link:hover{ opacity:1; text-decoration:underline; }

.stats-grid.four{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xp-wrap{ margin-top:14px; }

@media (max-width: 1100px){
  .stats-grid.four{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .stats-grid.four{ grid-template-columns: 1fr; }
  .page-dashboard .dash-hero{ flex-direction:column; align-items:flex-start; }
  .page-dashboard .dash-actions{ width:100%; justify-content:flex-start; }
}
/* ===============================
   DASHBOARD – LIVE AKTIVITÄT FIX
   - fixed height + scroll
   - kompaktere lobby cards
   - kein Layout-Shift
=============================== */

/* Live-Aktivität Card: Inhalt scrollt statt Layout zu drücken */
.page-dashboard #activeLobbiesList{
  max-height: 260px;      /* Höhe der Lobby-Liste */
  overflow-y: auto;
  padding-right: 6px;     /* damit scrollbar nicht auf text klebt */
}

/* Scrollbar dezenter */
.page-dashboard #activeLobbiesList::-webkit-scrollbar{
  width: 8px;
}
.page-dashboard #activeLobbiesList::-webkit-scrollbar-thumb{
  background: rgba(255,122,24,0.25);
  border-radius: 10px;
}
.page-dashboard #activeLobbiesList::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.04);
}

/* Lobby Cards kleiner + sauberer */
.page-dashboard .lobby-card{
  padding: 12px 14px;
  border-radius: 12px;
  gap: 14px;
}

.page-dashboard .lobby-title{
  font-size: 14px;
}

.page-dashboard .lobby-sub{
  font-size: 12px;
  opacity: .85;
}

/* Join Button etwas kompakter */
.page-dashboard .lobby-join-btn{
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
}

/* Performance Snapshot stabil: grid soll nicht durch andere Card „mitgezogen“ werden */
.page-dashboard .dash-grid{
  align-items: start;
}

/* =========================
   DASHBOARD GRID FIX
========================= */

.dashboard-grid-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .dashboard-grid-top {
        grid-template-columns: 1fr;
    }
}

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

.welcome-card h2 {
    margin-bottom: 6px;
}

.welcome-card .dash-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.welcome-card .pill {
    background: #141414;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
}

/* =========================
   SNAPSHOT
========================= */

.snapshot-card h3 {
    margin-bottom: 14px;
}

.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.snapshot-item {
    background: #141414;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.snapshot-item span {
    display: block;
    font-size: 12px;
    color: #aaa;
}

.snapshot-item strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    color: #ff8800;
}
/* =========================
   DASHBOARD – TOP GRID FIX
========================= */

.dashboard-grid-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .dashboard-grid-top {
    grid-template-columns: 1fr;
  }
}

/* WELCOME CARD */
.welcome-card h2 {
  margin-bottom: 6px;
}

.welcome-card .dash-sub {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 10px;
}

/* SNAPSHOT */
.snapshot-card h3 {
  margin-bottom: 14px;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .snapshot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .snapshot-grid {
    grid-template-columns: 1fr;
  }
}

.snapshot-item {
  background: #141414;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.snapshot-item span {
  display: block;
  font-size: 12px;
  color: #aaa;
}

.snapshot-item strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 900;
  color: #ff8800;
}
/* =========================
   LIVE AKTIVITÄT – FIXED CARD + SCROLL
========================= */

.live-activity-card {
  display: flex;
  flex-direction: column;
  height: 280px; /* FIXED HÖHE – anpassbar */
}

/* Der scrollbare Bereich */
.live-activity-card .live-activity-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

/* Scrollbar Styling (optional, passt zu Dark Theme) */
.live-activity-card .live-activity-list::-webkit-scrollbar {
  width: 6px;
}

.live-activity-card .live-activity-list::-webkit-scrollbar-track {
  background: transparent;
}

.live-activity-card .live-activity-list::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.live-activity-card .live-activity-list::-webkit-scrollbar-thumb:hover {
  background: #ff8800;
}
/* =========================
   LADDERS – TOPBAR FIX
   (isoliert, zerstört nichts)
========================= */

.page-ladders .ladder-topbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

/* Tabs ruhiger & klarer */
.page-ladders .match-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Suchfeld besser sichtbar */
.page-ladders .ladder-topbar input {
    align-self: flex-end;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
}

/* Info-Card sauberer */
.page-ladders .content-card {
    box-shadow: 0 0 14px rgba(255,102,0,0.12);
}
/* =========================================================
   LADDERS — MODERN FACEIT / REVIVEGG BETA v1
========================================================= */

.page-ladders .ladder-modern {
    border-collapse: separate;
    border-spacing: 0 10px;
}

/* Jede Zeile = Card */
.page-ladders .ladder-modern tbody tr {
    background: linear-gradient(180deg, #151515, #0f0f0f);
    border-radius: 14px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.page-ladders .ladder-modern tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.6);
    background: linear-gradient(180deg, #1a1a1a, #111);
}

/* Eigener Spieler */
.page-ladders .ladder-modern .rank-me {
    background: linear-gradient(180deg, #1b1107, #120a04);
    box-shadow: inset 0 0 0 1px rgba(255,122,26,.35);
}

/* Rank Badge */
.page-ladders .ladder-rank {
    width: 56px;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: #ff7a1a;
}

/* Spieler */
.page-ladders .ladder-player strong {
    font-size: 15px;
    letter-spacing: .3px;
}

.page-ladders .ladder-player-sub {
    font-size: 11px;
    color: #777;
}

/* ELO = Fokus */
.page-ladders .ladder-modern td:nth-child(3) {
    font-size: 18px;
    font-weight: 900;
    color: #ff7a1a;
}

/* Table Header cleaner */
.page-ladders .ranking-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    border-bottom: none;
}

/* Keine harten Linien */
.page-ladders .ranking-table td {
    border-bottom: none;
}

/* Mobile */
@media (max-width: 900px) {
    .page-ladders .ranking-table th:nth-child(n+6),
    .page-ladders .ranking-table td:nth-child(n+6) {
        display: none;
    }
}
/* =========================================================
   LADDERS v2 — JOIN + QUEUE (Faceit style)
========================================================= */

.page-ladders .ladder-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}

.page-ladders .ladder-card{
  background: linear-gradient(180deg, #151515, #0f0f0f);
  border: 1px solid #1f1f1f;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.page-ladders .ladder-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,122,26,.45);
  box-shadow: 0 14px 36px rgba(0,0,0,.6);
}

.page-ladders .ladder-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom: 8px;
}

.page-ladders .ladder-game{
  font-weight: 800;
  color:#fff;
}

.page-ladders .ladder-mode{
  font-weight: 800;
  color:#ff7a1a;
}

.page-ladders .ladder-desc{
  color:#aaa;
  font-size: 13px;
  min-height: 36px;
}

.page-ladders .ladder-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  margin-bottom:10px;
}

.page-ladders .ladder-badge{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #222;
  background:#0f0f0f;
  color:#aaa;
}

.page-ladders .ladder-badge.ok{
  border-color: rgba(255,122,26,.45);
  color:#fff;
}

.page-ladders .ladder-badge.live{
  border-color: rgba(0,255,150,.25);
  color:#bfffe6;
}

.page-ladders .ladder-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.page-ladders .ladder-actions .revive-btn,
.page-ladders .ladder-actions .revive-btn-orange{
  flex: 1;
  min-width: 120px;
}
/* =========================
   LADDERS (Beta v1) — Cards
   scoped: .page-ladders2
========================= */
.page-ladders2 .ladders-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.page-ladders2 .ladders-hero h2 {
  margin: 0 0 6px 0;
  font-size: 20px;
}

.page-ladders2 .ladders-hero p {
  margin: 0;
  color: #9a9a9a;
  font-size: 13px;
}

.page-ladders2 .ladders-hint {
  color: #7f7f7f;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255,102,0,0.25);
  border-radius: 10px;
  background: rgba(255,102,0,0.06);
}

.page-ladders2 .ladders-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 14px;
}

@media (max-width: 1650px){
  .page-ladders2 .ladders-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
}
@media (max-width: 1350px){
  .page-ladders2 .ladders-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 1050px){
  .page-ladders2 .ladders-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 720px){
  .page-ladders2 .ladders-grid { grid-template-columns: 1fr; }
}

.page-ladders2 .ladder-card {
  background: linear-gradient(180deg, rgba(20,20,20,0.95), rgba(12,12,12,0.95));
  border: 1px solid rgba(255,102,0,0.18);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.page-ladders2 .ladder-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}

.page-ladders2 .ladder-game {
  font-weight: 800;
  color: #e8e8e8;
  font-size: 13px;
  letter-spacing: .2px;
}

.page-ladders2 .ladder-mode {
  font-weight: 900;
  color: #ff7a1a;
  font-size: 13px;
}

.page-ladders2 .ladder-desc{
  color:#9a9a9a;
  font-size: 12px;
  margin-bottom: 10px;
  min-height: 30px;
}

.page-ladders2 .ladder-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.page-ladders2 .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color:#a8a8a8;
  font-size: 11px;
}

.page-ladders2 .status-pill.ok{
  border-color: rgba(0,255,120,0.18);
}
.page-ladders2 .status-pill.warn{
  border-color: rgba(255,180,0,0.22);
}
.page-ladders2 .status-pill.off{
  border-color: rgba(255,80,80,0.22);
}

.page-ladders2 .ladder-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.page-ladders2 .btn{
  cursor:pointer;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color:#eaeaea;
  font-weight: 800;
  font-size: 12px;
}

.page-ladders2 .btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}

.page-ladders2 .btn-orange{
  background: linear-gradient(180deg, #ff7a1a, #ff5f00);
  border-color: rgba(255,102,0,0.45);
  color:#101010;
}

.page-ladders2 .btn-dark{
  background: rgba(10,10,10,0.9);
  border-color: rgba(255,255,255,0.10);
}

.page-ladders2 .btn-ghost{
  background: rgba(255,255,255,0.02);
}

.page-ladders2 .ladder-small{
  margin-top: 10px;
  font-size: 11px;
  color:#777;
}
/* ===============================
   LADDERS
=============================== */

.ladder-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ladder-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ladder-controls select {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
}

.ladder-status {
    font-size: 13px;
    color: #aaa;
}
.ladder-game-card {
  display: flex;
  gap: 20px;
  align-items: center;
}

.ladder-game-logo {
  width: 120px;
  height: 80px;
  background: #111;
  border: 1px solid #ff7a00;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7a00;
  font-weight: bold;
}

.ladder-controls-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ladder-select {
  background: #111;
  color: #fff;
  border: 1px solid #333;
  padding: 6px 8px;
}
.party-card .party-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.party-body {
  display:none;
  margin-top:12px;
}
.party-body.open {
  display:block;
}

.party-slots {
  display:flex;
  gap:10px;
  margin-bottom:12px;
}
.party-slot {
  width:48px;
  height:48px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#222;
  border:1px dashed #444;
}
.party-slot.filled {
  border-color:#ff8c00;
}

.ladder-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:20px;
}
.ladder-card.disabled {
  opacity:.4;
  pointer-events:none;
}
.party-popup {
  z-index: 10002;
  pointer-events: auto;
}

.revive-header {
  z-index: 10000;
}
/* ===============================
   PARTY POPUP – FINAL FIX
   =============================== */

.party-popup {
  position: fixed;
  top: 96px;
  right: 22px;
  width: 360px;
  background: linear-gradient(180deg, #151515, #0f0f0f);
  border: 1px solid #1f1f1f;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  padding: 14px;
  z-index: 2147483647;
  display: none;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.party-popup.open {
  display: block;
}

.party-popup .party-body {
  display: block !important;
  overflow: visible !important;
}

.party-popup .party-slots {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.party-popup .slot {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  font-size: 12px;
  color: #ddd;
}

.party-popup .slot.filled {
  border-color: rgba(255,120,0,.35);
  background: rgba(255,120,0,.08);
}

.party-popup .party-actions {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.party-popup .party-invite {
  display: flex !important;
  gap: 6px;
}

.party-popup button,
.party-popup input {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.rev-footer {
  background:#0c0c0c;
  border-top:1px solid #1f1f1f;
  padding:40px 28px 18px;
  color:#bbb;
  font-size:14px;
}

.rev-footer-inner {
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:40px;
  max-width:1400px;
  margin:0 auto;
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:#fff;
  font-size:18px;
}

.footer-brand img {
  width:34px;
  height:34px;
}

.footer-col h4 {
  color:#fff;
  margin-bottom:10px;
}

.footer-col a {
  display:block;
  color:#bbb;
  text-decoration:none;
  margin-bottom:6px;
}

.footer-col a:hover {
  color:#ff7a00;
}

.footer-desc {
  margin-top:10px;
  line-height:1.4;
  color:#aaa;
}

.footer-social {
  margin-top:12px;
  display:flex;
  gap:12px;
  font-size:18px;
}

.footer-bottom {
  margin-top:26px;
  padding-top:14px;
  border-top:1px solid #1f1f1f;
  text-align:center;
  font-size:12px;
  color:#777;
}
/* ================================
   ReviveGG – Lobby UI (additiv)
   ================================ */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.lobby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.lobby-card-modern {
    background: #0f141c;
    border: 1px solid #1f2633;
    border-left: 4px solid #ff8c00;
    padding: 16px;
    border-radius: 6px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.lobby-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(255,140,0,.25);
}

.lobby-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.lobby-meta {
    font-size: 13px;
    opacity: .85;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.lobby-actions {
    text-align: right;
}

/* Fallback falls btn-orange noch nicht existiert */
.btn-orange {
    background: #ff8c00;
    color: #000;
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
}

.btn-orange:hover {
    background: #ff9f26;
}

/* States */
.loading {
    opacity: .7;
    padding: 20px;
}

.empty {
    opacity: .6;
    padding: 20px;
    text-align: center;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

/* === Layout Fix === */
.revive-main {
    display: flex;
    min-height: calc(100vh - 70px);
}

.revive-sidebar {
    width: 240px;
    flex-shrink: 0;
}

.revive-content {
    flex: 1;
    padding: 24px;
    box-sizing: border-box;
    overflow-x: hidden;
}
.content {
  margin-left: 240px; /* Sidebar-Breite */
  padding: 20px;
  min-height: calc(100vh - 120px);
}
/* ===== ReviveGG Lobby Cards ===== */

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

.lobby-card {
    background: #121212;
    border: 1px solid #1f1f1f;
    transition: transform .15s ease, box-shadow .15s ease;
}

.lobby-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px #ff8c00;
}

.lobby-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #1f1f1f;
}

.lobby-game {
    font-weight: 700;
    color: #ff8c00;
}

.status-open {
    font-size: 12px;
    color: #0f0;
}

.lobby-card-body {
    padding: 14px;
}

.lobby-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
}

.lobby-row .label {
    color: #aaa;
}

.lobby-row .value {
    color: #fff;
}

.lobby-card-footer {
    padding: 12px 14px;
    border-top: 1px solid #1f1f1f;
}

.btn-full {
    width: 100%;
    text-align: center;
}
/* =========================
   ReviveGG Lobby / Cards
   ========================= */

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

.lobby-card {
    background: #0f0f0f;
    border: 1px solid #1f1f1f;
    transition: all .15s ease;
}

.lobby-card:hover {
    box-shadow: 0 0 0 1px #ff8c00;
    transform: translateY(-2px);
}

.lobby-card-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #1f1f1f;
}

.lobby-game {
    font-weight: 700;
    color: #ff8c00;
}

.lobby-status {
    font-size: 12px;
}

.status-open {
    color: #00ff88;
}

.status-create {
    color: #ffaa00;
}

.lobby-card-body {
    padding: 14px;
}

.lobby-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.lobby-card-footer {
    padding: 12px 14px;
    border-top: 1px solid #1f1f1f;
}

.btn-full {
    width: 100%;
}
/* =========================================================
   REVIVEGG – GLOBAL LAYOUT FIX
   Phase 1.2 UI Stabilisierung
   ========================================================= */

/* Sidebar */
.sidebar {
  position: fixed;
  top: 64px;               /* Höhe Header */
  left: 0;
  width: 230px;
  height: calc(100vh - 64px);
  background: #0b0b0b;
  border-right: 1px solid #ff7a00;
  z-index: 100;
}

/* Main Content Wrapper */
.main {
  margin-left: 230px;      /* exakt Sidebar-Breite */
  padding: 24px 32px;
  min-height: calc(100vh - 64px);
  background: #0f0f0f;
  box-sizing: border-box;
}

/* Content-Spalte (Cards links wie geplant) */
.cards-left {
  max-width: 620px;        /* NICHT fullscreen */
  width: 100%;
}

/* Cards */
.content-card {
  background: linear-gradient(180deg, #161616, #0f0f0f);
  border: 1px solid rgba(255,122,0,0.25);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 0 18px rgba(255,122,0,0.12);
}

/* Lobby Cards */
.lobby-card {
  background: #121212;
  border: 1px solid rgba(255,122,0,0.25);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

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

.lobby-title {
  font-weight: 600;
  color: #ff9a2f;
}

/* Footer Fix */
footer {
  margin-left: 230px;
  padding: 24px;
  background: #0b0b0b;
  border-top: 1px solid rgba(255,122,0,0.25);
}

/* Responsive Safety */
@media (max-width: 1100px) {
  .cards-left {
    max-width: 100%;
  }
}

.app-root {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding: 24px;
}

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

.lobby-card {
    background: #141414;
    border: 1px solid #ff7a00;
    border-radius: 10px;
    padding: 12px;
}

.lobby-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.status-open {
    color: #2ecc71;
    font-weight: bold;
}
/* =========================================================
   REVIVEGG – LAYOUT STABILISIERUNG (GLOBAL)
   Fix: Header fixed + Sidebar offset + Content wrapper spacing
   ========================================================= */

/* Header immer fixed und mit definierter Höhe */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 10000;
}

/* Body bekommt Platz unter dem Header */
body{
  padding-top: 64px;
}

/* Sidebar muss unter dem Header starten */
.sidebar{
  top: 64px;
  height: calc(100vh - 64px);
}

/* Pages die NICHT .main nutzen (z.B. content-wrapper) */
.content-wrapper{
  margin-left: 230px;         /* Sidebar-Breite */
  padding: 24px 32px;
  min-height: calc(100vh - 64px);
  box-sizing: border-box;
}

/* Footer nicht unter die Sidebar rutschen lassen */
.rev-footer,
footer{
  margin-left: 230px;
}

/* Mobile */
@media (max-width: 1100px){
  .sidebar{
    position: fixed;
    width: 220px;
  }
  .content-wrapper,
  .main,
  .rev-footer,
  footer{
    margin-left: 220px;
    padding: 18px 18px;
  }
}
@media (max-width: 820px){
  .sidebar{
    position: static;
    width: auto;
    height: auto;
    border-right: none;
  }
  .content-wrapper,
  .main,
  .rev-footer,
  footer{
    margin-left: 0;
  }
}
/* =========================
   GLOBAL LAYOUT RESET (SAFE)
========================= */

/* Header: EIN System */
.revive-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 10000;
}

/* Body bekommt exakt Header-Höhe */
body {
  padding-top: 90px !important;
}

/* Sidebar startet UNTER Header */
.revive-sidebar {
  top: 90px !important;
  height: calc(100vh - 90px) !important;
}

/* Content exakt neben Sidebar */
.content-wrapper {
  margin-top: 0 !important;
  margin-left: 250px !important;
  min-height: calc(100vh - 90px - 52px);
}

/* Footer nicht unter Sidebar */
.rev-footer {
  margin-left: 250px;
}

/* Alte konkurrierende Systeme deaktivieren */
.topbar,
.sidebar,
.main,
.content,
.main-content {
  position: unset !important;
  top: unset !important;
  margin: 0 !important;
}
/* === GLOBAL LAYOUT FIX === */

body {
    margin: 0;
    padding: 0;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 1000;
}

/* Sidebar bleibt links unter Header */
.revive-sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    width: 220px;
    bottom: 0;
    overflow-y: auto;
}

/* Hauptinhalt bekommt Platz */
.main,
.main-content,
.page-content {
    margin-top: 64px;
    margin-left: 220px;
    padding: 24px;
}

/* Lobby Cards */
.lobby-card {
    margin-bottom: 12px;
}

/* =========================================================
   REVIVEGG — LAYOUT FIX (HEADER/SIDEBAR/CONTENT)
   Ziel: kein Overlap, keine verschobenen Offsets, kein Riesen-Logo
   ========================================================= */

/* 1) Header fix & definiert */
.topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: 90px;                 /* einheitlich zu deinem bisherigen 90px-Layout */
  display: flex;
  align-items: center;
  background: #0f0f0f;
  border-bottom: 3px solid #ff6600;
  padding: 0 25px;
}

/* 2) Brand / Logo niemals eskalieren lassen */
.topbar .revive-brand-logo{
  height: 42px !important;
  width: auto !important;
  max-height: 42px !important;
  display: block;
  filter: drop-shadow(0 0 4px #ff6600);
}
.topbar .revive-brand-text{
  line-height: 1;
}

/* 3) Sidebar startet UNTER dem Header (dein CSS hatte top:0 -> Overlap) */
.revive-sidebar{
  top: 90px !important;
  height: calc(100vh - 90px) !important;
  z-index: 9999;
}

/* 4) Content bekommt sauberen Offset (Header ist fixed) */
.content-wrapper{
  margin-top: 90px !important;
  margin-left: 250px !important;  /* passend zu deiner content-wrapper Basis */
  padding: 24px !important;
  min-height: calc(100vh - 90px) !important;
}

/* 5) Schutz gegen horizontales “Wandern” */
html, body{
  overflow-x: hidden;
}

/* 6) Mobile fallback */
@media (max-width: 820px){
  .revive-sidebar{
    position: static !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    border-right: none !important;
  }
  .content-wrapper{
    margin-left: 0 !important;
    padding: 18px !important;
  }
  .topbar{
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }
}
/* =========================================================
   REVIVEGG — FINAL LAYOUT OVERRIDE (CLICK + OFFSET FIX)
   Muss GANZ AM ENDE stehen.
   ========================================================= */

:root{
  --rg-header-h: 64px;       /* Header-Höhe (dein aktuelles Layout) */
  --rg-sidebar-w: 220px;     /* Sidebar-Breite */
}

/* 1) Header: immer oben, immer klickbar, Dropdown darf rauslaufen */
.topbar{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--rg-header-h) !important;
  z-index: 2147483000 !important;        /* über ALLEM */
  overflow: visible !important;          /* Dropdown/Popups dürfen sichtbar sein */
  pointer-events: auto !important;
}

.topbar *{
  pointer-events: auto !important;
}

/* 2) Body / Content Offset: unter Header starten */
body{
  padding-top: var(--rg-header-h) !important;
}

/* 3) Sidebar: unter Header starten und NICHT über Header liegen */
.revive-sidebar{
  position: fixed !important;
  top: var(--rg-header-h) !important;
  left: 0 !important;
  width: var(--rg-sidebar-w) !important;
  height: calc(100vh - var(--rg-header-h)) !important;
  z-index: 1000 !important;               /* unter Header */
}

/* 4) Content: sauber rechts neben Sidebar */
.content-wrapper{
  position: relative !important;
  z-index: 1 !important;
  margin-left: calc(var(--rg-sidebar-w) + 30px) !important;  /* 220 + Luft */
  margin-top: 0 !important;                                  /* weil body padding-top */
  padding: 24px !important;
}

/* 5) Party Popup: garantiert über allem + klickbar */
.party-popup{
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
.party-popup *{
  pointer-events: auto !important;
}

/* 6) Falls irgendwo ein unsichtbarer Overlay-Layer existiert: entschärfen */
.overlay,
.modal-backdrop,
.backdrop,
.screen,
.blocker{
  pointer-events: none !important;
}

/* 7) Sicherheit gegen “Header unclickbar weil irgendwas drüber liegt” */
.revive-header{
  z-index: 2147482000 !important;
  pointer-events: auto !important;
}
.revive-header *{
  pointer-events: auto !important;
}

/* 8) Mobile */
@media (max-width: 820px){
  .revive-sidebar{
    position: static !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
  }
  .content-wrapper{
    margin-left: 0 !important;
    padding: 18px !important;
  }
}
/* =========================================================
   REVIVEGG — FINAL HEADER CLICK FIX (NO MORE OVERLAYS)
   ========================================================= */

/* Header MUSS über allem liegen */
.topbar,
.revive-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Header-Elemente klickbar */
.topbar *,
.revive-header *{
  pointer-events: auto !important;
}

/* BODY darf Header NICHT überlagern */
body{
  padding-top: 64px !important;
}

/* ALLE bekannten Content-Wrapper unter den Header zwingen */
.main,
.main-content,
.page,
.page-content,
.app,
.app-content,
.layout,
.layout-content,
.container,
.container-fluid,
.content,
.content-wrapper{
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* Sidebar explizit unter Header */
.revive-sidebar{
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  height: calc(100vh - 64px) !important;
  z-index: 10 !important;
}

/* Party / Dropdowns IMMER klickbar */
.party-popup,
.dropdown,
.dropdown-menu,
.menu,
.popup{
  position: absolute !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

/* NOTFALL: falls ein Overlay existiert */
.overlay,
.backdrop,
.screen,
.blocker,
.fullscreen{
  pointer-events: none !important;
}
/* =========================
   ReviveGG GLOBAL THEME
   ========================= */

:root {
  --rg-orange: #ff7a18;
  --rg-orange-dark: #e86a0f;
  --rg-green: #2ecc71;
  --rg-red: #ff5252;
  --rg-bg: #0e0e0e;
  --rg-bg-soft: #151515;
  --rg-text: #e6e6e6;
}

/* ---------- TEXT ---------- */
body {
  background: var(--rg-bg);
  color: var(--rg-text);
}

/* Überschriften */
h1, h2, h3, .title, .card-title {
  color: var(--rg-orange);
}

/* Lobby-Namen */
.lobby-name,
.lobby-title {
  color: var(--rg-orange);
  font-weight: 700;
}

/* Spielname / Map */
.lobby-game,
.lobby-map {
  color: var(--rg-orange);
}

/* Slots / Zahlen */
.lobby-slots {
  color: #fff;
}

/* ---------- STATUS ---------- */
.status-live,
.pill-live {
  color: #fff;
  background: linear-gradient(135deg, #1fa463, var(--rg-green));
}

.status-offline,
.status-error {
  background: var(--rg-red);
  color: #fff;
}

/* ---------- DROPDOWNS ---------- */
select,
.dark-select {
  background: var(--rg-bg-soft);
  color: var(--rg-text);
  border: 1px solid #333;
}

select option {
  background: var(--rg-bg-soft);
  color: var(--rg-text);
}

/* ---------- HEADER LINKS ---------- */
.header a,
.top-nav a {
  color: var(--rg-orange);
}
.header a:hover {
  color: var(--rg-orange-dark);
}

/* ---------- FOOTER ---------- */
footer h4,
footer .footer-title {
  color: var(--rg-orange);
}

/* ---------- BUTTONS ---------- */
.btn-orange {
  background: linear-gradient(135deg, var(--rg-orange), var(--rg-orange-dark));
  border: none;
}
.btn-orange:hover {
  filter: brightness(1.1);
}

/* ---------- FULL HD LAYOUT ---------- */
@media (min-width: 1920px) {
  .content-wrapper {
    min-height: calc(100vh - 120px);
  }
}

/* ---------- FIX LOGO OFFSET ---------- */
.header-logo {
  display: flex;
  align-items: center;
  transform: translateY(1px);
}
/* =========================
   HOTFIX v0.1 – LAYOUT/LAYER + DARK SELECTS + ORANGE TUNE
   (am Ende der style.css lassen)
========================= */

/* Sidebar darf NICHT über Topbar liegen */
.revive-sidebar{
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  z-index: 9000 !important;
}

/* Content: weniger sinnloser Top-Abstand (Body hat bereits padding-top:64px) */
.content-wrapper{
  margin-top: 24px !important;
  max-width: 1550px;
}

/* Selects / Dropdowns Dark Theme */
select, option{
  background: #101010 !important;
  color: #f2f2f2 !important;
}
select{
  border: 1px solid #2a2a2a !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  outline: none;
}
select:focus{
  border-color: #ff6a00 !important;
  box-shadow: 0 0 0 2px rgba(255,106,0,.15) !important;
}

/* Orange konsistent (dunkler, weniger neon) */
:root{
  --revive-orange: #ff6a00;
  --revive-orange2:#ff7a1a;
  --revive-green:  #2eea7a;
  --revive-red:    #ff3b3b;
}
a, .topbar-nav a{
  color: var(--revive-orange) !important;
}
.topbar-nav a:hover{
  color: #ffffff !important;
}

/* Überschriften */
.card-title, h1, h2, h3{
  color: var(--revive-orange) !important;
}

/* Lobby Name / Game Name Orange (falls du Klassen nutzt) */
.lobby-name, .lobby-game{
  color: var(--revive-orange) !important;
  font-weight: 700;
}

/* Live/Offline Farben */
.pill-live, .status-live{
  color: #04150a !important;
  background: var(--revive-green) !important;
  border-color: rgba(0,0,0,.2) !important;
}
.status-offline, .status-error, .live-error{
  color: #fff !important;
  background: rgba(255,59,59,.10) !important;
  border: 1px solid rgba(255,59,59,.35) !important;
  padding: 10px 12px;
  border-radius: 10px;
}
/* ===============================
   GLOBAL LAYOUT FIX
   =============================== */

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* Hauptbereich zwischen Header & Footer */
.main-wrapper {
    flex: 1 0 auto;
    display: flex;
}

/* Sidebar bleibt fix */
.sidebar {
    width: 240px;
    flex-shrink: 0;
}

/* Content füllt restliche Breite */
.content-wrapper {
    flex: 1;
    padding: 20px 24px;
    max-width: none;           /* WICHTIG: keine künstliche Begrenzung */
    margin: 0;
}

/* ===============================
   LOBBY GRID
   =============================== */

.lobby-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(140px, auto);
    gap: 16px;
}

/* Große Karten über volle Breite */
.lobby-grid .full {
    grid-column: 1 / -1;
}

/* Karten optisch stabil */
.lobby-card {
    background: #0f121a;
    border-radius: 10px;
    padding: 14px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

/* Team- & Chat-Karten gleich hoch */
.lobby-card.equal {
    min-height: 220px;
}

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

footer {
    flex-shrink: 0;
    margin-top: auto;          /* drückt Footer nach unten */
    position: relative;
}

/* Footer darf KEINE Höhe erzwingen */
footer * {
    box-sizing: border-box;
}

/* =========================================================
   REVIVEGG – LAYOUT OVERRIDES (NO SCROLL @ 1920x1080)
   ========================================================= */

/* 1. Body darf KEINEN künstlichen Footer-Abstand haben */
body {
    padding-bottom: 0 !important;
}

/* 2. Content darf nicht auf 1550px begrenzt sein */
.content-wrapper {
    max-width: none !important;
    margin-right: 0 !important;

    /* WICHTIG: KEINE erzwungene Mindesthöhe */
    min-height: unset !important;
}

/* 3. Footer normaler Dokumentenfluss, kein Höhen-Trick */
.rev-footer {
    position: relative !important;
    margin-top: 0 !important;
}

/* 4. Footer darf keine zusätzliche Höhe addieren */
.rev-footer,
.rev-footer * {
    box-sizing: border-box;
}

/* 5. Letzte Karte bekommt keinen Extra-Abstand */
.page-lobby-room .content-card:last-child {
    margin-bottom: 0;
}
/* =====================================================
   REVIVEGG FOOTER – FIXED LAYOUT
   ===================================================== */

.rev-footer {
    width: calc(100% - 240px); /* Sidebar-Breite */
    margin-left: 240px;

    background: linear-gradient(180deg, #0b0b0b, #060606);
    border-top: 1px solid rgba(255,140,0,0.35);

    padding: 24px 40px 18px;
    color: #aaa;
    font-size: 13px;
}

.rev-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.rev-footer-col h4 {
    color: #ff8c00;
    font-size: 13px;
    margin-bottom: 8px;
}

.rev-footer-col a {
    display: block;
    color: #aaa;
    text-decoration: none;
    margin-bottom: 6px;
    transition: color .15s;
}

.rev-footer-col a:hover {
    color: #ff8c00;
}

.rev-footer-col.brand img {
    height: 28px;
    margin-bottom: 10px;
}

.rev-footer-socials a {
    font-size: 18px;
    margin-right: 10px;
    text-decoration: none;
    opacity: .7;
}

.rev-footer-socials a:hover {
    opacity: 1;
}

/* ======================================================
   REVIVEGG – FINAL GLOBAL LAYOUT (FACEIT STYLE)
====================================================== */

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Seite selbst scrollt NIE */
}

/* Header bleibt wie er ist (fixed, 90px) */

/* Hauptlayout unter dem Header */
.revive-app {
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    overflow: hidden;
}

/* Sidebar */
.revive-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #0f0f0f;
    border-right: 3px solid #ff6600;
}

/* Content-Spalte */
.revive-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #121212;
    overflow: hidden;
}

/* Seiteninhalt */
.page-lobby-room {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* Footer – Teil des Layouts */
.rev-footer {
    height: 64px;
    background: #0b0b0b;
    border-top: 3px solid #ff6600;

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

    padding: 0 28px;
    color: #aaa;
    font-size: 13px;
}

/* Footer Links */
.rev-footer a {
    color: #bbb;
    text-decoration: none;
    margin-right: 16px;
}

.rev-footer a:hover {
    color: #ff8c3c;
}

/* Footer Social */
.rev-footer .footer-social a {
    margin-right: 12px;
    font-size: 16px;
}

/* Unter 1920px darf der Content scrollen */
@media (max-width: 1919px) {
    html, body {
        overflow: auto;
    }

    .page-lobby-room {
        overflow-y: auto;
    }
}


/* ===============================
   FOOTER – SAUBER, FLUCHTEND
================================ */

.site-footer {
    grid-column: 2;
    background: linear-gradient(180deg, #0b0b0b, #050505);
    border-top: 1px solid rgba(255, 140, 0, 0.6);
    padding: 22px 32px 16px 32px;
    font-size: 13px;
    color: #aaa;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.footer-grid h4 {
    color: #ff8c00;
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-grid a {
    display: block;
    color: #bbb;
    text-decoration: none;
    margin-bottom: 6px;
}

.footer-grid a:hover {
    color: #ff8c00;
}

.footer-bottom {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #777;
}

.footer-social a {
    margin-right: 12px;
    font-size: 16px;
    color: #bbb;
}

.footer-social a:hover {
    color: #ff8c00;
}
/* =========================================================
   REVIVEGG – GLOBAL LAYOUT FIX (DESKTOP ≥ 1920px)
   ========================================================= */

/* 1. Seite selbst darf NIE scrollen */
html, body {
    height: 100%;
    overflow: hidden;
}

/* 2. Content-Bereich wird Flex-Container */
.content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;

    margin-left: 250px;
    margin-top: 90px;

    height: calc(100vh - 90px);
    max-width: none;
    padding: 20px 24px 0 24px;

    overflow: hidden; /* Content scrollt intern */
}

/* 3. Hauptinhalt (Cards) */
.page-lobby-room {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

/* 4. Footer ist TEIL des Layouts */
.rev-footer {
    flex-shrink: 0;
    height: 72px;
    background: #0f0f0f;
    border-top: 3px solid #ff6600;

    display: flex;
    align-items: center;
}

/* 5. Footer darf keinen Extra-Abstand erzwingen */
body {
    padding-bottom: 0 !important;
}
/* =========================================
   FOOTER LOGO FIX (FINAL)
========================================= */

.rev-footer img {
    max-height: 28px;      /* HARTES LIMIT */
    width: auto;
    object-fit: contain;
    display: block;
}

/* optional: minimaler Abstand für Optik */
.rev-footer .footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* =========================
   LAYOUT FIX – FOOTER FINAL
========================= */

/* BODY darf NICHT scrollen */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Gesamtes Seitenlayout */
.app-layout {
    position: relative;
    margin-left: 220px;           /* Sidebar */
    margin-top: 90px;             /* Header */
    height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
}

/* Hauptinhalt */
.content-wrapper {
    flex: 1;
    overflow-y: auto;             /* NUR HIER scrollen */
    padding: 24px;
    max-width: 1550px;
}

/* FOOTER */
.revive-footer {
    height: 64px;
    background: #0f0f0f;
    border-top: 3px solid #ff6600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 13px;
    color: #aaa;
}

/* Footer Links */
.revive-footer a {
    color: #ff7a1a;
    text-decoration: none;
    margin-right: 14px;
}

.revive-footer a:hover {
    color: #ffa24c;
}

/* Footer Logo */
.revive-footer img {
    max-height: 26px;
    width: auto;
    display: block;
}

/* =========================================================
   LOBBY ROOM – RESPONSIVE FIX (NO REDESIGN)
   Nur für lobby_room.php
========================================================= */
@media (max-width: 1400px){
  .page-lobby-room .lobby-hero{
    flex-direction: column;
    align-items: flex-start;
  }
  .page-lobby-room .lobby-hero-actions{
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 1100px){
  .page-lobby-room .lobby-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px){
  .page-lobby-room .lobby-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   REVIVEGG HOTFIX – LOBBY ROOM VISIBILITY/HEADER (NO REDESIGN)
   Fix: halb sichtbare Actionbar, Kopf/Top-Layout abgeschnitten
   Scope: nur lobby_room.php (page-lobby-room)
========================================================= */
.page-lobby-room .lobby-hero,
.page-lobby-room .lobby-actionbar,
.page-lobby-room .action-group,
.page-lobby-room .action-divider,
.page-lobby-room .segmented {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Actionbar braucht echte Höhe/Innenabstand (sonst "halb") */
.page-lobby-room .lobby-actionbar{
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 14px !important;
}

/* Falls irgendwo overflow hidden / height clamp greift */
.page-lobby-room .content-wrapper,
.page-lobby-room main.content-wrapper{
  overflow: visible !important;
  height: auto !important;
  min-height: calc(100vh - 120px) !important;
}

/* HERO nicht clippen + Buttons umbrechen */
.page-lobby-room .lobby-hero{
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.page-lobby-room .lobby-hero-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

/* Responsive ohne Redesign */
@media (max-width: 1400px){
  .page-lobby-room .lobby-hero{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .page-lobby-room .lobby-hero-actions{
    width: 100% !important;
    justify-content: flex-end !important;
  }
}
@media (max-width: 1100px){
  .page-lobby-room .lobby-grid{
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 820px){
  .page-lobby-room .lobby-grid{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   REVIVEGG – LOBBY ROOM HARD FIX (ROOT CAUSE)
   Problem: globaler Layout-Container clippt Lobby-Header
   Lösung: Lobby aus Height/Overflow-Zwang lösen
========================================================= */

/* 1. Alle übergeordneten Container für Lobby freigeben */
.page-lobby-room,
.page-lobby-room .content-wrapper,
.page-lobby-room .content,
.page-lobby-room .app-main,
.page-lobby-room .app-layout {
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  overflow: visible !important;
}

/* 2. Lobby-Header + Actionbar dürfen NIE geclippt werden */
.page-lobby-room .lobby-hero,
.page-lobby-room .lobby-actionbar {
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
}

/* 3. Actionbar sauber darstellen (nicht gequetscht) */
.page-lobby-room .lobby-actionbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  height: auto !important;
}

/* 4. Rechte Seite (Slots / Start-Hinweis) darf umbrechen */
.page-lobby-room .lobby-actionbar .action-group.right {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* 5. Hero darf umbrechen, nicht überdecken */
.page-lobby-room .lobby-hero {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 6. Grid reagiert sauber auf Viewport */
@media (max-width: 1200px){
  .page-lobby-room .lobby-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 820px){
  .page-lobby-room .lobby-grid {
    grid-template-columns: 1fr !important;
  }
}


/* === GLOBAL FOOTER VISIBILITY FIX === */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
}

.app-layout,
.app-main,
.content-wrapper {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* Footer darf nie im Scroll-Container gefangen sein */
footer,
.site-footer {
  position: relative !important;
  margin-top: 40px !important;
}

/* =========================================================
   REVIVEGG GLOBAL LAYOUT STANDARD (FINAL)
   - Header, Sidebar, Footer IMMER sichtbar
   - Scroll NUR im Content-Bereich
   - 1920x1080: alles sichtbar, kein Scroll
========================================================= */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* niemals Body scrollen */
}

/* Haupt-App-Rahmen */
.app-layout {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

/* Sidebar links */
.sidebar {
  flex: 0 0 auto;
  height: 100vh;
  overflow: hidden;
}

/* Rechter Bereich (Header + Content + Footer) */
.app-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

/* Header immer sichtbar */
.app-header {
  flex: 0 0 auto;
  z-index: 10;
}

/* Footer immer sichtbar */
.site-footer,
footer {
  flex: 0 0 auto;
  z-index: 5;
}

/* CONTENT-BEREICH – NUR HIER DARF GESCROLLT WERDEN */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Desktop 1920x1080+: kein Scroll nötig */
@media (min-width: 1920px) and (min-height: 1080px) {
  .content-wrapper {
    overflow-y: visible;
  }
}

/* =========================================================
   REVIVEGG GLOBAL LAYOUT – FINAL & FIXED
========================================================= */

/* Grundregel: niemals Body scrollen */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* App-Grundgerüst */
.app-layout {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  flex: 0 0 260px;
  height: 100vh;
  overflow: hidden;
}

/* Rechter Bereich */
.app-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

/* Header */
.app-header {
  flex: 0 0 auto;
}

/* Footer */
footer,
.site-footer {
  flex: 0 0 auto;
}

/* CONTENT – EINZIGER SCROLL-BEREICH */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 1920x1080+: kein Scroll nötig */
@media (min-width: 1920px) and (min-height: 1080px) {
  .content-wrapper {
    overflow-y: visible;
  }
}
/* =========================================================
   REVIVEGG GLOBAL APP LAYOUT (FINAL)
========================================================= */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.app-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-header {
  flex: 0 0 auto;
}

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.app-sidebar {
  flex: 0 0 260px;
  overflow: hidden;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Footer immer sichtbar */
.site-footer,
footer {
  flex: 0 0 auto;
}

/* 1920×1080 → kein Scroll nötig */
@media (min-width: 1920px) and (min-height: 1080px) {
  .app-content {
    overflow-y: visible;
  }
}

/* =========================================================
   REVIVEGG – GLOBAL HARD SCROLL LOCK (FINAL)
========================================================= */

/* Browser selbst darf NIEMALS scrollen */
html,
body {
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ALLE direkten Body-Kinder dürfen NICHT scrollen */
body > * {
  max-height: 100vh;
  overflow: hidden;
}
/* =========================================================
   EINZIGER ERLAUBTER SCROLLBEREICH
========================================================= */

/* Content-Bereich darf scrollen */
.app-content,
.content,
.content-wrapper,
.main-content,
.page-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}
@media (min-width: 1920px) and (min-height: 1080px) {
  .app-content,
  .content,
  .content-wrapper,
  .main-content,
  .page-content {
    overflow-y: visible !important;
  }
}

/* =========================================================
   ReviveGG Layout Fix (Global Wrapper: ONLY content scrolls)
   - Body niemals scrollen (kein doppelter Scroll)
   - Content-Bereich scrollt innerhalb
   - Footer bleibt immer sichtbar
   - Keine Optik-Zerstörung: nur Layout-Mechanik
========================================================= */

html, body {
  height: 100%;
}

body {
  overflow: hidden !important;     /* verhindert Seiten-Scroll */
  padding-bottom: 0 !important;    /* footer ist fixed, kein padding-trick */
}

/* Dein Haupt-Content-Wrapper (existiert im Projekt) */
.content-wrapper {
  /* header: ~90px, footer: 52px, etwas Luft -> 142px passt zu deinem CSS */
  height: calc(100vh - 142px) !important;
  overflow-y: auto !important;     /* NUR hier scroll */
  overflow-x: hidden !important;
}

/* Mobile/kleine Höhen: content darf dann natürlich scrollen */
@media (max-height: 820px) {
  .content-wrapper {
    height: calc(100vh - 142px) !important;
  }
}

/* =========================================================
   REVIVEGG – GLOBAL LAYOUT CANONICAL (FINAL)
   EIN System, kein Chaos
========================================================= */

/* Browser selbst scrollt NIE */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* App-Grundgerüst */
.revive-app {
  position: fixed;
  inset: 90px 0 0 0;           /* unter Header */
  display: flex;
  overflow: hidden;
}

/* Sidebar */
.revive-sidebar {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
}

/* Rechter Bereich */
.revive-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* EINZIGER Scrollbereich */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  max-width: none;
  min-height: 0; /* extrem wichtig für Flex */
}

/* Footer bleibt sichtbar */
.rev-footer {
  flex-shrink: 0;
}

/* ReviveGG minimal UI helpers (safe add-on) */
.rg-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);cursor:pointer;text-decoration:none}
.rg-btn-primary{background:rgba(255,140,0,.16);border-color:rgba(255,140,0,.35)}
.rg-btn-primary:hover{background:rgba(255,140,0,.22)}
.rg-lobbylist-wrap{margin-top:14px}
.rg-lobbylist-title{font-weight:700;margin:6px 0 12px 0}
.rg-lobby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rg-lobby-card{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px}
.rg-lobby-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rg-lobby-game{font-weight:800;letter-spacing:.6px}
.rg-lobby-status{font-size:12px;opacity:.85}
.rg-lobby-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;opacity:.9;margin-bottom:12px}
.rg-error{color:#ff8b8b}
.rg-loading{opacity:.9}
.rg-auth-warn{opacity:.95}

.container {
    padding: 20px;
}

.card {
    background: #111;
    border: 1px solid #ff6600;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    color: #fff;
}

.footer {
    background: #000;
    color: #ff6600;
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ff6600;
}

/* DASHBOARD LAYOUT FIX */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-wrapper {
  flex: 1;
}

main.content-wrapper {
  padding-bottom: 40px;
}