.server-browser-page { background: #080909; color-scheme: dark; }
.sb-main { max-width: 1256px; }
.sb-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.sb-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sb-visually-hidden, .sb-skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sb-skip:focus { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--brand); color: #080808; padding: 12px; }
.sb-nav-inner { max-width: 1256px; }
.sb-nav-links a[aria-current] { color: var(--brand); background: rgba(243,230,0,.06); }
.sb-dashboard-link { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 15px; }
.sb-hero { position: relative; isolation: isolate; padding: 76px 0 57px; overflow: hidden; }
.sb-hero-art { position: absolute; width: 620px; right: -65px; top: -10px; color: #a49e35; opacity: .3; z-index: -1; mask-image: linear-gradient(90deg, transparent, #000 40%); }
.sb-hero-art svg { width: 100%; }
.sb-coordinate { position: absolute; right: 110px; bottom: 42px; font: 9px/1.9 'JetBrains Mono', monospace; letter-spacing: .13em; color: var(--brand); }
.sb-eyebrow { color: #c6c2a4; font: 10px 'JetBrains Mono', monospace; letter-spacing: .18em; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.sb-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 14px #f3e60070; }
.sb-hero h1 { font-size: clamp(42px, 5.4vw, 69px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; margin: 0; }
.sb-hero h1 em { font-family: 'Instrument Serif', Georgia, serif; color: var(--brand); font-weight: 400; letter-spacing: -.015em; }
.sb-hero-copy { font-size: 15px; line-height: 1.8; color: #a3a7a5; max-width: 450px; margin: 22px 0; }
.sb-hero-notes { display: flex; gap: 25px; color: #8e9590; font-size: 11px; }
.sb-hero-notes > span { display: flex; align-items: center; gap: 7px; }
.sb-hero-notes .sb-icon { width: 15px; height: 15px; }
.sb-directory { scroll-margin-top: 90px; }
.sb-directory-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #252925; gap: 16px; }
.sb-tabs { display: flex; gap: 26px; }
.sb-tabs button { appearance: none; color: #919890; border: 0; border-bottom: 2px solid transparent; padding: 18px 1px; background: none; font: 500 14px 'Space Grotesk', sans-serif; display: flex; align-items: center; gap: 9px; cursor: pointer; margin-bottom: -1px; }
.sb-tabs button[aria-selected=true] { color: var(--brand); border-bottom-color: var(--brand); }
.sb-tabs .sb-icon { width: 17px; height: 17px; }
.sb-tab-count { font: 10px 'JetBrains Mono', monospace; background: #20231e; color: #a5ab9c; border-radius: 5px; padding: 3px 6px; }
.sb-tabs [aria-selected=true] .sb-tab-count { background: #f3e60013; color: var(--brand); }
.sb-source-link { color: #8b928b; font-size: 10px; display: flex; gap: 10px; }
.sb-source-link:hover { color: var(--brand); }
.sb-filter-box { margin-top: 24px; padding: 20px; background: #101210; border: 1px solid #262b25; border-radius: 12px; }
.sb-search-row { display: flex; gap: 12px; }
.sb-search { display: flex; align-items: center; gap: 13px; background: #080b09; border: 1px solid #2a3029; border-radius: 7px; padding: 0 15px; flex: 1; min-width: 0; color: #929a89; }
.sb-search:focus-within { border-color: #d8d548; box-shadow: 0 0 0 2px #f3e60012; }
.sb-search input { background: none; border: 0; outline: 0; width: 100%; padding: 14px 0; color: #eff1e8; font: 13px 'Space Grotesk', sans-serif; min-height: 46px; }
.sb-search input::placeholder { color: #858e82; }
.sb-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #181d17; border: 1px solid #333b2f; color: #dde2d7; border-radius: 7px; padding: 10px 15px; min-height: 43px; font: 500 12px 'Space Grotesk', sans-serif; cursor: pointer; transition: border-color .2s, background .2s; }
.sb-button:hover:not(:disabled) { background: #242b1d; border-color: #727b41; }
.sb-button:disabled { opacity: .35; cursor: default; }
.sb-button .sb-icon { width: 16px; height: 16px; }
.sb-more-button[aria-expanded=true] { color: var(--brand); border-color: #696a2a; }
.sb-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 17px; }
.sb-filters label { display: grid; gap: 7px; font-size: 10px; font-weight: 500; color: #a0a898; }
.sb-filters select { appearance: auto; color-scheme: dark; background: #0c0f0c; color: #c6cebf; border: 1px solid #2b3228; border-radius: 6px; width: 100%; min-width: 0; padding: 10px; min-height: 41px; font: 12px 'Space Grotesk', sans-serif; cursor: pointer; }
.sb-filters select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sb-advanced { padding-top: 17px; border-top: 1px solid #292f24; }
.server-browser-page [hidden] { display: none !important; }
.sb-results-bar { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 19px; min-height: 39px; }
.sb-results-bar p { margin: 0 0 3px; font-size: 13px; color: #d9dfd3; }
.sb-results-bar span#freshness { color: #959d8e; font: 10px 'JetBrains Mono', monospace; }
.sb-reset { background: none; border: 0; color: #c9cfbd; font: 12px 'Space Grotesk', sans-serif; cursor: pointer; padding: 10px 0 10px 12px; }
.sb-reset span { color: var(--brand); margin-left: 7px; }
.sb-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.sb-card { min-width: 0; display: flex; flex-direction: column; position: relative; border: 1px solid #282e25; border-radius: 10px; background: linear-gradient(135deg,#141813,#10130f 70%); padding: 19px; transition: border-color .2s, transform .2s; }
.sb-card:hover { border-color: #686f39; transform: translateY(-2px); }
.sb-card-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; color: #adb5a2; font: 9px 'JetBrains Mono',monospace; letter-spacing: .03em; }
.sb-card-platform { display: flex; align-items: center; gap: 6px; color: #c7d1be; }
.sb-platform-dot { width: 5px; height: 5px; border-radius: 50%; background: #9aaa89; }
.sb-platform-dot.psn { background: #8eaeef; }.sb-platform-dot.xbl { background: #8ccf94; }
.sb-card h2 { margin: 15px 0 12px; font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: -.02em; min-height: 45px; }
.sb-card-title { text-align: left; border: 0; padding: 0; background: none; color: #f1f3ea; font: inherit; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sb-card-title:hover { color: var(--brand); }
.sb-card-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 23px; margin-bottom: 19px; }
.sb-chip { display: inline-flex; align-items: center; border: 1px solid #343c2c; border-radius: 4px; padding: 3px 7px; color: #b0bba3; font: 9px/1.3 'JetBrains Mono', monospace; }
.sb-chip.is-brand { color: #dbdb8a; background: #eeec5510; border-color: #555429; }
.sb-card-facts { margin-top: auto; display: grid; grid-template-columns: .7fr .8fr 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid #2a3025; }
.sb-card-facts div { min-width: 0; }
.sb-card-facts dt { color: #949e8a; font-size: 9px; margin-bottom: 4px; }
.sb-card-facts dd { margin: 0; color: #e3e8da; font: 11px 'JetBrains Mono',monospace; overflow-wrap: anywhere; }
.sb-card-bottom { border-top: 1px solid #2a3025; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; }
.sb-card-id { font: 9px 'JetBrains Mono',monospace; color: #929b89; }
.sb-card-details { display: flex; align-items: center; gap: 7px; border: 0; background: none; color: #dce0bb; font: 500 10px 'Space Grotesk',sans-serif; padding: 4px 0 4px 10px; cursor: pointer; }
.sb-card-details .sb-icon { width: 14px; height: 14px; color: var(--brand); }
.sb-pagination { display: flex; align-items: center; justify-content: center; gap: 23px; margin: 30px 0; }
.sb-pagination span { font: 11px 'JetBrains Mono',monospace; color: #a6af9a; }
.sb-empty { grid-column: 1/-1; text-align: center; padding: 64px 20px; border: 1px dashed #343c2b; border-radius: 10px; color: #a7b09d; }
.sb-empty > .sb-icon { width: 32px; height: 32px; color: var(--brand); }
.sb-empty h2 { color: #eef0e6; font-size: 20px; font-weight: 500; }.sb-empty p { font-size: 13px; }
.sb-notice { color: #ded6a1; background: #aca44712; border: 1px solid #6b622d; border-radius: 7px; padding: 12px; margin-bottom: 15px; font-size: 12px; }
.sb-skeleton { min-height: 247px; overflow: hidden; }.sb-skeleton span { display: block; height: 12px; margin: 10px 0; background: #ffffff08; border-radius: 3px; }.sb-skeleton span:nth-child(2) { width: 80%; height: 25px; }.sb-skeleton span:nth-child(3) { width: 60%; }
.sb-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg,transparent,#ffffff04,transparent); animation: sb-shimmer 1.8s infinite; }
@keyframes sb-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sb-owner-callout { margin: 48px 0 22px; display: flex; align-items: center; gap: 18px; border: 1px solid #363b25; border-radius: 10px; padding: 24px; background: linear-gradient(120deg,#c7c3290b,transparent 80%); }
.sb-callout-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #575c2b; border-radius: 9px; color: var(--brand); flex-shrink: 0; }
.sb-owner-callout h2 { font-size: 16px; font-weight: 500; margin: 0 0 4px; }.sb-owner-callout p { font-size: 12px; margin: 0; color: #9da590; }.sb-owner-callout .sb-button { margin-left: auto; flex-shrink: 0; }
.sb-disclaimer { color: #939b8c; font-size: 10px; line-height: 1.8; text-align: center; max-width: 780px; margin: 0 auto 36px; }
.sb-footer { display: flex; align-items: center; gap: 30px; padding-top: 25px; padding-bottom: 30px; border-top: 1px solid #292e24; max-width: 1256px; }.sb-footer nav { display: flex; gap: 22px; font-size: 11px; color: #a9b09e; }.sb-footer > span { margin-left: auto; color: #929a89; font-size: 10px; }
.sb-dialog { color: #eef0e6; background: #11150f; border: 1px solid #484e33; border-radius: 16px; width: min(700px,calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; box-shadow: 0 30px 100px #000b; }
.sb-dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }.sb-dialog-shell { padding: 32px; }.sb-close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; background: #20261b; border: 1px solid #39432e; border-radius: 50%; cursor: pointer; color: #c9d3bc; }
.sb-detail-open { overflow: hidden; }.sb-copy-fallback { width: 100%; background: #080b09; color: var(--text); padding: 10px; border: 1px solid #555c35; border-radius: 5px; }
.sb-card-details { min-height: 36px; }.sb-close { width: 40px; height: 40px; }
.sb-detail-type { color: var(--brand); font: 10px 'JetBrains Mono',monospace; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 15px; }.sb-dialog h2 { padding-right: 16px; font-size: 24px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; margin: 0 0 16px; }.sb-dialog h3 { font-size: 13px; font-weight: 500; margin: 26px 0 12px; }
.sb-detail-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; border: 1px solid #303829; border-radius: 8px; overflow: hidden; background: #303829; margin: 22px 0; }.sb-detail-facts div { background: #141a11; padding: 13px; min-width: 0; }.sb-detail-facts dt { color: #9da791; font-size: 10px; }.sb-detail-facts dd { margin: 5px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.sb-monuments { display: flex; flex-wrap: wrap; gap: 7px; }.sb-monuments .sb-chip { font-size: 10px; padding: 6px 9px; }.sb-monuments b { color: var(--brand); margin-left: 7px; font-weight: 500; }.sb-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }.sb-detail-note { color: #969f8c; font-size: 11px; margin-top: 18px; }.sb-copy-status { min-height: 16px; color: #e5e6a6; font-size: 11px; margin: 12px 0 0; }.sb-dialog details { border-top: 1px solid #303829; margin-top: 22px; padding-top: 15px; font-size: 11px; color: #aab59b; }.sb-dialog summary { cursor: pointer; }.sb-raw-tags { display: grid; gap: 7px; margin-top: 12px; overflow-wrap: anywhere; font: 10px/1.6 'JetBrains Mono',monospace; }
.sb-map-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 25px 0 12px; }.sb-map-heading h3 { margin: 0; }.sb-map-link { color: var(--brand); font-size: 10px; text-underline-offset: 4px; }.sb-map-link:hover { color: #f7f9bd; }
.sb-map-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; min-height: 172px; padding: 24px; border: 1px solid #36422d; border-radius: 9px; background-color: #11180f; background-image: linear-gradient(#a4bc7310 1px,transparent 1px),linear-gradient(90deg,#a4bc7310 1px,transparent 1px); background-size: 28px 28px; text-align: center; overflow: hidden; }.sb-map-stage > .sb-icon { width: 25px; height: 25px; color: #a8b87e; }.sb-map-status { margin: 0; color: #acb79c; font-size: 11px; max-width: 360px; }.sb-map-load { color: #e4e9b0; background: #a5b75d1a; border-color: #677544; min-height: 40px; }.sb-map-stage.is-loaded { padding: 0; min-height: 0; background: #11212a; }.sb-map-image { display: block; width: 100%; max-width: 512px; height: auto; aspect-ratio: 1; object-fit: contain; }.sb-map-caption { font-size: 10px; line-height: 1.7; color: #969f8c; margin: 10px 0 0; }.sb-map-unavailable { color: #969f8c; font-size: 11px; padding: 15px; margin: 0; background: #141a11; border: 1px solid #303829; border-radius: 8px; }
@media (min-width: 1500px) { .sb-main,.sb-nav-inner,.sb-footer { max-width: 1320px; } }
@media (max-width: 1000px) { .sb-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.sb-hero-art { right: -220px; opacity: .23; }.sb-owner-callout { flex-wrap: wrap; }.sb-owner-callout .sb-button { margin-left: 61px; } }
@media (max-width: 700px) { .sb-nav-inner { flex-wrap: wrap; gap: 12px; padding-top: 13px; padding-bottom: 0; }.sb-nav-inner .hp-nav-cta { order: 1; }.sb-nav-links { display: flex !important; order: 2; width: 100%; margin: 0; gap: 4px; overflow-x: auto; }.sb-nav-links a { font-size: 12px; padding: 10px 13px; border-radius: 5px 5px 0 0; white-space: nowrap; }.sb-hero { padding: 44px 0 36px; }.sb-hero-art { right: -330px; opacity: .18; }.sb-hero-copy { font-size: 13px; max-width: 290px; }.sb-hero-notes { gap: 15px; font-size: 10px; }.sb-directory-top { flex-direction: column; align-items: flex-start; gap: 0; }.sb-source-link { padding: 0 0 12px; }.sb-tabs { gap: 23px; }.sb-tabs button { font-size: 13px; }.sb-filter-box { padding: 14px; margin-top: 18px; }.sb-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.sb-search-row { flex-wrap: wrap; }.sb-search { flex-basis: 100%; }.sb-more-button { padding: 8px 10px; font-size: 10px; min-height: 34px; }.sb-search input { font-size: 16px; }.sb-grid { gap: 12px; }.sb-card { padding: 15px; }.sb-card h2 { font-size: 14px; }.sb-card-top { font-size: 8px; }.sb-footer { flex-wrap: wrap; gap: 20px; }.sb-footer > span { flex-basis: 100%; margin: 0; }.sb-owner-callout { padding: 19px; gap: 12px; }.sb-owner-callout > div { flex: 1; }.sb-owner-callout h2 { font-size: 14px; }.sb-owner-callout .sb-button { margin-left: 55px; }.sb-dialog-shell { padding: 24px 18px; }.sb-dialog h2 { font-size: 20px; }.sb-detail-facts { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 490px) { .sb-grid { grid-template-columns: minmax(0,1fr); }.sb-card h2 { min-height: auto; font-size: 16px; }.sb-card { padding: 19px; }.sb-card-top { font-size: 9px; }.sb-hero h1 { font-size: 43px; }.sb-pagination { gap: 12px; }.sb-pagination .sb-button { padding: 10px; }.sb-page-label { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .sb-skeleton::after { animation: none; }.sb-card { transition: none; }.sb-card:hover { transform: none; } }