/* ==================================== */ /* 1. CSS VARIABLES (Color Palette)     */ /* ==================================== */ :root { /* Main Backgrounds & Text */ --color-bg-primary: #1e1e1e;       /* Darkest background (for body/page) */ --color-bg-card: rgb(49, 54, 59, 0.7);          /* Dark Slate/Charcoal for Card backgrounds */ --color-text-light: #f0f0f0;       /* Light off-white for main text */ --color-text-muted: #a0a0a0;       /* Muted light grey for secondary text/labels */ --color-border: #444444;           /* Darker line for borders/dividers */ /* Accent Colors (Status Indicators) */ --color-success: #81c784;          /* Brighter green for ONLINE status */ --color-danger: #e57373;           /* Brighter red for OFFLINE status */ --color-primary-accent: #64b5f6;   /* Light blue for highlighting (e.g., player count) */ --color-status-unknown: #6c757d;   /* Medium grey for UNKNOWN/GREY status */ } /* ==================================== */ /* 2. CARD CONTAINER (The Game Status Box)*/ /* ==================================== */ .gamestatus-card { /* Uses the dark grey color for the card background */ background: var(--color-bg-card);  color: var(--color-text-light); /* Ensures text is light for contrast */ padding: 20px; border-radius: 8px; /* Uses the border color and a subtle shadow for depth */ border: 1px solid var(--color-border); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  } /* ==================================== */ /* 3. STATUS INDICATOR (The "Pill")     */ /* ==================================== */ .status-indicator { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 20px; } /* Status: ONLINE */ .status-indicator.online { background-color: var(--color-success); /* Uses the card's dark background color for text contrast on the bright pill */ color: var(--color-bg-card);  } /* Status: OFFLINE */ .status-indicator.offline { background-color: var(--color-danger); color: white; /* Standard white text for better contrast on red */ } /* Status: GREY / UNKNOWN */ .status-indicator.unknown { background-color: var(--color-status-unknown); color: white;  } /* ==================================== */ /* 4. DETAILS GRID (Key-Value Layout)   */ /* ==================================== */ .details-grid { display: grid; /* Responsive two-column grid */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px 30px; margin-top: 15px; } .detail-item { padding: 5px 0; /* Vertical divider line */ border-left: 3px solid var(--color-border); padding-left: 15px; } .label { display: block; font-size: 0.9rem; /* Muted grey color for labels */ color: var(--color-text-muted);  font-weight: 500; text-transform: uppercase; margin-bottom: 2px; } .value { display: block; font-size: 1.1rem; font-weight: 600; /* Bright light color for values */ color: var(--color-text-light);  } /* Special styling for player count */ .value.player-count { /* Highlight with the accent color */ color: var(--color-primary-accent);  }