/* Rustcator.com — exact single-server markup pass */ :root { --rd-bg:#0a1118; --rd-panel:#111923; --rd-panel2:#141e29; --rd-border:rgba(255,255,255,.09); --rd-border2:rgba(255,255,255,.14); --rd-text:#f3f6f8; --rd-muted:#96a1ad; --rd-dim:#6f7b87; --rd-accent:#ef4939; --rd-green:#64cf71; --rd-yellow:#e6bb5d; --rd-red:#ff5a5a; --rd-blue:#82a8ff; --rd-purple:#a18cff; --rd-radius:12px; --rd-shadow:0 18px 50px rgba(0,0,0,.20); --rd-shell:1120px; } html{background:var(--rd-bg)} body{color:var(--rd-text);background:radial-gradient(circle at 17% -5%,rgba(239,73,57,.06),transparent 34rem),linear-gradient(180deg,#0b1219 0%,#091017 100%)} #primary.rusto-server-detail{ width:min(calc(100% - 48px),var(--rd-shell));margin-inline:auto;padding:38px 0 76px; display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:18px;row-gap:16px;align-items:stretch; } #primary.rusto-server-detail>h1{ word-break: break-word; grid-column:1/-1;margin:0 0 8px;max-width:1050px;color:var(--rd-text); font-size:clamp(2rem,4vw,3.15rem);line-height:1.06;font-weight:850;letter-spacing:-.045em;text-wrap:balance; } /* Server-provided icon (server.logoimage convar, via A2S_RULES — Probing/RulesEnricher.php) — plain inline content before the name, not flex, so it rides along with h1's existing text-wrap:balance/inline flow instead of changing how the name + trust badge wrap together. Sized in em, tied directly to h1's own clamp() so it scales with the heading with no extra media query. Circular, matching Facepunch's own documented display shape (server browser/Rust+ crop it to a circle; "anything in image corners will be cropped out"). onerror in the template removes it outright rather than leaving a broken-image icon. */ #primary.rusto-server-detail .rusto-server-logo{width:.85em;height:.85em;margin-right:.28em;border-radius:50%;object-fit:cover;vertical-align:-.12em;border:2px solid var(--rd-border2);background:var(--rd-panel)} /* Trust badge (Servers/TrustBadge.php) — icon-only, tooltip carries the actual claim (see ServerInsights::trustBadgeFor()). Sized in em like the logo above, same reasoning. trust-badge.webp is the glow-on-black style (assets/icons/) shared with the list/intent-page cards — mix-blend-mode:screen drops the black, and __icon needs its own isolated stacking context + explicit background for that blend to have a reliable backdrop (same fix server-list.js's icon treatment needed — an unwrapped blend nested inside another element's own stacking context renders faint/invisible instead of dropping black). */ #primary.rusto-server-detail .rusto-trust-badge{display:inline-flex;vertical-align:-.12em;margin-left:.22em} #primary.rusto-server-detail .rusto-trust-badge__icon{display:inline-flex;width:.85em;height:.85em;isolation:isolate;background:var(--rd-bg);border-radius:50%} #primary.rusto-server-detail .rusto-trust-badge__icon img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen} /* Server-provided header image (server.headerimage convar) — full-width banner above the h1. 2:1 aspect ratio matches both of Facepunch's documented sizes (512x256/1024x512); object-fit:cover crops rather than distorts a mismatched upload. onerror in the template removes the whole block, same "don't show a broken-image glyph" reasoning as the logo above. */ #primary.rusto-server-detail>.rusto-server-banner{grid-column:1/-1;margin:0;overflow:hidden;border-radius:var(--rd-radius);border:1px solid var(--rd-border);box-shadow:var(--rd-shadow)} #primary.rusto-server-detail>.rusto-server-banner img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover} /* Celebratory full-width banner, shown only when next_wipe_at falls on today's UTC date — bright and high-contrast (near-black text on --rd-green, ~9.7:1, comfortably passes WCAG AAA) rather than the page's usual dark-panel language, specifically so a wipe happening today reads as a distinct, unmissable event rather than just another info row. Deliberately *not* --rd-accent as a fill with light text — that red only manages ~3.6:1 with white, already confirmed elsewhere in this project's dark-theme work to fail WCAG AA. */ #primary.rusto-server-detail>.rusto-wipe-today{ grid-column:1/-1;margin:0;padding:22px 24px;display:flex;align-items:center;justify-content:center;gap:10px; background:var(--rd-green);border-radius:var(--rd-radius);box-shadow:0 10px 28px rgba(100,207,113,.35); color:var(--rd-bg);font-size:1.5rem;font-weight:850;text-align:center; } #primary.rusto-server-detail>.rusto-wipe-today time{font-weight:900} /* top status row */ #primary.rusto-server-detail>.rusto-server-status, #primary.rusto-server-detail>.rusto-probe-form, #primary.rusto-server-detail>.rusto-server-jitter, #primary.rusto-server-detail>.rusto-server-checked{ min-height:66px;margin:0;padding:14px 16px;display:flex;align-items:center; background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),var(--rd-panel); border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:inset 0 1px rgba(255,255,255,.025); } #primary.rusto-server-detail>.rusto-server-status{grid-column:span 3;color:#d7dde3;font-size:.9rem;font-weight:650} #primary.rusto-server-detail>.rusto-server-status::before{content:"";width:10px;height:10px;margin-right:9px;flex:0 0 auto;border-radius:50%;background:var(--rd-green);box-shadow:0 0 0 4px rgba(100,207,113,.08)} #primary.rusto-server-detail>.rusto-probe-form{grid-column:span 3;gap:8px;color:var(--rd-muted);font-size:.84rem} #primary.rusto-server-detail>.rusto-probe-form label{width:100%;display:flex;align-items:center;justify-content:space-between;gap:9px} #primary.rusto-server-detail>.rusto-probe-form select{min-width:120px;height:36px;padding:0 32px 0 11px;color:var(--rd-text);background:#0e161f;border:1px solid var(--rd-border2);border-radius:7px;font:inherit;font-weight:650} #primary.rusto-server-detail>.rusto-probe-form button{min-height:36px;padding:0 13px;color:var(--rd-text);background:#18232e;border:1px solid var(--rd-border2);border-radius:7px;font:inherit;font-weight:700;cursor:pointer} #primary.rusto-server-detail>.rusto-server-jitter{grid-column:span 3;font-size:.9rem;font-weight:800} /* rd-muted(#96a1ad) on rd-panel2(#141e29): ~6.4:1, past WCAG AA (4.5:1) — same pairing already verified for .rusto-adjusted-retention above. Left accent border only (no text on it), so no contrast requirement there. */ #primary.rusto-server-detail>.rusto-owner-note{grid-column:1/-1;margin:10px 0 0;padding:12px 16px;color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-left:3px solid var(--rd-blue);border-radius:var(--rd-radius);font-size:.82rem;line-height:1.55} /* Server favoriting (phase 1) — a plain toggle button, not a full-width panel like .rusto-claim-box below (this is a lightweight bookmark, not something that needs prose). justify-self:start keeps it pill-sized within its own full grid-column:1/-1 row, same "full row, content-sized contents" shape as .rusto-connect-cta further down this file. */ #primary.rusto-server-detail>.rusto-favorite-form{grid-column:1/-1;justify-self:start;margin:0} .rusto-favorite-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-radius:999px;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease} .rusto-favorite-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8} .rusto-favorite-button:hover{border-color:var(--rd-border2);color:var(--rd-text)} /* rd-red(#ff5a5a) on a near-black panel — same rd-red-on-dark-panel pairing .rusto-jitter-unstable/.rusto-trust-progress__item--fail already use elsewhere in this file. Filled heart on the active state communicates the toggle without relying on color alone — the svg fill switches too, not just stroke color. */ .rusto-favorite-button--active{color:var(--rd-red);border-color:rgba(255,90,90,.35)} .rusto-favorite-button--active svg{fill:var(--rd-red);stroke:var(--rd-red)} /* Server admin platform (phase 1) — claim CTA box, same panel treatment as .rusto-owner-note above (rd-panel2 + rd-blue left border) since both are informational asides to the page's main content, not a data panel. rd-muted(#96a1ad) on rd-panel2(#141e29) is the same already-verified ~6.4:1 pairing as .rusto-owner-note/.rusto-adjusted-retention. */ #primary.rusto-server-detail>.rusto-claim-box{grid-column:1/-1;margin:10px 0 0;padding:14px 16px;color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-left:3px solid var(--rd-blue);border-radius:var(--rd-radius);font-size:.86rem;line-height:1.55} #primary.rusto-server-detail>.rusto-claim-box p{margin:0 0 10px} #primary.rusto-server-detail>.rusto-claim-box p:last-child{margin-bottom:0} #primary.rusto-server-detail>.rusto-claim-box form{margin:0} #primary.rusto-server-detail>.rusto-claim-box a{color:var(--rd-blue);font-weight:700} /* rd-text(#f3f6f8) on an 8% white overlay atop rd-panel2 — visually near-white on near-black, comfortably past AA; matches the token's own role as a literal value to copy, not prose. */ #primary.rusto-server-detail>.rusto-claim-box code{padding:2px 6px;color:var(--rd-text);background:rgba(255,255,255,.08);border-radius:5px;font-size:.85em} /* rd-green(#64cf71) on rd-panel2 — same pairing already used for .rusto-jitter-excellent elsewhere in this file. */ #primary.rusto-server-detail>.rusto-claim-box .rusto-claim-box__owned a{color:var(--rd-green)} /* Same red-gradient CTA treatment as .rusto-connect-cta above (white on #cf382d, already-verified AA pass), scaled down to an inline form button rather than that element's full-size hero CTA. */ .rusto-claim-box__button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 20px;color:#fff;background:linear-gradient(180deg,#f05242,#cf382d);border:1px solid rgba(255,122,106,.5);border-radius:8px;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 24px rgba(205,56,45,.2);transition:background .15s ease} .rusto-claim-box__button:hover{background:linear-gradient(180deg,#fa5949,#e34235)} /* Trust-badge per-wipe breakdown (verified-owner admin view) — same pass/fail color language as .rusto-jitter-* below (rd-green/rd-red on dark), already-verified contrast pairings reused rather than new ones. */ #primary.rusto-server-detail>.rusto-trust-progress-summary{grid-column:1/-1;margin:8px 0 0;color:var(--rd-muted);font-size:.86rem;line-height:1.5} #primary.rusto-server-detail>.rusto-trust-progress{grid-column:1/-1;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;list-style:none} .rusto-trust-progress__item{padding:6px 12px;border-radius:7px;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:6px} .rusto-trust-progress__item--pass{color:var(--rd-green);background:rgba(100,207,113,.1);border:1px solid rgba(100,207,113,.3)} .rusto-trust-progress__item--fail{color:var(--rd-red);background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.3)} #primary.rusto-server-detail>.rusto-server-jitter::before{content:"Jitter";margin-right:8px;color:var(--rd-muted);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-jitter-excellent{color:var(--rd-green)} #primary.rusto-server-detail>.rusto-jitter-good{color:#93d36a} #primary.rusto-server-detail>.rusto-jitter-fair, #primary.rusto-server-detail>.rusto-jitter-medium{color:var(--rd-yellow)} #primary.rusto-server-detail>.rusto-jitter-poor, #primary.rusto-server-detail>.rusto-jitter-bad, #primary.rusto-server-detail>.rusto-jitter-unstable{color:var(--rd-red)} #primary.rusto-server-detail>.rusto-server-checked{grid-column:span 3;color:var(--rd-muted);font-size:.82rem} #primary.rusto-server-detail>.rusto-server-checked::before{content:"↻";margin-right:8px;color:var(--rd-dim);font-size:1rem} /* players, map, badges */ #primary.rusto-server-detail>.rusto-server-players, #primary.rusto-server-detail>.rusto-server-map, #primary.rusto-server-detail>.rusto-server-keywords{ margin:0;min-height:92px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004)),var(--rd-panel); border:1px solid var(--rd-border);border-radius:var(--rd-radius); } #primary.rusto-server-detail>.rusto-server-players{grid-column:span 3;padding:19px 18px;display:flex;flex-direction:column;justify-content:center;color:var(--rd-text);font-size:1.22rem;line-height:1.2;font-weight:850} #primary.rusto-server-detail>.rusto-server-players::before{content:"Players";margin-bottom:8px;color:var(--rd-muted);font-size:.73rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-server-map{grid-column:span 3;padding:19px 18px;display:flex;flex-direction:column;justify-content:center;color:#c5cdd5;font-size:.9rem;font-style:normal;line-height:1.45} #primary.rusto-server-detail>.rusto-server-map::before{content:"Map";margin-bottom:8px;color:var(--rd-muted);font-size:.73rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-server-keywords{grid-column:span 6;padding:13px;display:flex;flex-wrap:wrap;align-content:center;gap:9px} #primary.rusto-server-detail .rusto-keyword-badge{min-height:42px;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;color:#f8f9fa;background:linear-gradient(180deg,rgba(239,73,57,.20),rgba(239,73,57,.08));border:1px solid rgba(239,73,57,.35);border-radius:9px;font-size:.83rem;line-height:1.05;font-weight:800;white-space:nowrap;box-shadow:inset 0 1px rgba(255,255,255,.045)} #primary.rusto-server-detail .rusto-keyword-badge:nth-child(2){color:#dcffe1;background:linear-gradient(180deg,rgba(100,207,113,.18),rgba(100,207,113,.07));border-color:rgba(100,207,113,.30)} #primary.rusto-server-detail .rusto-keyword-badge:nth-child(3){color:#dfe8ff;background:linear-gradient(180deg,rgba(130,168,255,.17),rgba(130,168,255,.06));border-color:rgba(130,168,255,.30)} #primary.rusto-server-detail .rusto-keyword-badge:nth-child(4){color:#eee8ff;background:linear-gradient(180deg,rgba(161,140,255,.17),rgba(161,140,255,.06));border-color:rgba(161,140,255,.30)} /* website + Discord link/hint */ #primary.rusto-server-detail>.rusto-server-website{grid-column:span 4;margin:0;min-height:82px;padding:14px;display:flex;align-items:center;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail .rusto-website-badge{width:100%;min-height:50px;padding:0 16px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;color:#dce6ff;background:linear-gradient(180deg,rgba(130,168,255,.13),rgba(130,168,255,.055));border:1px solid rgba(130,168,255,.25);border-radius:9px;font-size:.89rem;font-weight:800;text-decoration:none} #primary.rusto-server-detail .rusto-website-badge::before{content:"Server website";color:var(--rd-muted);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail .rusto-website-badge::after{content:"↗";color:var(--rd-blue);font-size:1rem} #primary.rusto-server-detail .rusto-website-badge:hover{color:#fff;border-color:rgba(130,168,255,.45);background:linear-gradient(180deg,rgba(130,168,255,.18),rgba(130,168,255,.08))} #primary.rusto-server-detail>.rusto-server-discord-hint{grid-column:span 8;margin:0;min-height:82px;padding:17px 18px;display:flex;align-items:center;color:var(--rd-muted);background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);font-size:.85rem;font-style:italic;line-height:1.55} #primary.rusto-server-detail>.rusto-server-discord-hint code{margin-inline:5px;padding:3px 6px;color:#ffe4a3;background:rgba(230,187,93,.10);border:1px solid rgba(230,187,93,.22);border-radius:5px;font-style:normal} /* .rusto-server-discord is the "Join Discord" badge shown once eligible (ServerInsights::discordLinkFor()) — same row/span as the hint it replaces, so the row still reads as one 12-column line alongside .rusto-server-website. Discord's own brand color ("blurple", #5865f2), matching the plugin's existing .rusto-discord-badge on the list page (assets/server-list.css) rather than inventing a new one. */ #primary.rusto-server-detail>.rusto-server-discord{grid-column:span 8;margin:0;min-height:82px;padding:14px;display:flex;align-items:center;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail .rusto-discord-badge{width:100%;min-height:50px;padding:0 16px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;background:linear-gradient(180deg,#5865f2,#4752c4);border:1px solid rgba(88,101,242,.5);border-radius:9px;font-size:.89rem;font-weight:800;text-decoration:none} #primary.rusto-server-detail .rusto-discord-badge::before{content:"Discord";color:rgba(255,255,255,.75);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail .rusto-discord-badge::after{content:"↗";font-size:1rem} #primary.rusto-server-detail .rusto-discord-badge:hover{background:linear-gradient(180deg,#6570f5,#525dd6)} /* connection + tracked date */ #primary.rusto-server-detail>.rusto-server-connect, #primary.rusto-server-detail>.rusto-server-share-connect, #primary.rusto-server-detail>.rusto-server-dates{min-height:78px;margin:0;padding:16px 18px;display:flex;align-items:center;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail>.rusto-server-connect{grid-column:span 6;color:var(--rd-muted)} #primary.rusto-server-detail>.rusto-server-connect code{margin-left:9px;padding:8px 10px;color:#fff;background:#0d151e;border:1px solid var(--rd-border);border-radius:7px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9rem;font-weight:700} /* Shares row 1 with .rusto-server-connect above (6+6 columns) — sits between it and .rusto-connect-cta in the DOM, but the CTA button is grid-column:1/-1 (full width) so it can't fit row 1's remaining 6 columns and wraps to its own row regardless of what's here. */ #primary.rusto-server-detail>.rusto-server-share-connect{grid-column:span 6;gap:9px;color:var(--rd-muted)} #primary.rusto-server-detail>.rusto-server-share-connect a{color:var(--rd-blue);font-weight:700;text-decoration:none} #primary.rusto-server-detail>.rusto-server-share-connect a:hover{text-decoration:underline} #primary.rusto-server-detail>.rusto-server-dates{grid-column:span 6;color:#cbd2d9;font-size:.88rem} #primary.rusto-server-detail>.rusto-server-dates::before{content:"Tracked since";margin-right:10px;color:var(--rd-muted);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em} /* Copy-icon button — reused inline next to the plain address and, inside the connect dialog, next to the console command. rd-muted(#96a1ad) on rd-panel(#111923): ~7.7:1; rd-green on the same is decorative (icon + border only, no text), no contrast requirement there. */ #primary.rusto-server-detail .rusto-copy-icon, .rusto-connect-dialog .rusto-copy-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:8px;padding:0;color:var(--rd-muted);background:transparent;border:1px solid var(--rd-border2);border-radius:7px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease} #primary.rusto-server-detail .rusto-copy-icon svg, .rusto-connect-dialog .rusto-copy-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2} #primary.rusto-server-detail .rusto-copy-icon:hover, .rusto-connect-dialog .rusto-copy-icon:hover{color:var(--rd-text);background:rgba(255,255,255,.05)} #primary.rusto-server-detail .rusto-copy-icon.is-copied, .rusto-connect-dialog .rusto-copy-icon.is-copied{color:var(--rd-green);border-color:var(--rd-green)} /* "Connect to Server" CTA — own full-width grid row (not stretched to fill it — justify-self:start keeps the button itself proportional), same red gradient every other CTA button on this site already uses (hero/wipe-countdown/promo-banner widgets), white text on it already verified ~4.9:1 there. */ #primary.rusto-server-detail>.rusto-connect-cta{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 26px;color:#fff;background:linear-gradient(180deg,#f05242,#cf382d);border:1px solid rgba(255,122,106,.5);border-radius:var(--rd-radius);font:inherit;font-size:1rem;font-weight:850;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.12),0 14px 34px rgba(205,56,45,.23);transition:transform .15s ease,background .15s ease} #primary.rusto-server-detail>.rusto-connect-cta:hover{transform:translateY(-1px);background:linear-gradient(180deg,#fa5b4a,#dd4034)} #primary.rusto-server-detail>.rusto-connect-cta .rusto-steam-icon{width:22px;height:22px} /* Connect dialog — native /showModal(), so this is styled independently of the page's grid (top-layer rendering takes it out of normal flow entirely). Same panel language as the rest of the page: rd-text/rd-muted on rd-panel already verified (~16:1/~6.7:1 here, recomputed against this exact panel value); .rusto-connect-dialog__info reuses rd-panel2, already verified (~15.5:1/~6.4:1) for .rusto-adjusted-retention above; .rusto-connect-dialog__manual reuses the exact .rusto-owner-note pattern (rd-panel2 + rd-blue left border, decorative, no text on the border itself). */ .rusto-connect-dialog{position:relative;width:min(92vw,520px);padding:0;color:var(--rd-text);background:var(--rd-panel);border:1px solid var(--rd-border2);border-radius:var(--rd-radius);box-shadow:0 30px 80px rgba(0,0,0,.45)} .rusto-connect-dialog::backdrop{background:rgba(5,9,14,.72);backdrop-filter:blur(3px)} .rusto-connect-dialog form{margin:0} .rusto-connect-dialog__close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--rd-muted);background:transparent;border:1px solid var(--rd-border2);border-radius:8px;font-size:1.35rem;line-height:1;cursor:pointer} .rusto-connect-dialog__close:hover{color:var(--rd-text);background:rgba(255,255,255,.05)} .rusto-connect-dialog__body{padding:34px 26px 26px;text-align:center} .rusto-connect-dialog__body>.rusto-steam-icon{width:46px;height:46px;color:var(--rd-accent);margin-bottom:14px} .rusto-connect-dialog__body h2{margin:0 0 8px;font-size:1.3rem;font-weight:850;letter-spacing:-.01em} .rusto-connect-dialog__hint{margin:0 0 22px;color:var(--rd-muted);font-size:.86rem;line-height:1.55} .rusto-connect-dialog__steam-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;color:#fff;background:linear-gradient(180deg,#f05242,#cf382d);border:1px solid rgba(255,122,106,.5);border-radius:11px;font-size:1rem;font-weight:850;text-decoration:none;text-transform:uppercase;letter-spacing:.02em;box-shadow:inset 0 1px rgba(255,255,255,.12),0 14px 34px rgba(205,56,45,.23)} .rusto-connect-dialog__steam-button:hover{background:linear-gradient(180deg,#fa5b4a,#dd4034)} .rusto-connect-dialog__steam-button .rusto-steam-icon{width:20px;height:20px} .rusto-connect-dialog__info{margin-top:26px;padding:16px 18px;text-align:left;background:var(--rd-panel2);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} .rusto-connect-dialog__info h3{margin:0 0 10px;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--rd-muted)} .rusto-connect-dialog__info ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .rusto-connect-dialog__info li{font-size:.86rem;line-height:1.55;color:var(--rd-muted)} .rusto-connect-dialog__info li strong{color:var(--rd-text)} .rusto-connect-dialog__command{margin-top:18px;text-align:left} .rusto-connect-dialog__command label{display:block;margin-bottom:6px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--rd-muted)} .rusto-connect-dialog__command-row{display:flex;align-items:center;gap:8px} .rusto-connect-dialog__command-row code{flex:1;min-width:0;padding:10px 12px;overflow-x:auto;white-space:pre;color:var(--rd-text);background:#0d151e;border:1px solid var(--rd-border);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem} .rusto-connect-dialog__manual{margin-top:18px;padding:16px 18px;text-align:left;background:var(--rd-panel2);border-left:3px solid var(--rd-blue);border-radius:var(--rd-radius);font-size:.86rem;line-height:1.6;color:var(--rd-muted)} .rusto-connect-dialog__manual p{margin:0 0 10px} .rusto-connect-dialog__manual strong{color:var(--rd-text)} .rusto-connect-dialog__manual ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px} .rusto-connect-dialog__manual kbd{padding:2px 6px;background:#18232e;border:1px solid var(--rd-border2);border-radius:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8rem} @media(max-width:480px){ .rusto-connect-dialog__body{padding:28px 18px 20px} } /* Standalone shareable connect page (/servers/{id}/connect/, templates/server-connect.php) — same dark panel language/tokens as the rest of this file (the :root block above is global, not scoped to #primary.rusto-server-detail), its own simple linear layout rather than that page's 12-column grid, since this is a much smaller page. rd-bg-on-rd-green for the online badge is the exact pairing .rusto-wipe-today above already uses (~9.7:1); rd-muted on rd-panel2 for the offline badge and on the page's own body background are both already-verified pairings reused, not new contrast math. */ #primary.rusto-connect-page{width:min(calc(100% - 48px),640px);margin:38px auto 76px;display:flex;flex-direction:column;gap:24px} #primary.rusto-connect-page>.rusto-connect-page__header{text-align:center} #primary.rusto-connect-page h1{margin:0 0 14px;color:var(--rd-text);font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.15;font-weight:850;letter-spacing:-.03em;text-wrap:balance} .rusto-connect-page__meta{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;flex-wrap:wrap} .rusto-connect-page__status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em} .rusto-connect-page__status.is-online{color:var(--rd-bg);background:var(--rd-green)} .rusto-connect-page__status.is-offline{color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2)} .rusto-connect-page__status-dot{width:7px;height:7px;border-radius:50%;background:var(--rd-bg);animation:rusto-connect-blink 1.4s ease-in-out infinite} .rusto-connect-page__players{color:var(--rd-muted);font-size:.9rem;font-weight:700} .rusto-connect-page__back{display:inline-block;color:var(--rd-muted);font-size:.84rem;text-decoration:none} .rusto-connect-page__back:hover{color:var(--rd-text);text-decoration:underline} @keyframes rusto-connect-blink{0%,100%{opacity:1}50%{opacity:.25}} @media(prefers-reduced-motion:reduce){.rusto-connect-page__status-dot{animation:none}} @media(max-width:480px){ #primary.rusto-connect-page{width:min(calc(100% - 28px),640px);margin-top:26px} } /* Next/last wipe facts — only rendered when the underlying data exists (see the template), so either can be absent; same panel language as .rusto-server-connect/.rusto-server-dates above rather than a new visual pattern. The *today* case is covered by .rusto-wipe-today above instead of this pair — see the template's own is_wipe_today guard. */ #primary.rusto-server-detail>.rusto-server-next-wipe, #primary.rusto-server-detail>.rusto-server-last-wipe{min-height:60px;margin:0;padding:16px 18px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;grid-column:span 6;color:#cbd2d9;font-size:.88rem;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius)} #primary.rusto-server-detail>.rusto-server-next-wipe time, #primary.rusto-server-detail>.rusto-server-last-wipe time{color:var(--rd-text);font-weight:700} .rusto-wipe-confidence{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border-radius:999px;padding:.15rem .55rem} .rusto-wipe-confidence-high{background:linear-gradient(180deg,#8c302c,#702522);color:#fff} .rusto-wipe-confidence-predicted{background:transparent;color:var(--rd-muted);border:1px solid var(--rd-border2)} /* free-text "Server info" block (A2S_RULES description) — full-width long-form content panel, same family as the connect/dates panels above but roomier line-height for prose. Its own

is nested *inside* this div (not a direct child of #primary), so it's styled by the scoped rule below rather than the bare `>h2` rule further down (which every other top-level section heading uses). */ #primary.rusto-server-detail>.rusto-server-info{grid-column:1/-1;margin:0;padding:22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow);color:#c9d1d9;line-height:1.7} #primary.rusto-server-detail>.rusto-server-info h2{margin:0 0 12px;color:var(--rd-text);font-size:1rem;font-weight:800;letter-spacing:-.012em} #primary.rusto-server-detail>.rusto-server-info p{margin:0} /* FAQ block — same nested-container/nested-h2 pattern as .rusto-server-info above, for the same reason (its own heading, not a top-level section heading). AEO-facing content: real

questions the way a visitor would search them, plain-language answers immediately after — see Servers/ServerSeo.php's faqItems(), also the source for this section's matching FAQPage JSON-LD. */ #primary.rusto-server-detail>.rusto-faq{grid-column:1/-1;margin:0;padding:22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow)} #primary.rusto-server-detail>.rusto-faq h2{margin:0 0 16px;color:var(--rd-text);font-size:1rem;font-weight:800;letter-spacing:-.012em} #primary.rusto-server-detail>.rusto-faq .rusto-faq-item{padding:14px 0;border-top:1px solid var(--rd-border)} #primary.rusto-server-detail>.rusto-faq .rusto-faq-item:first-of-type{border-top:none;padding-top:0} #primary.rusto-server-detail>.rusto-faq h3{margin:0 0 6px;color:var(--rd-text);font-size:.92rem;font-weight:700} #primary.rusto-server-detail>.rusto-faq p{margin:0;color:var(--rd-muted);font-size:.88rem;line-height:1.6} /* charts — the existing markup is h2 + svg + h2 + svg. Deliberately full-width/stacked, not a 1/7 + 7/-1 side-by-side split: CSS Grid's auto-placement cursor doesn't pair interleaved same-column-span items the way it looks like it should — tracing the algorithm, the *second* heading's column-start (7) isn't less than the cursor's column position after the *first* chart is placed, so the engine slots that heading into the first chart's row instead of the second chart's, leaving the jitter chart orphaned a row below with a gap beside it. Full-width avoids the auto-placement cursor logic entirely — each item just takes the next row, in document order, with guaranteed correct heading-above-its-own-chart pairing. */ #primary.rusto-server-detail>h2{grid-column:1/-1;margin:22px 0 0;color:var(--rd-text);font-size:1rem;line-height:1.3;font-weight:800;letter-spacing:-.012em} #primary.rusto-server-detail>h3{grid-column:1/-1;margin:18px 0 0;color:var(--rd-text);font-size:.9rem;line-height:1.3;font-weight:700;letter-spacing:-.008em} /* Small uppercase caption directly above a chart, same treatment as the existing .rusto-server-jitter::before "Jitter" label — clarifies what the plotted line represents (e.g. "Observed daily peak") without needing a full h2/h3 of its own. */ #primary.rusto-server-detail>.rusto-chart-label{grid-column:1/-1;margin:14px 0 0;color:var(--rd-muted);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em} /* "Other servers like this one" (Servers/SimilarServers.php) — spans the full 12-column grid same as every other full-width block on this page; .rusto-server-cards' own internal grid (server-list.css) then lays out the 2-3 cards inside that span, unchanged from how it already works on every other card-rendering page. */ #primary.rusto-server-detail>.rusto-server-cards{grid-column:1/-1} #primary.rusto-server-detail>.rusto-chart{grid-column:1/-1;width:100%;height:auto;min-height:270px;padding:18px;background-color:var(--rd-panel);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 25%,20% 100%;border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow);overflow:visible} #primary.rusto-server-detail>.rusto-chart text{fill:#dfdada!important;font-family:inherit} /* :not(.rusto-multi-chart) — the multi-series persistence chart below needs each of its polylines in a distinct color (rusto-chart-series-N), which this !important single-color rule would otherwise stomp on since it also carries the base .rusto-chart class for panel/grid styling. */ #primary.rusto-server-detail>.rusto-chart:not(.rusto-multi-chart) polyline{stroke:var(--rd-accent)!important;stroke-width:2.2!important;vector-effect:non-scaling-stroke;filter:drop-shadow(0 3px 5px rgba(239,73,57,.18))} #primary.rusto-server-detail>.rusto-chart circle.rusto-chart-point{fill:var(--rd-accent);opacity:.75;transition:r .12s ease,opacity .12s ease} #primary.rusto-server-detail>.rusto-chart circle.rusto-chart-point--active{r:5px;opacity:1;fill:var(--rd-accent);stroke:#000;stroke-width:1.5;vector-effect:non-scaling-stroke} #primary.rusto-server-detail>.rusto-chart line.rusto-chart-annotation{stroke:#8e99a5;stroke-width:1;vector-effect:non-scaling-stroke} #primary.rusto-server-detail>.rusto-chart line.rusto-chart-cursor{stroke:#8e99a5;stroke-width:1;vector-effect:non-scaling-stroke} #primary.rusto-server-detail>.rusto-chart text.rusto-chart-annotation-label{fill:#8e99a5!important;font-size:9px} #primary.rusto-server-detail>.rusto-multi-chart polyline{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke} .rusto-chart-series-1{stroke:var(--rd-accent)} .rusto-chart-series-2{stroke:var(--rd-green)} .rusto-chart-series-3{stroke:var(--rd-blue)} .rusto-chart-series-4{stroke:var(--rd-purple)} .rusto-chart-series-5{stroke:var(--rd-yellow)} #primary.rusto-server-detail>.rusto-chart-legend{grid-column:1/-1;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px;list-style:none;color:var(--rd-muted);font-size:.78rem} .rusto-chart-legend__item{display:inline-flex;align-items:center;gap:6px} .rusto-chart-legend__item::before{content:"";width:10px;height:10px;border-radius:2px;flex:0 0 auto} .rusto-chart-legend__item.rusto-chart-series-1::before{background:var(--rd-accent)} .rusto-chart-legend__item.rusto-chart-series-2::before{background:var(--rd-green)} .rusto-chart-legend__item.rusto-chart-series-3::before{background:var(--rd-blue)} .rusto-chart-legend__item.rusto-chart-series-4::before{background:var(--rd-purple)} .rusto-chart-legend__item.rusto-chart-series-5::before{background:var(--rd-yellow)} /* history */ #primary.rusto-server-detail>h2.rusto-recent-history-heading{grid-column:1/-1;margin-top:28px;font-size:1.12rem} /* rd-yellow(#e6bb5d) on rd-panel2(#141e29): ~9.3:1, well past WCAG AA (4.5:1) for this small-text pill. */ .rusto-admin-only-badge{display:inline-block;margin-left:6px;padding:2px 8px;color:var(--rd-yellow);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-radius:999px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle} /* rd-muted(#96a1ad) on rd-panel2(#141e29): ~6.4:1; rd-text(#f3f6f8) on the same background: ~15.5:1 — both comfortably past WCAG AA (4.5:1). */ #primary.rusto-server-detail>.rusto-adjusted-retention{grid-column:1/-1;margin:10px 0 0;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-radius:var(--rd-radius);font-size:.78rem} .rusto-adjusted-retention-figure{display:inline-flex;align-items:baseline;gap:5px;text-transform:uppercase;font-weight:700;letter-spacing:.04em} .rusto-adjusted-retention-figure strong{color:var(--rd-text);font-size:1rem;font-weight:800;text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums} /* raw-tags panel — reuses .rusto-claim-box code's pill treatment for each tag; rd-text(#f3f6f8) on rgba(255,255,255,.08) over rd-panel(#111923): comfortably past WCAG AA (4.5:1). */ #primary.rusto-server-detail>.rusto-raw-tags-blurb{grid-column:1/-1;margin:8px 0 0;max-width:640px;color:var(--rd-muted);font-size:.82rem;line-height:1.55} #primary.rusto-server-detail>.rusto-raw-tags{grid-column:1/-1;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;list-style:none} .rusto-raw-tag code{display:inline-block;padding:4px 9px;color:var(--rd-text);background:rgba(255,255,255,.08);border:1px solid var(--rd-border2);border-radius:6px;font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} #primary.rusto-server-detail>.rusto-raw-tags-empty{grid-column:1/-1;margin:8px 0 0;color:var(--rd-dim);font-size:.82rem} /* player-history section — reuses .rusto-adjusted-retention's own flex/gap/muted treatment above for the toggle/KPI/coverage rows rather than inventing a new visual language for the same "small muted info strip" shape. */ #primary.rusto-server-detail>.rusto-player-window-toggle{grid-column:1/-1;margin:8px 0 0;color:var(--rd-muted);font-size:.82rem;display:flex;gap:8px;align-items:baseline} .rusto-player-window-toggle a{color:var(--rd-blue);text-decoration:none} .rusto-player-window-toggle a:hover{text-decoration:underline} .rusto-player-window-toggle strong{color:var(--rd-text)} #primary.rusto-server-detail>.rusto-player-kpis{grid-column:1/-1;margin:10px 0 0;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:20px;color:var(--rd-muted);background:var(--rd-panel2);border:1px solid var(--rd-border2);border-radius:var(--rd-radius);font-size:.78rem} .rusto-player-kpi{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap} .rusto-player-kpi strong{color:var(--rd-text);font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums} .rusto-player-kpi small{color:var(--rd-dim);font-size:.72rem;font-weight:400} #primary.rusto-server-detail>.rusto-player-coverage{grid-column:1/-1;margin:8px 0 0;color:var(--rd-dim);font-size:.76rem} #primary.rusto-server-detail>.rusto-player-history-disclaimer{grid-column:1/-1;margin:6px 0 0;max-width:640px;color:var(--rd-dim);font-size:.78rem;font-style:italic;line-height:1.5} #primary.rusto-server-detail>.rusto-player-persistence-blurb{grid-column:1/-1;margin:4px 0 0;max-width:640px;color:var(--rd-muted);font-size:.8rem;line-height:1.55} #primary.rusto-server-detail>.rusto-player-persistence-empty{grid-column:1/-1;margin:8px 0 0;color:var(--rd-dim);font-size:.82rem} /* Native has no cross-browser way to style thumb/track with one shared rule — unstyled it renders the OS light-theme widget, which reads as broken against this page's dark theme. */ #primary.rusto-server-detail>.rusto-player-history-slider{grid-column:1/-1;width:100%;margin:14px 0 0;appearance:none;height:4px;background:var(--rd-border2);border-radius:999px;outline:none} .rusto-player-history-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--rd-accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35)} .rusto-player-history-slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--rd-accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35)} .rusto-player-history-slider::-webkit-slider-runnable-track{height:4px;background:transparent;border-radius:999px} .rusto-player-history-slider::-moz-range-track{height:4px;background:transparent;border-radius:999px} #primary.rusto-server-detail>.rusto-player-slider-readout{grid-column:1/-1;margin:8px 0 0;color:var(--rd-text);font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums;min-height:1.2em} #primary.rusto-server-detail>.rusto-server-history, #primary.rusto-server-detail>.rusto-wipe-history{grid-column:1/-1;width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;color:#dce2e7;background:var(--rd-panel);border:1px solid var(--rd-border);border-radius:var(--rd-radius);box-shadow:var(--rd-shadow);font-size:.86rem} #primary.rusto-server-detail>.rusto-server-history thead th, #primary.rusto-server-detail>.rusto-wipe-history thead th{padding:13px 16px;color:#a8b2bd;background:#151f29;border-bottom:1px solid var(--rd-border);font-size:.72rem;line-height:1.2;font-weight:800;text-align:left;text-transform:uppercase;letter-spacing:.055em} #primary.rusto-server-detail>.rusto-server-history tbody td, #primary.rusto-server-detail>.rusto-wipe-history tbody td{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums} #primary.rusto-server-detail>.rusto-server-history tbody tr:last-child td, #primary.rusto-server-detail>.rusto-wipe-history tbody tr:last-child td{border-bottom:0} #primary.rusto-server-detail>.rusto-server-history tbody tr:hover, #primary.rusto-server-detail>.rusto-wipe-history tbody tr:hover{background:rgba(255,255,255,.025)} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(2){position:relative;padding-left:32px;color:#a4e0ac;font-weight:700} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(2)::before{content:"";position:absolute;left:16px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--rd-green);transform:translateY(-50%)} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(3){font-weight:700} #primary.rusto-server-detail>.rusto-server-history tbody td:nth-child(4){font-weight:800} #primary.rusto-server-detail>.rusto-wipe-history tbody td:nth-child(2){font-weight:700} #primary.rusto-server-detail a:focus-visible, #primary.rusto-server-detail button:focus-visible, #primary.rusto-server-detail select:focus-visible{outline:2px solid var(--rd-accent);outline-offset:3px} @media(max-width:900px){ #primary.rusto-server-detail{grid-template-columns:repeat(6,minmax(0,1fr))} #primary.rusto-server-detail>.rusto-server-status, #primary.rusto-server-detail>.rusto-probe-form, #primary.rusto-server-detail>.rusto-server-jitter, #primary.rusto-server-detail>.rusto-server-checked, #primary.rusto-server-detail>.rusto-server-players, #primary.rusto-server-detail>.rusto-server-map{grid-column:span 3} #primary.rusto-server-detail>.rusto-server-keywords, #primary.rusto-server-detail>.rusto-server-website, #primary.rusto-server-detail>.rusto-server-discord, #primary.rusto-server-detail>.rusto-server-discord-hint, #primary.rusto-server-detail>.rusto-server-connect, #primary.rusto-server-detail>.rusto-server-share-connect, #primary.rusto-server-detail>.rusto-server-dates, #primary.rusto-server-detail>.rusto-server-next-wipe, #primary.rusto-server-detail>.rusto-server-last-wipe, #primary.rusto-server-detail>.rusto-server-history{grid-column:1/-1} } @media(max-width:620px){ #primary.rusto-server-detail{width:min(calc(100% - 28px),var(--rd-shell));padding-top:26px;grid-template-columns:1fr;row-gap:12px} #primary.rusto-server-detail>h1, #primary.rusto-server-detail>.rusto-server-status, #primary.rusto-server-detail>.rusto-probe-form, #primary.rusto-server-detail>.rusto-server-jitter, #primary.rusto-server-detail>.rusto-server-checked, #primary.rusto-server-detail>.rusto-server-players, #primary.rusto-server-detail>.rusto-server-map, #primary.rusto-server-detail>.rusto-server-keywords, #primary.rusto-server-detail>.rusto-server-website, #primary.rusto-server-detail>.rusto-server-discord, #primary.rusto-server-detail>.rusto-server-discord-hint, #primary.rusto-server-detail>.rusto-server-connect, #primary.rusto-server-detail>.rusto-server-share-connect, #primary.rusto-server-detail>.rusto-server-dates, #primary.rusto-server-detail>.rusto-server-next-wipe, #primary.rusto-server-detail>.rusto-server-last-wipe, #primary.rusto-server-detail>.rusto-server-history{grid-column:1} #primary.rusto-server-detail>h1{font-size:clamp(1.75rem,9vw,2.45rem)} #primary.rusto-server-detail>.rusto-wipe-today{font-size:1.15rem;padding:16px 18px} #primary.rusto-server-detail>.rusto-probe-form label{align-items:flex-start;flex-direction:column} #primary.rusto-server-detail>.rusto-probe-form select{width:100%} #primary.rusto-server-detail .rusto-keyword-badge{flex:1 1 calc(50% - 9px)} #primary.rusto-server-detail>.rusto-server-connect{align-items:flex-start;flex-direction:column;gap:9px} #primary.rusto-server-detail>.rusto-server-connect code{margin-left:0;max-width:100%;overflow-wrap:anywhere} #primary.rusto-server-detail>.rusto-connect-cta{width:100%;justify-self:stretch;justify-content:center} #primary.rusto-server-detail>.rusto-chart{min-height:220px;padding:12px} #primary.rusto-server-detail>.rusto-server-history, #primary.rusto-server-detail>.rusto-wipe-history{display:block;overflow-x:auto;white-space:nowrap} #primary.rusto-server-detail>.rusto-player-kpis{flex-direction:column;gap:10px} #primary.rusto-server-detail>.rusto-chart-legend{gap:10px 16px} }