body {
    background: #dddddd;
}

.server-card {
    border: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transition: 0.15s ease;
}

/* 誰か入っている（緑） */
.has-players {
    background: #e3ffe3;
    border-left: 5px solid #198754;
}

/* フルサーバー（赤） */
.is-full {
    background: #ffe5e5;
    border-left: 5px solid #dc3545;
}

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

.progress {
    position: relative; height: 18px; background-color: rgb(148, 148, 148);
}

.progress-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
    color: #fff; pointer-events: none;
}

.btn { padding: 4px 8px; font-size: 13px; }

/* Copy系ボタン（透過なし） */
.btn-solid {
    background: #eef1f4;
    border: 1px solid #cfd6dd;
    color: #111;
}
.btn-solid:hover {
    background: #e3e7eb;
    border-color: #c2cbd3;
    color: #111;
}

h2 {
    font-size: 15px;

}
.map-right {
    font-size: 12px; color: #393b3d; font-weight: 600;
}

/* フィルター見出し（しっかり見える・ボタンと被らない） */
.filter-panel {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    overflow: hidden;
}

.filter-head {
    position: relative;
    padding: 10px 14px 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid #eef0f2;
}

.filter-head:before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #0d6efd 0%, #3b82f6 100%);
}

.filter-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    color: #111;
    margin: 0;
    padding-left: 10px; /* for accent bar */
}

.filter-badge {
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #0d6efd;
    border: 1px solid #dbe7ff;
}

.filter-body {
    padding: 10px 14px 12px 14px;
}

/* ヘッダー背景変更 */
header {
    background: linear-gradient(90deg, #1f2937 0%, #111827 100%);
    color: #ffffff;
}

header h1 {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.header-subtitle {
    font-size: 13px;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

.btn-solid,
.btn-solid:focus,
.btn-solid:active,
.btn-solid:hover {
    background: #eef1f4 !important;
    border: 1px solid #cfd6dd !important;
    color: #111 !important;
    box-shadow: none !important;
}

.btn-solid:active {
    background: #e2e6ea !important;
}

@media (min-width: 768px) {
    .container-fluid {
        max-width: 1300px !important;
        width: 1300px !important;
    }
    .modal {
        overflow-x:auto !important;
        overflow-y:auto !important;
    }
    .modal-lg {
        max-width: 650px !important;
        width: 650px !important;
    }
}

@media (max-width: 767px) {
    .modal-dialog {
        max-width: 100% !important;
        margin: .75rem !important;
    }
    .card-body > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .map-right {
        margin-top: 4px;
    }
}

body.modal-open {
    padding-right: 0px !important;
}