/*
 * GAM Server Widgets v6.3.18
 * Minimal game-server badges — no icons, clean pill design.
 * Compatible with Brizy, Elementor, and other page builders.
 */

/* ══════════════════════════════════════════════════════════
 * Brizy Dynamic Content — pill badges
 * ══════════════════════════════════════════════════════════ */
.gam-dc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .82em;
    font-weight: 600;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    letter-spacing: .4px;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
    color: #fff;
    border: none;
}

/* Status: ON */
.gam-dc-badge.gam-dc-on {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
/* Status: OFF */
.gam-dc-badge.gam-dc-off {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
/* Players: active */
.gam-dc-badge.gam-dc-players-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
/* Players: empty */
.gam-dc-badge.gam-dc-players-empty {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}
/* Time: online */
.gam-dc-badge.gam-dc-time-online {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
}
/* Time: offline */
.gam-dc-badge.gam-dc-time-offline {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* Animated pulse dot */
.gam-dc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    flex-shrink: 0;
    opacity: .85;
}
.gam-dc-badge.gam-dc-on .gam-dc-dot,
.gam-dc-badge.gam-dc-players-active .gam-dc-dot,
.gam-dc-badge.gam-dc-time-online .gam-dc-dot {
    animation: gam-dc-pulse 2s ease-in-out infinite;
}
@keyframes gam-dc-pulse {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: .5;  transform: scale(1.35); }
}

/* ══════════════════════════════════════════════════════════
 * Shortcode widgets — [game_server_status] etc.
 * ══════════════════════════════════════════════════════════ */

/* Inline wrapper — inherits text-align from parent */
.gam-server-widget {
    display: inline-block;
    vertical-align: middle;
    text-align: inherit;
    line-height: 1;
    margin: 0;
}

/* Badge base */
.gam-widget-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    letter-spacing: .3px;
    color: #fff;
    white-space: nowrap;
    border: none;
    box-shadow: none;
    transition: box-shadow .15s ease;
}
.gam-widget-badge:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Animated status dot */
.gam-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gam-status-dot.gam-dot-on {
    background: #bbf7d0;
    box-shadow: none;
    animation: gam-pulse-on 2s ease-in-out infinite;
}
.gam-status-dot.gam-dot-off {
    background: #fecaca;
    box-shadow: none;
    animation: gam-pulse-off 2s ease-in-out infinite;
}

@keyframes gam-pulse-on {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.3); }
}
@keyframes gam-pulse-off {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.3); }
}

/* Badge colours */
.gam-widget-badge.gam-online-players {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.gam-widget-badge.gam-server-status.status-on {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.gam-widget-badge.gam-server-status.status-off {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.gam-widget-badge.gam-server-time {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
}

/* ══════════════════════════════════════════════════════════
 * Dark theme support
 * ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    .gam-adaptive-theme .gam-widget-badge,
    .gam-adaptive-theme .gam-dc-badge {
        box-shadow: none;
    }
}
.gam-force-dark .gam-widget-badge,
.gam-force-dark .gam-dc-badge {
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════
 * Brizy Page Builder — alignment & layout integration
 * ══════════════════════════════════════════════════════════ */
.brz-rich-text .gam-dc-badge,
.brz-rich-text .gam-server-widget {
    text-align: inherit;
}
.brz-text .gam-dc-badge,
.brz-text .gam-server-widget,
.brz-wp-shortcode .gam-server-widget {
    display: inline-flex;
    vertical-align: middle;
    text-align: inherit;
}
.brz-wp-shortcode .gam-server-widget {
    display: inline-block;
    width: auto;
}
.brz-rich-text .gam-dc-badge,
.brz-rich-text .gam-dc-badge * {
    box-sizing: border-box;
}

/* Error state — e.g. REST endpoint unreachable */
.gam-widget-badge.gam-status-error {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    animation: gam-pulse-error 1.5s ease-in-out infinite;
}
@keyframes gam-pulse-error {
    0%, 100% { opacity: 1; }
    50%      { opacity: .7; }
}

/* Mobile */
@media (max-width: 767px) {
    .gam-dc-badge,
    .gam-widget-badge {
        font-size: 12px;
        padding: 3px 10px;
        gap: 5px;
    }
}