/* Game Server box (server-status.js): live state, the real Slime sprite and
   the three server numbers beside it. */
.server-status-box .server-state { color: #826744; font: 700 8px Arial, sans-serif; text-align: right; white-space: nowrap; }
.server-status-box .server-state[data-state="online"] { color: #3f7d2c; }
.server-status-box .server-state[data-state="online"]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #5cbf3a; box-shadow: 0 0 0 1px #d8f2c9; vertical-align: 0; }
.server-status-box .server-state[data-state="offline"] { color: #9a4b3a; }
/* The Slime sprite is 71x51; show it at its real size, since scaling pixel
   art by a fraction blurs and breaks its outline. */
.server-status-box { grid-template-columns: 72px minmax(0, 1fr); }
.server-status-box .server-slime { width: 71px; height: 51px; object-fit: none; image-rendering: auto; }
.server-status-box .server-slime[hidden] { display: none; }

.server-stats { display: grid; gap: 3px; min-width: 0; margin: 0; }
.server-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; min-width: 0; padding-bottom: 2px; border-bottom: 1px dotted #d8ccac; }
.server-stats div:last-child { padding-bottom: 0; border-bottom: 0; }
.server-stats dt { overflow: hidden; color: #7a6a4c; font: 8px/1.2 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.server-stats dd { margin: 0; color: #8d632c; font: 700 10px/1.2 Arial, sans-serif; white-space: nowrap; }