/* Extra pieces on top of game-servers.css for the RedM player count (/redm-player-count/) and
   the game server status checker (/game-server-status/). Same tokens, one accent per page. */

body[data-game="redm"] { --accent: #9B3B22; --accent-wash: rgba(155, 59, 34, .11); }
body[data-game="check"] { --accent: #2563A8; --accent-wash: rgba(37, 99, 168, .11); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-game="redm"] { --accent: #EE8B6B; --accent-wash: rgba(238, 139, 107, .14); }
    :root:not([data-theme="light"]) body[data-game="check"] { --accent: #7DB5F2; --accent-wash: rgba(125, 181, 242, .14); }
}
:root[data-theme="dark"] body[data-game="redm"] { --accent: #EE8B6B; --accent-wash: rgba(238, 139, 107, .14); }
:root[data-theme="dark"] body[data-game="check"] { --accent: #7DB5F2; --accent-wash: rgba(125, 181, 242, .14); }

/* ---------- RedM server page ---------- */
.rm-icon { overflow: hidden; }
.rm-icon img { width: 100%; height: 100%; object-fit: cover; }
.rm-desc { max-width: 72ch; margin-top: 14px; color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.rm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rm-tags li { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 12.5px; }

/* ---------- checker form ---------- */
.gss-form { padding: 18px 20px; }
.gss-fields { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 12px; align-items: end; }
.gss-input { display: block; width: 100%; height: 46px; padding-inline: 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; }
.gss-input:focus { border-color: var(--ink); outline: none; }
.gss-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#gss-addr { font-family: var(--mono); font-size: 14.5px; }
.gss-go { height: 46px; padding-inline: 20px; }
.gss-go[disabled] { opacity: .6; cursor: progress; }
.gss-form .hint { margin-top: 10px; }

/* ---------- result ---------- */
.gss-result .who-meta span:not(:empty)::before { content: "\00b7"; margin-right: 10px; color: var(--line-2); }
/* while checking, the card already takes about the height of a typical answer */
.gss-result.is-loading { min-height: 470px; }
.gss-result.is-loading .pill .dot { animation: gss-pulse 1s ease-in-out infinite; }
@keyframes gss-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .gss-result.is-loading .pill .dot { animation: none; } }
.gss-msg { max-width: 72ch; margin-top: 14px; color: var(--ink-2); font-size: 14.5px; }
.gss-msg a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.gss-kv { margin-top: 14px; }
.gss-kv:empty { display: none; }
.gss-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gss-h3 { font-size: 14px; font-weight: 650; }
.gss-others { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.gss-other-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; margin-top: 8px; }
.gss-other-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.gss-other-list li span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.gss-other-list .link-btn { font-size: 13px; }

/* ---------- game tiles ---------- */
.gss-games .hint { margin-top: 6px; }
.gss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.gss-grid a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); text-decoration: none; }
.gss-grid a:hover { border-color: var(--ink); }
.gss-grid a[aria-current="page"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.gss-grid b { font-size: 14px; font-weight: 650; }
.gss-grid span { color: var(--muted); font-size: 12.5px; }
.gss-ports { max-width: 560px; }

@media (max-width: 900px) {
    .gss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .gss-form { padding: 16px; }
    .gss-fields { grid-template-columns: minmax(0, 1fr); }
    .gss-go { width: 100%; }
    .gss-result.is-loading { min-height: 680px; }
    .gss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gss-other-list { grid-template-columns: minmax(0, 1fr); }
}