:root{--bg:#090a0e;--panel:#10131a;--line:#29303e;--soft:#7f8797;--text:#f2f3f6;--pink:#e476ae;--pink2:#ffacd4;--blue:#82b9ff}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{min-width:320px;margin:0;background:radial-gradient(900px 600px at 90% -120px,rgba(228,118,174,.13),transparent 65%),radial-gradient(750px 620px at -220px 58%,rgba(91,124,190,.08),transparent 65%),var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.35}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.site-header{position:sticky;z-index:30;top:0;border-bottom:1px solid var(--line);background:rgba(9,10,14,.88);backdrop-filter:blur(16px)}.nav-shell,.site-main{width:min(1380px,calc(100% - 72px));margin:auto}.nav-shell{display:grid;grid-template-columns:220px auto minmax(250px,360px);align-items:center;min-height:68px;gap:30px}.brand{color:var(--pink);font-size:21px;font-weight:900;letter-spacing:-.08em}.brand::after{margin-left:10px;color:var(--soft);font-size:10px;font-weight:700;letter-spacing:.12em;vertical-align:middle;content:'BHOP STATS'}.nav-links{display:flex;justify-content:center;gap:3px;height:68px}.nav-links a{position:relative;display:grid;place-items:center;padding:0 15px;color:#81899a;font-size:12px;font-weight:700}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-links a.active::after{position:absolute;right:15px;bottom:0;left:15px;height:2px;background:var(--pink);box-shadow:0 0 14px rgba(228,118,174,.85);content:''}.global-search{position:relative;display:flex;align-items:center;gap:8px;min-height:38px;border:1px solid #2b3342;border-radius:4px;padding:0 10px;background:#10131a;transition:border-color .15s,background .15s}.global-search:focus-within{border-color:var(--pink);background:#151821}.search-icon{width:13px;height:13px;border:2px solid #7c8494;border-radius:50%;opacity:.8}.search-icon::after{display:block;width:5px;height:2px;margin:10px 0 0 9px;background:#7c8494;transform:rotate(45deg);content:''}.global-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:12px}.global-search input::placeholder{color:#777f8f}.global-search kbd{border:1px solid #333b4b;border-radius:3px;padding:2px 5px;color:#777f8f;font-size:10px}.header-search-results{position:absolute;top:calc(100% + 8px);right:0;left:0;display:none;max-height:450px;overflow:auto;border:1px solid #363f51;border-radius:5px;padding:7px;background:#12151d;box-shadow:0 20px 70px rgba(0,0,0,.55)}.header-search-results.is-open{display:block}.header-search-results p{margin:0;padding:18px;color:var(--soft);font-size:12px;text-align:center}.header-search-results section+section{margin-top:8px}.header-search-results h3{margin:0;padding:7px 8px;color:var(--pink);font-size:10px;letter-spacing:.12em}.header-search-results .search-result{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:48px;padding:5px 8px}.header-search-results .search-result:hover{background:#1c2230}.header-search-results .search-result-avatar,.header-search-results .search-result-avatar-fallback{grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;background:#242c3a;object-fit:cover}.header-search-results .search-result-avatar-fallback{display:grid;place-items:center}.header-search-results .search-result-type{grid-column:2;color:var(--soft);font-size:9px;letter-spacing:.08em}.header-search-results .search-result strong{grid-column:2;font-size:12px;overflow-wrap:anywhere}.header-search-results .search-result small{grid-column:3;grid-row:1 / span 2;color:var(--soft);font-size:10px}.header-search-results .search-all{display:block;border-top:1px solid var(--line);padding:11px 8px 4px;color:var(--pink2);font-size:12px}.site-main{min-height:calc(100vh - 68px);padding:54px 0 84px}.section-label{margin:0;color:var(--pink);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.home-shell{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:54px}.home-main{min-width:0}.run-masthead{border-left:3px solid var(--pink);padding:2px 0 0 18px}.run-masthead h1{margin:8px 0 7px;font-size:clamp(47px,6.2vw,86px);line-height:.92;letter-spacing:-.085em}.run-masthead-line{display:flex;gap:22px;color:var(--soft);font-size:12px}.run-masthead-line span+span{color:#adb4c2}.home-stats{display:flex;gap:30px;margin:38px 0 32px;padding:0 0 24px;border-bottom:1px solid var(--line)}.home-stats article{display:flex;align-items:baseline;gap:9px}.home-stats strong{color:#fff;font-size:28px;letter-spacing:-.06em}.home-stats span{color:var(--soft);font-size:11px;text-transform:uppercase;letter-spacing:.07em}.feed-command{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:19px}.filter-row{display:flex;gap:2px}.filter-chip{position:relative;min-width:82px;padding:8px 11px;border-bottom:1px solid transparent;color:#858d9d;font-size:12px;font-weight:700;text-align:center;transition:color .18s}.filter-chip:hover{color:#fff}.filter-chip.active{border-color:var(--pink);color:#fff}.filter-chip.active::after{position:absolute;right:20%;bottom:-1px;left:20%;height:2px;background:var(--pink);box-shadow:0 0 12px var(--pink);content:''}.feed-filters{display:flex;gap:10px}.feed-filters label{display:grid;gap:5px;color:var(--soft);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.feed-filters select{min-width:130px;border:1px solid #323b4b;border-radius:4px;padding:8px 28px 8px 10px;outline:0;background:#11151d;color:#e8ebf0;font-size:12px;font-weight:700;letter-spacing:0}.feed-filters select:focus{border-color:#758097}.run-column-labels{display:grid;grid-template-columns:minmax(155px,.9fr) minmax(180px,1.2fr) minmax(165px,.9fr) 92px;gap:20px;border-top:1px solid #363d4c;border-bottom:1px solid var(--line);padding:10px 14px;color:#778093;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.run-column-labels span:last-child{text-align:right}.live-run-feed{border-bottom:1px solid var(--line)}.live-run-card{display:grid;grid-template-columns:minmax(155px,.9fr) minmax(180px,1.2fr) minmax(165px,.9fr) 92px;align-items:center;gap:20px;min-height:83px;border-top:1px solid #232936;padding:12px 14px;transition:background .16s,box-shadow .16s}.live-run-card:hover{background:linear-gradient(90deg,rgba(228,118,174,.075),transparent 70%);box-shadow:inset 2px 0 0 var(--pink)}.live-run-player small{display:block;margin:5px 0 0;color:var(--soft);font-size:10px}.player-link{display:inline-flex;align-items:center;gap:9px;min-width:0;font-weight:750}.player-link span{overflow-wrap:anywhere}.player-avatar{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:#202632;object-fit:cover}.live-run-map .map-name{font-weight:800;overflow-wrap:anywhere}.live-run-map span{display:block;margin-top:5px;color:var(--soft);font-size:11px}.live-run-stats{display:flex;flex-wrap:wrap;gap:6px 10px;color:#8f97a6;font-family:Consolas,'Courier New',monospace;font-size:10px}.live-run-card>strong{justify-self:end;color:var(--blue);font-family:Consolas,'Courier New',monospace;font-size:15px;white-space:nowrap}.sj-badge{display:inline-grid;min-width:22px;place-items:center;margin-left:5px;border:1px solid #4d88d0;border-radius:3px;padding:2px 3px;color:#a7ceff;font-family:Arial,Helvetica,sans-serif;font-size:9px;letter-spacing:.04em;vertical-align:middle}.result-count{margin:18px 0;color:var(--soft);font-size:11px}.pagination{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}.pagination a,.pagination strong,.pagination span{display:grid;min-width:32px;height:32px;place-items:center;border:1px solid var(--line);padding:0 9px;color:#adb5c3;font-size:11px}.pagination strong{border-color:var(--pink);color:#fff}.home-rail{position:sticky;top:94px;display:grid;gap:32px}.rail-latest{position:relative;padding:18px 0 21px;border-top:2px solid var(--pink);border-bottom:1px solid var(--line)}.rail-latest>.map-name{display:block;margin:30px 0 9px;font-size:16px;font-weight:850;overflow-wrap:anywhere}.rail-latest>strong{display:block;color:var(--blue);font-family:Consolas,'Courier New',monospace;font-size:27px;letter-spacing:-.05em}.rail-latest>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:21px;color:var(--soft);font-size:10px}.rail-latest>div>span{max-width:115px;text-align:right}.rail-latest .player-link{font-size:12px}.rail-leaders>div{display:flex;align-items:end;justify-content:space-between;margin-bottom:11px}.rail-leaders h2{margin:5px 0 0;font-size:20px;letter-spacing:-.04em}.rail-leaders>a:not(.rail-all-link){display:grid;grid-template-columns:25px 27px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:47px;border-top:1px solid #232936;transition:background .15s}.rail-leaders>a:not(.rail-all-link):hover{background:#151a24}.rail-leaders>a>span{color:var(--soft);font-family:Consolas,'Courier New',monospace;font-size:10px}.rail-leaders img{width:25px;height:25px;border-radius:50%;background:#222936;object-fit:cover}.rail-leaders b{overflow-wrap:anywhere;font-size:12px}.rail-leaders strong{color:#c9ced9;font-family:Consolas,'Courier New',monospace;font-size:10px}.rail-all-link{display:inline-block;margin-top:15px;color:var(--pink2);font-size:11px;font-weight:800}.rail-all-link::after{margin-left:6px;content:'→'}.directory-command,.profile-command,.map-command{position:relative;overflow:hidden;border-top:2px solid var(--pink);padding:26px 0 30px;border-bottom:1px solid var(--line)}.directory-command{display:flex;align-items:end;justify-content:space-between;gap:30px}.directory-command h1,.profile-command h1,.map-command h1{margin:7px 0 0;font-size:clamp(43px,5vw,70px);line-height:.95;letter-spacing:-.075em}.directory-command>div>span{display:block;margin-top:9px;color:var(--soft);font-size:12px}.directory-search{display:flex;min-width:min(100%,330px);border-bottom:1px solid #4b5465}.directory-search input{width:100%;border:0;outline:0;padding:11px 0;background:transparent;color:#fff}.directory-search input::placeholder{color:var(--soft)}.directory-search button{border:0;background:transparent;color:var(--pink2);font-size:11px;font-weight:800}.directory-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:23px 0 18px;color:var(--soft);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.player-rank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.player-rank-card{display:grid;grid-template-columns:37px minmax(0,1fr);gap:11px;padding:18px;background:var(--panel);transition:background .16s}.player-rank-card:hover{background:#171d28}.player-rank-number{color:var(--pink);font-family:Consolas,'Courier New',monospace;font-size:11px}.player-rank-name small{display:block;margin-top:4px;color:var(--soft);font-family:Consolas,'Courier New',monospace;font-size:9px;overflow-wrap:anywhere}.player-rank-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1 / -1;gap:8px;margin:7px 0 0;padding-top:12px;border-top:1px solid #28303c}.player-rank-card dt{color:var(--soft);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.player-rank-card dd{margin:4px 0 0;font-family:Consolas,'Courier New',monospace;font-size:11px}.player-rank-last{display:none}.record-directory-grid,.map-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}.directory-record-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.7fr) auto;align-items:center;gap:15px;min-height:86px;padding:14px 16px;background:var(--panel);transition:background .15s}.directory-record-card:hover,.map-directory-card:hover{background:#171d28}.directory-record-map .map-name,.map-directory-card .map-name{font-weight:800;overflow-wrap:anywhere}.directory-record-map>span{display:flex;gap:8px;align-items:center;margin-top:7px;color:var(--soft);font-size:10px}.track-tag,.tier-tag{display:inline-block;border:1px solid #3c4657;border-radius:3px;padding:3px 5px;color:#b5c1d2;font-size:9px}.directory-record-player .player-link{font-size:11px}.directory-record-card>strong,.map-directory-card>strong{color:var(--blue);font-family:Consolas,'Courier New',monospace;font-size:13px;white-space:nowrap}.map-directory-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:76px;padding:14px 16px;background:var(--panel);transition:background .15s}.map-tier-index{color:var(--pink);font-family:Consolas,'Courier New',monospace;font-size:12px;font-weight:800}.map-directory-meta{display:block;margin-top:5px;color:var(--soft);font-size:10px}.profile-command{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px}.profile-identity{display:flex;align-items:center;gap:16px}.profile-identity .profile-avatar{width:78px;height:78px;border-radius:50%;background:#222936;object-fit:cover}.steam-id{display:inline-block;margin-top:8px;color:var(--soft);font-family:Consolas,'Courier New',monospace;font-size:11px}.profile-dates{display:flex;gap:18px;grid-column:1 / -1;color:var(--soft);font-size:11px}.profile-dates strong{display:block;margin-top:4px;color:#d3d8e2}.profile-stat-ribbon{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-column:1 / -1;gap:1px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--line)}.profile-stat-ribbon article{padding:14px;background:var(--panel)}.profile-stat-ribbon span{display:block;color:var(--soft);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.profile-stat-ribbon strong{display:block;margin-top:6px;font-family:Consolas,'Courier New',monospace;font-size:18px}.profile-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:38px}.data-block-head{display:flex;align-items:end;gap:11px;border-bottom:2px solid var(--pink);padding-bottom:10px}.data-block-head h2{margin:5px 0 0;font-size:22px;letter-spacing:-.04em}.data-block-head>span{margin-left:auto;color:var(--soft);font-family:Consolas,'Courier New',monospace}.record-card,.run-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px;align-items:center;min-height:63px;border-bottom:1px solid #242a36;padding:11px 0}.run-card{grid-template-columns:64px minmax(0,1fr) auto}.record-card-map .map-name{font-weight:800;overflow-wrap:anywhere}.record-card-meta{display:block;margin-top:5px;color:var(--soft);font-size:10px}.record-card>strong,.run-card>strong,.map-run-card>strong{color:var(--blue);font-family:Consolas,'Courier New',monospace;font-size:12px;white-space:nowrap}.run-card-age{color:var(--soft);font-size:10px}.map-command{display:flex;align-items:end;justify-content:space-between}.map-command-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;color:var(--soft);font-size:11px}.map-command-mark{color:rgba(228,118,174,.55);font-family:Consolas,'Courier New',monospace;font-size:56px;font-weight:900}.map-run-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:28px;border:1px solid var(--line);background:var(--line)}.map-run-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:72px;padding:12px;background:var(--panel)}.map-run-card:hover{background:#171d28}.map-run-rank{color:var(--pink);font-family:Consolas,'Courier New',monospace;font-size:11px}.map-run-card .player-link{font-size:11px}.page-heading{border-top:2px solid var(--pink);padding:24px 0 22px;border-bottom:1px solid var(--line)}.page-heading h1{margin:7px 0 0;font-size:53px;letter-spacing:-.07em}.search-bar,.inline-search{display:flex;gap:8px;margin:22px 0}.search-bar input,.inline-search input{flex:1;border:1px solid var(--line);padding:11px;background:#11151c;color:#fff}.search-bar button,.inline-search button{border:0;padding:0 14px;background:var(--pink);color:#fff;font-size:11px;font-weight:800}.content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.panel-head{border-bottom:2px solid var(--pink);padding:14px 0}.panel-head h2{margin:0;font-size:20px}.table-wrap{overflow:auto;border:1px solid var(--line)}table{width:100%;border-collapse:collapse}th{color:var(--soft);font-size:9px;letter-spacing:.1em;text-align:left;text-transform:uppercase}th,td{border-bottom:1px solid #252b37;padding:12px}td{font-size:12px}.right{text-align:right}.empty-state{margin:20px 0;border:1px dashed #3a4353;padding:20px;color:var(--soft);text-align:center}.page-leaving main{opacity:.35;transform:translateY(4px);transition:.16s}
@media(max-width:1080px){.nav-shell,.site-main{width:min(100% - 40px,1380px)}.home-shell{grid-template-columns:1fr}.home-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.player-rank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-data-grid{gap:26px}}
@media(max-width:720px){.nav-shell{grid-template-columns:auto 1fr;gap:10px 18px;padding:10px 0}.nav-links{order:3;grid-column:1 / -1;justify-content:flex-start;width:100%;height:34px}.nav-links a{padding:0 12px}.global-search{grid-column:2;width:100%}.site-main{width:min(100% - 28px,1380px);padding-top:32px}.brand::after{display:none}.run-masthead h1{font-size:52px}.home-stats{gap:18px;overflow:auto}.home-stats article{flex:0 0 auto;display:block}.home-stats strong{display:block;font-size:23px}.home-stats span{display:block;margin-top:3px}.feed-command{align-items:stretch;flex-direction:column}.feed-filters{justify-content:space-between}.feed-filters label{flex:1}.feed-filters select{width:100%;min-width:0}.run-column-labels{display:none}.live-run-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'player time' 'map map' 'stats stats';gap:7px;min-height:0;padding:15px 5px}.live-run-player{grid-area:player}.live-run-map{grid-area:map}.live-run-stats{grid-area:stats}.live-run-card>strong{grid-area:time}.home-rail{grid-template-columns:1fr}.directory-command{align-items:flex-start;min-height:200px;flex-direction:column}.directory-search{width:100%;margin-top:auto}.directory-toolbar{align-items:flex-start;flex-direction:column}.player-rank-grid,.record-directory-grid,.map-directory-grid,.profile-data-grid,.map-run-grid,.content-grid{grid-template-columns:1fr}.directory-record-card{grid-template-columns:minmax(0,1fr) auto}.directory-record-player{grid-column:1 / -1}.profile-command{display:block}.profile-dates{margin:20px 0}.profile-stat-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-stat-ribbon article:last-child{grid-column:1 / -1}.map-command-mark{display:none}.header-search-results{left:-80px}.table-wrap{border:0}table,thead,tbody,tr,td{display:block}thead{display:none}tr{margin-bottom:10px;border:1px solid var(--line)}td{display:flex;justify-content:space-between;gap:12px}.right{text-align:right}}

/* Masthead, filter controls, the directory search and its live results, and the Players board. */
.brand::after{display:none}.run-masthead h1{font-weight:800;letter-spacing:-.052em}.run-masthead-line{margin-top:12px}.filter-chip.active{border-color:transparent}.filter-chip.active::after{right:13px;left:13px}.feed-filters label{position:relative}.feed-filters label::after{position:absolute;right:12px;bottom:8px;color:#c8d0df;font-size:15px;line-height:1;pointer-events:none;content:'⌄'}.feed-filters select{appearance:none;padding-right:38px}.map-run-grid{grid-template-columns:1fr}.directory-map-search{position:relative}.directory-map-search button{display:none}.directory-live-results{position:absolute;z-index:15;top:calc(100% + 9px);right:0;left:0;display:none;max-height:330px;overflow:auto;border:1px solid #3a4354;background:#11151d;box-shadow:0 20px 60px rgba(0,0,0,.45)}.directory-live-results.is-open{display:block}.directory-live-results p{margin:0;padding:15px;color:var(--soft);font-size:11px}.directory-live-results a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:43px;border-top:1px solid #242b38;padding:0 12px}.directory-live-results a:hover{background:#1a202c}.directory-live-results a strong{overflow-wrap:anywhere;font-size:12px}.directory-live-results a span{color:var(--soft);font-family:Consolas,'Courier New',monospace;font-size:10px}.player-rank-grid{display:none}.player-board{border-top:1px solid #3a4352;border-bottom:1px solid var(--line)}.player-board-labels,.player-board-row{display:grid;grid-template-columns:62px minmax(240px,1fr) 150px 110px 160px;gap:18px;align-items:center}.player-board-labels{min-height:38px;padding:0 14px;color:var(--soft);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.player-board-labels span:nth-child(n+3),.player-board-row>strong,.player-board-row>span:not(.player-rank-number){text-align:right}.player-board-row{min-height:78px;border-top:1px solid #252c38;padding:11px 14px;transition:background .15s,box-shadow .15s}.player-board-row:hover{background:linear-gradient(90deg,rgba(228,118,174,.07),transparent 72%);box-shadow:inset 2px 0 0 var(--pink)}.player-board-row>strong,.player-board-row>span:not(.player-rank-number){font-family:Consolas,'Courier New',monospace;font-size:12px}.player-board-row>strong{color:var(--blue);font-size:14px}.player-board-row .player-link{font-size:13px}.player-board-row .player-avatar{width:32px;height:32px}.player-board-row .player-rank-name small{margin-left:41px}
@media(max-width:720px){.player-board-labels{display:none}.player-board-row{grid-template-columns:42px minmax(0,1fr) auto;gap:10px;min-height:95px}.player-board-row>strong{grid-column:3;grid-row:1;align-self:start}.player-board-row>span:nth-last-child(-n+2){display:none}.player-board-row .player-rank-name small{margin-left:0}.directory-live-results{left:0}.feed-filters label::after{right:11px}.map-run-grid{grid-template-columns:1fr}}

/* Typography, directory search, and native-looking select controls. */
.run-masthead h1{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:750;letter-spacing:-.015em}.feed-filters label::after{right:18px;bottom:12px;width:7px;height:7px;border-right:1.5px solid #c9d0db;border-bottom:1.5px solid #c9d0db;font-size:0;transform:rotate(45deg);content:""}.feed-filters select{padding-right:44px}.directory-map-search button,.directory-player-search button{display:none}.directory-toolbar [data-transition-group="player-sort"] .filter-chip.active{color:var(--pink2);font-weight:850}.directory-toolbar [data-transition-group="player-sort"] .filter-chip.active::after{right:10px;left:10px}.data-block-head{border-bottom-color:var(--pink)}.data-block-head h2{color:var(--pink2);font-size:20px;font-weight:800;letter-spacing:-.02em}.record-card>strong .sj-badge{margin-left:7px}.directory-live-results a{cursor:pointer}

/* Map and home-feed alignment. */
.brand{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:750;letter-spacing:0}.home-rail{margin-top:217px}.map-directory-card{grid-template-columns:minmax(0,1fr) auto}.map-directory-card>strong{justify-self:end}.map-directory-card .sj-badge{margin-left:6px}@media(max-width:1080px){.home-rail{margin-top:0}}@media(max-width:720px){.home-rail{margin-top:0}.map-directory-card{grid-template-columns:minmax(0,1fr) auto}}

/* Pagination and hover states, the directory search results, and the record drawer. */
body{font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif;font-kerning:normal}.brand,.run-masthead h1,.directory-command h1,.profile-command h1,.map-command h1,.page-heading h1{font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;font-kerning:normal;text-rendering:optimizeLegibility}.brand{letter-spacing:0;font-weight:750}.run-masthead h1{letter-spacing:-.005em;font-weight:700}.directory-command h1,.profile-command h1,.map-command h1,.page-heading h1{letter-spacing:-.015em}.nav-links a.active::after{bottom:12px}.pagination a{transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease}.pagination a:hover{border-color:var(--pink);background:rgba(228,118,174,.16);color:#fff;transform:translateY(-2px);box-shadow:0 7px 18px rgba(228,118,174,.15)}.pagination a:focus-visible{outline:2px solid var(--pink2);outline-offset:2px}.directory-map-search,.directory-player-search{z-index:1}.directory-live-results{display:none!important}.directory-inline-empty{grid-column:1 / -1;margin:0;padding:34px 18px;color:var(--soft);font-size:12px;text-align:center}.player-board{position:relative}.player-board.is-filter-empty::after{display:block;border-top:1px solid #252c38;padding:28px 14px;color:var(--soft);font-size:12px;content:'No players match this search.'}.directory-toolbar [data-transition-group="player-sort"] .filter-chip.active{border-color:var(--pink);background:rgba(228,118,174,.12);color:#fff;text-shadow:none}.directory-toolbar [data-transition-group="player-sort"] .filter-chip.active::after{right:14px;left:14px}.record-expand{justify-self:end;border:1px solid #384153;border-radius:3px;padding:5px 8px;background:#121722;color:#c9d2e1;font-size:10px;font-weight:750;transition:border-color .15s,background .15s,color .15s}.record-expand:hover,.record-expand[aria-expanded="true"]{border-color:var(--pink);background:rgba(228,118,174,.12);color:#fff}.live-run-card{grid-template-columns:minmax(155px,.9fr) minmax(180px,1.2fr) minmax(165px,.9fr) 92px auto}.map-run-card,.record-card{grid-template-columns:36px minmax(0,1fr) auto auto}.record-card{grid-template-columns:minmax(0,1fr) auto auto}.record-drawer{display:flex;align-items:center;gap:9px;min-height:52px;border-top:1px solid #303847;border-bottom:1px solid #303847;padding:10px 14px;background:linear-gradient(90deg,rgba(228,118,174,.10),rgba(20,25,35,.25))}.record-action{border:1px solid #414b5e;border-radius:3px;padding:7px 10px;color:#d7deeb;font-size:11px;font-weight:750;transition:border-color .15s,background .15s,color .15s}.record-action:hover{border-color:var(--pink);background:rgba(228,118,174,.16);color:#fff}.record-action-replay{border-color:#4677ae;color:#b6d7ff}.record-action-replay:hover{border-color:#75b5ff;background:rgba(91,148,213,.16)}
/* Clickable run rows with their drawer, and the single record page. */
.live-run-card{grid-template-columns:minmax(155px,.9fr) minmax(180px,1.2fr) minmax(165px,.9fr) 92px;cursor:pointer}.map-run-card{grid-template-columns:36px minmax(0,1fr) auto;cursor:pointer}.record-card{grid-template-columns:minmax(0,1fr) auto;cursor:pointer}.live-run-card:focus-visible,.map-run-card:focus-visible,.record-card:focus-visible{outline:2px solid var(--pink2);outline-offset:-2px}.record-drawer{min-height:0;gap:7px;border-color:#252c38;padding:8px 14px;background:#0d1016}.record-drawer[hidden]{display:none}.record-action{border-color:transparent;border-radius:2px;padding:6px 8px;background:#151b25;color:#d7deeb}.record-action:hover{border-color:#404a5c;background:#1c2431}.record-action-replay{color:#9fc9ff}.replay-unavailable,.record-detail{max-width:940px;margin:30px auto;border-top:2px solid var(--pink);padding:28px 0}.replay-unavailable h1,.record-detail h1{margin:8px 0 7px;font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;font-size:clamp(34px,5vw,62px);font-weight:700;letter-spacing:-.015em}.replay-unavailable p:last-child{color:var(--soft)}.back-link{display:inline-block;margin-bottom:28px;color:var(--pink2);font-size:12px;font-weight:750}.record-detail-head{display:flex;align-items:end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:22px}.record-detail-head p{margin:0;color:var(--soft)}.record-detail-head>strong{color:var(--blue);font-family:Consolas,"Courier New",monospace;font-size:clamp(25px,4vw,46px);white-space:nowrap}.record-detail-player{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0}.record-detail-player>span{color:var(--soft);font-size:11px}.record-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}.record-stat-grid article{padding:16px;background:var(--panel)}.record-stat-grid span{display:block;color:var(--soft);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.record-stat-grid strong{display:block;margin-top:7px;color:#fff;font-family:Consolas,"Courier New",monospace;font-size:18px}.record-detail-actions{display:flex;gap:8px;margin-top:22px}@media(max-width:720px){.record-detail-head{align-items:flex-start;flex-direction:column}.record-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.record-detail-player{align-items:flex-start;flex-direction:column}}

/* The selected Players sort chip, forced so it reads as selected at a glance. */
.filter-row[data-transition-group="player-sort"] .filter-chip.active{border-color:var(--pink)!important;background:var(--pink)!important;color:#fff!important;box-shadow:0 4px 15px rgba(228,118,174,.28)}.filter-row[data-transition-group="player-sort"] .filter-chip.active::after{display:none}

/* Brand mark. */
.brand{display:inline-flex;align-items:center;width:30px;height:30px;font-size:0}.brand svg{display:block;width:30px;height:30px;border-radius:8px;transition:transform .18s ease,filter .18s ease}.brand:hover svg{filter:brightness(1.08);transform:translateY(-1px)}.brand::after{display:none}

/* The type scale. Last layer to set a family, a size or tracking, so it wins over
   everything above it.

   Sizes:    10 / 11 / 12 / 13 / 15 / 18 / 20 / 26 / 28 / display
   Tracking follows size, the way optical sizing does:
     display -.022em | heading -.012em | body 0 | uppercase micro +.085em
   Numerals never take negative tracking, and always use tabular figures. */
:root{--ui:'Inter','Segoe UI Variable','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;--mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;--track-micro:.085em}
body{font-family:var(--ui);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:0}
.run-masthead h1,.directory-command h1,.profile-command h1,.map-command h1,.page-heading h1,.replay-unavailable h1,.record-detail h1{font-family:var(--ui);font-weight:700;letter-spacing:-.022em;line-height:1.03}
.page-heading h1{font-size:clamp(38px,4.6vw,53px)}
.rail-leaders h2,.data-block-head h2,.panel-head h2{font-size:20px;font-weight:700;letter-spacing:-.012em}
.rail-latest>.map-name{font-size:16px;font-weight:700;letter-spacing:-.008em}
.section-label,.eyebrow,.brand::after,.home-stats span,.run-column-labels,.player-board-labels,.profile-stat-ribbon span,.record-stat-grid span,.player-rank-card dt,.feed-filters label,.directory-toolbar,.header-search-results h3,.header-search-results .search-result-type,.map-command-tags .tier-tag,.filter-group-label,.map-tier-index{font-size:10px;font-weight:700;letter-spacing:var(--track-micro);line-height:1.4;text-transform:uppercase}
.feed-filters select,.directory-toolbar span,.filter-chip{text-transform:none}
.nav-links a,.filter-chip,.record-action,.rail-all-link,.directory-search button,.search-bar button,.inline-search button{font-size:12px;font-weight:600;letter-spacing:0}
.live-run-map span,.record-card-meta,.map-directory-meta,.live-run-player small,.directory-record-map>span,.record-action-note,.directory-command>div>span,.profile-dates,.rail-latest>div,.rail-leaders>a>span,.map-command-tags,.result-count,.directory-inline-empty,.header-search-results p{font-size:11px;letter-spacing:0}
.player-link,.map-name,.rail-leaders b,.header-search-results .search-result strong{font-size:13px;font-weight:650;letter-spacing:-.004em}
.map-run-card .player-link,.directory-record-player .player-link,.rail-latest .player-link{font-size:12px}
.home-stats strong{font-size:28px;font-weight:700}
.rail-latest>strong{font-size:26px;font-weight:600}
.profile-stat-ribbon strong,.record-stat-grid strong{font-size:18px}
.player-rank-name small{font-size:10px}
.player-board-row>strong{font-size:15px}
.data-block-head>span{font-size:12px}
.sj-badge{font-size:10px;font-weight:700;letter-spacing:var(--track-micro)}
.home-stats strong,.rail-latest>strong,.profile-stat-ribbon strong,.record-stat-grid strong,.record-detail-head>strong,.live-run-card>strong,.player-board-row>strong,.directory-record-card>strong,.map-directory-card>strong,.record-card>strong,.run-card>strong,.map-run-card>strong,.player-rank-card dd,.pagination a,.pagination strong,.pagination span,.player-rank-number,.map-run-rank,.steam-id,.player-rank-name small,.live-run-stats,.rail-leaders strong,.rail-leaders>a>span,.player-board-row>span:not(.player-rank-number){letter-spacing:0;font-variant-numeric:tabular-nums}
.live-run-card>strong,.player-board-row>strong,.record-detail-head>strong,.rail-latest>strong,.directory-record-card>strong,.map-directory-card>strong,.record-card>strong,.run-card>strong,.map-run-card>strong,.player-rank-number,.map-run-rank,.steam-id,.player-rank-name small,.live-run-stats,.rail-leaders strong,.rail-leaders>a>span,.player-rank-card dd,.global-search kbd,.profile-stat-ribbon strong,.record-stat-grid strong,.data-block-head>span{font-family:var(--mono)}

/* Map page: header meta row and the style/track filters */
.map-command-tags{align-items:center;gap:10px 13px;margin-top:14px}
.map-command-tags .tier-tag{padding:4px 9px;border-radius:999px;border-color:#3a4353;color:#c8d2e0}
.map-command-stat{display:inline-flex;align-items:center;gap:13px}
.map-command-stat+.map-command-stat::before{color:#39414f;content:"\00B7"}




.map-filter-bar{margin-top:24px}
.map-run-grid .record-drawer{grid-column:1 / -1}
.record-action-note{color:var(--soft)}

/* Filter dropdowns.
   Matched to the header search control: same 38px height, same border and panel
   colours. The caret is drawn from two borders and centred on the select box by
   construction - label text 14px + 5px gap + 38px select puts the select centre
   19px off the label's bottom, so an 8px caret box sits at 15px. */
.feed-filters label{position:relative;gap:5px}
.feed-filters select{height:38px;min-width:146px;border:1px solid #2b3342;border-radius:4px;padding:0 36px 0 12px;background:var(--panel);color:#e8ebf0;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:0;appearance:none;transition:border-color .15s ease,background .15s ease}
.feed-filters select:hover{border-color:#3a4353}
.feed-filters select:focus{border-color:var(--pink);background:#151821;outline:0}
.feed-filters label::after{position:absolute;right:15px;bottom:15px;width:8px;height:8px;border-right:1.5px solid #8b93a4;border-bottom:1.5px solid #8b93a4;transform:rotate(45deg) translate(-2px,-2px);pointer-events:none;content:""}

/* Expandable run rows.
   The play link gets its own grid column rather than row padding, so the time
   column keeps its width and stays under the Time header. */
.run-column-labels,.live-run-card{grid-template-columns:minmax(155px,.9fr) minmax(180px,1.2fr) minmax(165px,.9fr) 92px 26px}
.map-run-card{grid-template-columns:36px minmax(0,1fr) auto 26px}
.record-card{grid-template-columns:minmax(0,1fr) auto 26px}
.run-card{grid-template-columns:64px minmax(0,1fr) auto 26px;cursor:pointer}
.run-card:focus-visible{outline:2px solid var(--pink2);outline-offset:-2px}
.row-replay{display:grid;width:26px;height:26px;place-items:center;justify-self:end;border-radius:50%;color:#6d7587;transition:background .16s ease,color .16s ease}

a.row-replay:hover,a.row-replay:focus-visible{background:rgba(228,118,174,.16);color:var(--pink2)}
.row-replay.is-disabled{color:#2f3745;cursor:default}

@media(max-width:720px){
.live-run-card[aria-controls^="record-actions-"],.map-run-card[aria-controls^="record-actions-"],.record-card[aria-controls^="record-actions-"],.run-card[aria-controls^="record-actions-"]{position:relative;padding-right:34px}
.live-run-card{grid-template-columns:minmax(0,1fr) auto}
.map-run-card{grid-template-columns:36px minmax(0,1fr) auto}
.record-card,.run-card{grid-template-columns:64px minmax(0,1fr) auto}
.row-replay{position:absolute;top:50%;right:4px;transform:translateY(-50%)}
}

/* Sticky column headers.
   The run and player tables lose their meaning once the header row scrolls off,
   so pin it directly under the site header (69px tall) the way the home rail is
   pinned. Same translucent panel treatment as the header, so rows read through
   it consistently. Hidden below 720px, where these label rows are display:none. */
.player-board-labels{position:sticky;z-index:10;top:69px;background:rgba(9,10,14,.88);backdrop-filter:blur(16px)}
/* The whole feed header travels together: the rule above it, the Times/Records switch,
   the style and track filters, and the column labels. .run-column-labels is no longer
   sticky on its own - it is inside this block now, and nesting sticky inside sticky
   misbehaves. Its background stays transparent so the blur is not applied twice. */
/* The rule above the filters and the pink rule above LATEST RECORD are now the top edge
   of two grid items sharing a row, so they line up at every viewport width instead of
   relying on the rail carrying a hand-tuned 217px top margin. */
.home-shell{gap:0 54px;grid-template-rows:auto auto auto}
@media(max-width:720px){.home-shell{grid-template-rows:none}.run-masthead,.home-stats,.home-main,.home-rail{grid-column:1;grid-row:auto}}


/* Home: the numbers, the servers, the standing record, and the feed at full
   width, with no masthead and no rail. */
.stat-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 34px;padding:4px 0 22px;border-bottom:1px solid var(--line)}
.stat-strip{display:flex;flex-wrap:wrap;gap:0;margin:0}
.stat-strip div{padding:0 26px 0 0}
.stat-strip div+div{padding-left:26px;border-left:1px solid #212836}
.stat-strip dt{color:var(--soft);font-size:10px;font-weight:700;letter-spacing:var(--track-micro);text-transform:uppercase}
.stat-strip dd{margin:8px 0 0;font-family:var(--mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1}
.stat-strip div:first-child dd{color:var(--pink2)}

.server-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.connect-chip{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 5px 0 12px;border:1px solid #2b3342;border-radius:999px;background:var(--panel);color:#dfe5ef;transition:border-color .15s ease,background .15s ease}
.connect-chip:hover{border-color:var(--pink);background:#151821}
.connect-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--pink);box-shadow:0 0 9px rgba(228,118,174,.9)}
.connect-chip code{font-family:var(--mono);font-size:12px;letter-spacing:0}
.connect-hint{padding:5px 10px;border-radius:999px;background:#1b2130;color:#9aa3b4;font-size:9px;font-weight:700;letter-spacing:var(--track-micro);text-transform:uppercase;transition:background .15s ease,color .15s ease}
.connect-chip:hover .connect-hint{background:var(--pink);color:#fff}
.connect-chip.is-copied .connect-hint{background:#3ecf8e;color:#06231a}
.discord-link{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border:1px solid #2b3342;border-radius:999px;background:var(--panel);color:#c3cbdb;font-size:12px;font-weight:600;transition:border-color .15s ease,background .15s ease,color .15s ease}
.discord-link svg{width:15px;height:15px}
.discord-link:hover{border-color:#5865f2;background:rgba(88,101,242,.14);color:#fff}

.record-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:20px;padding:15px 18px;border:1px solid var(--line);border-left:2px solid var(--pink);background:var(--panel);transition:background .16s ease}
.record-banner:hover{background:#151a24}
.record-banner .section-label{flex:0 0 auto}
.record-banner-map{font-size:15px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.record-banner strong{color:var(--blue);font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:0}
.record-banner-meta{margin-left:auto;color:var(--soft);font-size:11px}

/* Segmented switch. Same component as the map page track toggle, reused for Times/Records
   so the feed header speaks one language instead of mixing underline tabs with pills. */
.seg{display:inline-flex;gap:2px;height:38px;padding:3px;border:1px solid #2b3342;border-radius:999px;background:var(--panel)}
.seg .filter-chip{display:inline-flex;align-items:center;height:100%;min-width:0;padding:0 17px;border:0;border-radius:999px;color:#8a92a3;font-size:12px;font-weight:600;transition:background .15s ease,color .15s ease}
.seg .filter-chip::after{display:none}
.seg .filter-chip:hover{color:#fff}
.seg .filter-chip.active{background:var(--pink);color:#fff}

/* The feed header had four stacked rules in 130px: its own top border, the column labels'
   top and bottom borders, and the block above. Only the one under the labels earns its
   keep - it is the edge the rows scroll beneath. */
.home-main{margin-top:26px}
/* Only the column labels stay put. Everything above them - the switch, the filters, the
   banner, the stat bar - scrolls away. The labels are a direct child of .home-main rather
   than of a wrapper, because a sticky element only sticks within its containing block. */
.feed-command{align-items:center;margin-bottom:14px}
.feed-command .field-label{display:none}
.run-column-labels{position:sticky;z-index:10;top:69px;border-top:0;background:rgba(9,10,14,.94);backdrop-filter:blur(16px)}

@media(max-width:720px){
.stat-bar{gap:18px}
.stat-strip{gap:14px 0}
.stat-strip div{flex:1 1 33%;padding:0 12px 0 0}
.stat-strip div+div{padding-left:0;border-left:0}
.stat-strip dd{font-size:20px}
.server-bar{width:100%}
.connect-chip{flex:1 1 100%;justify-content:space-between}
.record-banner-meta{margin-left:0}
.feed-command{align-items:stretch;flex-direction:column;gap:10px}
.seg{align-self:flex-start}
}

/* Ambient background. The two glows were anchored to the document, so the pink one showed
   only in the first screenful and everything below it was flat. Fixing them to the viewport
   keeps the same wash at every scroll position. */
:root{--page-glow:radial-gradient(1200px 760px at 92% -6%,rgba(228,118,174,.10),transparent 62%),radial-gradient(1000px 760px at 4% 104%,rgba(91,124,190,.07),transparent 62%)}
body{background-color:var(--bg);background-image:var(--page-glow);background-attachment:fixed;background-repeat:no-repeat}

/* Pagination hover: colour only. The lift and glow made the row jitter under the cursor. */
.pagination a{transition:background .15s ease,border-color .15s ease,color .15s ease}
.pagination a:hover{border-color:var(--pink);background:rgba(228,118,174,.16);color:#fff;transform:none;box-shadow:none}

/* Hover colour. At 7-8% alpha over a near-black panel the tint reads grey, not pink, so
   every clickable row gets the same stronger treatment and the play control gets a solid
   pink fill. */
.live-run-card:hover,.map-run-card:hover,.record-card:hover,.run-card:hover,.player-board-row:hover,.directory-record-card:hover,.map-directory-card:hover{background:linear-gradient(90deg,rgba(228,118,174,.17),rgba(228,118,174,.04) 72%);box-shadow:inset 2px 0 0 var(--pink)}
a.row-replay:hover,a.row-replay:focus-visible{background:var(--pink);color:#fff}

/* Sticky headers paint the page background rather than a panel colour. Both are
   attachment:fixed, so the gradient lines up exactly with what is behind them and the
   header has no visible edge - but it is still opaque enough to hide rows scrolling under. */
.run-column-labels,.player-board-labels{background-color:var(--bg);background-image:var(--page-glow);background-attachment:fixed;background-repeat:no-repeat;backdrop-filter:none}

/* Play control: an svg with rounded joins, sized inside the same 26px hit area. */
.row-replay svg{display:block;width:22px;height:22px}

/* Pagination gap doubles as a page jump. */
.page-jump{display:grid;min-width:32px;height:32px;place-items:center;padding:0 9px;border:1px solid var(--line);background:transparent;color:#adb5c3;font-family:var(--mono);font-size:11px;transition:border-color .15s ease,background .15s ease,color .15s ease}
.page-jump:hover{border-color:var(--pink);background:rgba(228,118,174,.16);color:#fff}
.page-jump.is-open{border-color:var(--pink)}
.page-jump.is-invalid{border-color:#e0605f}
.page-jump-input{height:30px;border:0;outline:0;padding:0;background:transparent;color:#fff;font-family:var(--mono);font-size:12px;text-align:center;-moz-appearance:textfield}
.page-jump-input::-webkit-outer-spin-button,.page-jump-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}

/* [hidden] loses to any author rule that sets display, and these rows are display:grid,
   so the live filters were setting the attribute with no visible effect. */
[hidden]{display:none!important}
.record-directory-grid.is-filter-empty::after{grid-column:1 / -1;display:block;padding:30px 18px;background:var(--panel);color:var(--soft);font-size:12px;text-align:center;content:"No records match this search."}

tbody.is-filter-empty::after{display:block;padding:22px 12px;color:var(--soft);font-size:12px;text-align:center;content:"Nothing here matches."}

/* The grid paints --line behind its 1px gaps, so an empty state with no background of
   its own showed as a bare lighter slab. It fills the row like a card now. */
.directory-inline-empty{grid-column:1 / -1;display:grid;place-items:center;min-height:132px;margin:0;padding:34px 20px;background:var(--panel);color:#8a92a3;font-size:13px;font-weight:500;text-align:center}

/* Whole map tile is the link. One real anchor, stretched over the card, so the markup
   stays a single link for screen readers and both the PHP and JS renderers work as-is. */
.map-directory-card{position:relative;cursor:pointer}
.map-directory-card .map-name::after{position:absolute;z-index:1;inset:0;content:""}
.map-directory-card .sj-badge{position:relative;z-index:2}

/* Only the base rule sets a family for this badge, and it is Arial. The typography layer
   set its size and tracking but not its family, so it escaped the sweep. */
.sj-badge{font-family:var(--ui)}

/* Mobile polish.
   The active-nav underline was pinned 12px off the bottom, which suits a 68px
   desktop nav link but cuts through the text of a 34px mobile one. */
@media(max-width:720px){
.nav-links a.active::after{right:12px;bottom:0;left:12px}
.site-main{padding-top:24px}
/* Dot and address sit together on the left, Copy stays on the right, rather than
   space-between stranding the address in the middle of the chip. */
.connect-chip{justify-content:flex-start;gap:10px}
.connect-chip code{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-bar{gap:16px;padding-bottom:18px}
.stat-strip{gap:16px 0}
.stat-strip dd{margin-top:5px;font-size:21px}
/* Discord matches the chips above it instead of sitting alone on a short row. */
.discord-link{flex:1 1 100%;justify-content:center}
.record-banner{gap:6px 14px;padding:13px 15px}
.record-banner-map{font-size:14px}
.record-banner strong{font-size:16px}
}

/* Measure.
   The shell was capped at 1380px, so on a wide monitor a run row stretched to
   1353px and the eye had to travel 1242px from a player name to their time. The
   columns were the other half of it: jumpstats held 200px of content in a 338px
   column because every column was an fr that grew to fill. Cap the measure, and
   pin the columns that have a fixed content width. */
:root{--shell:min(980px,calc(100% - 48px))}
.nav-shell,.site-main{width:var(--shell)}
.run-column-labels,.live-run-card{grid-template-columns:minmax(180px,1fr) minmax(200px,1.15fr) 210px 92px 26px}
@media(max-width:720px){.site-main{width:min(100% - 28px,980px)}}

/* Compact rows.
   Rows were 83px because each cell stacked two or three lines. The date, jump
   count, strafes and sync moved into the drawer, so a row is one line of content
   and roughly 50px - about 40% more rows on screen without scrolling. */
.run-column-labels,.live-run-card{grid-template-columns:minmax(170px,1fr) minmax(180px,1.1fr) 130px 118px 26px}
.live-run-card{min-height:0;padding:9px 14px;align-items:center}
.live-run-player{min-width:0}
.live-run-player .player-link{font-size:13px}
.live-run-map{min-width:0}
.live-run-map .map-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-style{color:var(--soft);font-size:11px;white-space:nowrap}

/* Time and its delta share one right-aligned cell. */
.run-time{display:grid;justify-items:end;gap:2px;justify-self:end}
.live-run-card>.run-time>strong,.map-run-card>.run-time>strong{color:var(--blue);font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.run-delta{font-family:var(--mono);font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.run-delta.is-faster{color:#4ade80}
.run-delta.is-slower{color:#f0736f}
.run-delta.is-only{color:#5b6373}

/* The map leaderboard follows the same shape. */
.map-run-card{grid-template-columns:36px minmax(0,1fr) 118px 26px;min-height:0;padding:9px 12px;align-items:center}
.map-run-card .record-card-meta{margin-top:3px}

/* Selects look clickable. */
.feed-filters select,.filter-chip,.page-jump{cursor:pointer}

/* Latest record banner: avatar, name, style, age - grouped rather than run together. */
.record-banner-meta{display:inline-flex;align-items:center;gap:9px;margin-left:auto}
.record-banner-meta .player-avatar{width:22px;height:22px}
.record-banner-meta b{color:#dfe5ef;font-size:12px;font-weight:650}
.record-banner-meta .run-style{padding:3px 9px;border:1px solid #2b3342;border-radius:999px;color:#9aa3b4;font-size:10px}
.record-banner-meta time{color:var(--soft);font-size:11px}

/* Drawer detail: the numbers the row stopped showing. */
.record-drawer{flex-wrap:wrap}
.run-facts{display:inline-flex;flex-wrap:wrap;align-items:center;gap:14px;margin-left:auto;color:var(--soft);font-size:11px}
.run-facts b{color:#c9ced9;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;font-weight:600}

@media(max-width:720px){
.live-run-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'player time' 'map time' 'style time';gap:2px 12px;padding:11px 5px}
.live-run-player{grid-area:player}
.live-run-map{grid-area:map}
.live-run-card>.run-style{grid-area:style}
.live-run-card>.run-time{grid-area:time;align-self:center}
.map-run-card{grid-template-columns:32px minmax(0,1fr) auto}
.record-banner-meta{flex-wrap:wrap;margin-left:0}
}

/* align-items:baseline lined up text baselines, which left the 22px avatar and the
   padded style pill sitting off-centre against the rest. */
.record-banner{align-items:center}
.record-banner .section-label,.record-banner-map,.record-banner strong,.record-banner-meta{display:inline-flex;align-items:center}

/* An age column, so you can see when a run happened without opening the drawer. */
.run-column-labels,.live-run-card{grid-template-columns:minmax(160px,1fr) minmax(170px,1.05fr) 120px 62px 118px 26px}
.run-age{color:var(--soft);font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}

/* The map link was display:block, so it filled its whole column and the empty space to
   the right of the name still opened the map instead of the row drawer. */
.live-run-map .map-name{display:inline-block;max-width:100%;vertical-align:top}

@media(max-width:720px){
.live-run-card{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'player player time' 'map map time' 'style age time';gap:2px 10px}
.live-run-card>.run-age{grid-area:age;justify-self:end}
}

/* Three columns.
   Player, Map, Time. Style left with the filter that already controls it, and the
   age moved under the time rather than owning a column of its own. */
.run-column-labels,.live-run-card{grid-template-columns:minmax(150px,1fr) minmax(200px,1.5fr) 200px 26px}
.run-time{display:grid;justify-items:end;gap:3px;justify-self:end}
.run-time-main{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.run-delta{font-size:11px}
.run-age{color:var(--soft);font-family:var(--ui);font-size:11px;letter-spacing:0;white-space:nowrap}
.live-run-map .run-style{display:block;margin-top:3px}
.map-run-card{grid-template-columns:36px minmax(0,1fr) 200px 26px}

@media(max-width:720px){
.live-run-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'player time' 'map time';gap:3px 12px}
.map-run-card{grid-template-columns:32px minmax(0,1fr) auto}
.run-time{justify-items:end}
}

/* Tighter.
   Measured on real rows: the player column carried 158px of slack, the time cell
   never exceeds 153px even with an SJ badge and a WR delta, and the widest map in
   the database is 303px. So the measure comes in, the gap and padding shrink, and
   the time column is pinned just above its worst case instead of a round 200. */
:root{--shell:min(860px,calc(100% - 44px))}
.run-column-labels,.live-run-card{grid-template-columns:minmax(120px,.62fr) minmax(190px,1fr) 170px 26px;gap:16px;padding-left:12px;padding-right:12px}
.live-run-card{padding-top:7px;padding-bottom:7px}
.map-run-card{grid-template-columns:32px minmax(0,1fr) 170px 26px;gap:12px;padding:7px 12px}
.run-time{gap:1px}
.run-age{line-height:1.3}
/* A very long map name shortens rather than forcing the row wider. */
.live-run-map .map-name,.live-run-player .player-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-run-player .player-link{max-width:100%}

/* A run with no predecessor gets a label, not a delta: subtracting from nothing would
   dress up the full run time as an improvement that never happened. */
.run-delta.is-first{color:#4ade80;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:var(--track-micro);text-transform:uppercase}

/* baseline aligned the text baselines, which left the small uppercase label and the
   delta sitting about a pixel below the time. Centre the line box instead. */
.run-time-main{align-items:center}

/* Stat bar aligned to the table.
   The strip and the server row hugged the left and stopped 268px short of the
   rows below. Pad them to the rows content box and give each stat an equal share
   so the bar spans exactly the width a run row does. */
.stat-bar{padding-left:12px;padding-right:12px}
.stat-strip{flex:1 1 100%;gap:0}
.stat-strip div{flex:1 1 0;min-width:0;padding:0 0 0 22px;border-left:1px solid #212836}
.stat-strip div:first-child{padding-left:0;border-left:0}
.server-bar{flex:1 1 100%}
@media(max-width:720px){
.stat-bar{padding-left:0;padding-right:0}
.stat-strip div{flex:1 1 33%;padding:0 12px 0 0;border-left:0}
}

/* Padding on every item but the first made that first column 27px narrower than the
   rest. Space them with gap so all six get an identical share, and hang the dividers
   in the gaps instead of on the items. */
.stat-strip{gap:22px}
.stat-strip div{position:relative;flex:1 1 0;min-width:0;padding:0;border-left:0}
.stat-strip div+div::before{position:absolute;top:2px;bottom:2px;left:-11px;width:1px;background:#212836;content:""}
@media(max-width:720px){.stat-strip{gap:14px 0}.stat-strip div{flex:1 1 33%;padding:0 12px 0 0}.stat-strip div+div::before{display:none}}

/* .stat-strip div+div is more specific than .stat-strip div, so the older padding rule
   kept winning and left the first column 27px narrower. Override at equal specificity. */
.stat-strip div+div{padding-left:0;border-left:0}

/* The strip spans the same width as a run row, but every label and number sat hard
   against the left of its own column, which read as the whole bar being pushed left.
   Centre the contents of each column, and centre the chips as a group. */
.stat-strip div{text-align:center}
.server-bar{justify-content:center}
.result-count{display:none}
.pagination{justify-content:center}
@media(max-width:720px){.stat-strip div{text-align:left}.server-bar{justify-content:stretch}}

/* Chip padding was 12px on the left against 5px on the right, so the dot/address/Copy
   group sat right of centre. Equal padding both sides. The Discord label was riding
   0.59px high because its line box is taller than the glyphs; line-height:1 makes the
   box hug the text so centring it centres what you actually see. */
.connect-chip{padding:0 10px}
.connect-hint{margin-left:1px}
.discord-link{line-height:1}
.discord-link svg{display:block}
.discord-link span{display:block;line-height:1}

/* The pill sits dead centre in the chip, but its own label did not: 5.00px of space above
   the glyphs against 6.14px below, because the line box is taller than the text and the
   slack fell underneath. Shift a pixel of padding from bottom to top; the pill keeps its
   height, the label moves down onto the centre line. */


/* Rather than compensating for the leading with lopsided padding, remove it: line-height:1
   makes the line box smaller than the glyphs, so the overflow splits evenly and flex
   centring puts the label on the pill's centre line. Fixed height keeps the pill size. */
.connect-hint{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 10px;line-height:1}

/* SourceJump profile section.
   Global standing per map, assembled from the per-map leaderboards because
   SourceJump exposes no player endpoint. */
.sj-profile{margin-top:44px}
.sj-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:18px;border:1px solid var(--line);background:var(--line)}
.sj-summary article{padding:13px 14px;background:var(--panel)}
.sj-summary span{display:block;color:var(--soft);font-size:10px;font-weight:700;letter-spacing:var(--track-micro);text-transform:uppercase}
.sj-summary strong{display:block;margin-top:6px;font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:0}
.sj-summary article:first-child strong{color:var(--pink2)}
.sj-filters{flex-wrap:wrap;gap:6px;margin:18px 0 14px}
.sj-filters .filter-chip{min-width:0;padding:7px 13px;border:1px solid transparent;border-radius:999px;font-size:11px}
.sj-filters .filter-chip::after{display:none}
.sj-filters .filter-chip:hover{border-color:#333c4c;color:#fff}
.sj-filters .filter-chip.active{border-color:var(--pink);background:rgba(228,118,174,.13);color:#fff}
.sj-labels,.sj-row{display:grid;grid-template-columns:minmax(0,1fr) 74px 104px 96px 150px;align-items:center;gap:14px}
.sj-labels{padding:0 12px 8px;color:var(--soft);font-size:10px;font-weight:700;letter-spacing:var(--track-micro);text-transform:uppercase}
.sj-row{min-height:44px;padding:7px 12px;border-top:1px solid #232936}
.sj-row:hover{background:linear-gradient(90deg,rgba(228,118,174,.17),rgba(228,118,174,.04) 72%);box-shadow:inset 2px 0 0 var(--pink)}
.sj-tier{color:var(--soft);font-family:var(--mono);font-size:11px}
.sj-tier small{margin-left:6px;color:#5f6675}
.sj-time{color:var(--blue);font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:0}
.sj-rank{color:#c9ced9;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.sj-rank small{margin-left:5px;color:#5f6675;font-size:10px}
.sj-rank.is-wr{color:#4ade80}
.sj-rank.is-podium{color:var(--pink2)}
.sj-row time{color:var(--soft);font-family:var(--mono);font-size:11px}
.sj-thief b{display:block;color:#dfe5ef;font-size:12px;font-weight:650}
.sj-thief span{color:var(--soft);font-family:var(--mono);font-size:10px}
@media(max-width:720px){
.sj-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.sj-summary article:last-child{grid-column:1 / -1}
.sj-labels{display:none}
.sj-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'map rank' 'tier time' 'when when';gap:3px 12px}
.sj-row .map-name{grid-area:map}.sj-tier{grid-area:tier}.sj-time{grid-area:time;justify-self:end}.sj-rank{grid-area:rank;justify-self:end}
.sj-row time,.sj-thief{grid-area:when}
}

/* Maps directory filters.
   Tier and points come from SourceJump, so the chips only offer tiers that data
   actually contains. The chips are pills rather than the wide underlined tabs
   used for feeds, because there are up to eight of them on one line. */
.map-tier-filters{flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 20px}
.map-tier-filters .filter-chip{min-width:0;padding:7px 14px;border:1px solid transparent;border-radius:999px;font-size:11px}
.map-tier-filters .filter-chip::after{display:none}
.map-tier-filters .filter-chip:hover{border-color:#333c4c;color:#fff}
.map-tier-filters .filter-chip.active{border-color:var(--pink);background:rgba(228,118,174,.13);color:#fff}
.filter-split{width:1px;height:20px;margin:0 6px;background:var(--line)}
.map-tier{display:inline-block;margin-right:7px;border:1px solid #3c4657;border-radius:3px;padding:2px 5px;color:#b5c1d2;font-family:var(--mono);font-size:9px;letter-spacing:0}
/* The card lost its leading tier-index column, so the name must start at the edge. */
.map-directory-card{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:720px){.filter-split{display:none}}

/* Profile source selector.
   A segmented control, deliberately unlike both the underlined feed tabs and the
   pill filters: this picks which profile you are reading, not how it is filtered. */
.profile-views{display:inline-flex;gap:3px;margin:26px 0 24px;border:1px solid var(--line);border-radius:7px;padding:3px;background:var(--panel)}
.profile-views a{display:grid;min-width:158px;justify-items:center;gap:3px;border-radius:5px;padding:10px 20px;color:#858d9d;font-size:13px;font-weight:750;transition:background .16s,color .16s}
.profile-views a:hover{color:#fff}
.profile-views a.active{background:rgba(228,118,174,.14);box-shadow:inset 0 0 0 1px rgba(228,118,174,.45);color:#fff}
.profile-views small{color:var(--soft);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0}
.profile-views a.active small{color:var(--pink2)}
.profile-views+.profile-stat-ribbon{border-top:1px solid var(--line)}
.sj-profile{margin-top:0}
@media(max-width:720px){
.profile-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.profile-views a{min-width:0;padding:10px 8px;font-size:12px}
}

/* The ribbon now sits in the Server view rather than inside the header block, so it has to
   draw its own frame; without it the left and right edges were open. */
.profile-views+.profile-stat-ribbon{border:1px solid var(--line)}

/* Names merged into one runner. Shown so a wrong merge is visible rather than silent. */
.sj-accounts{margin:14px 0 0;color:var(--soft);font-size:11px}
.sj-accounts b{color:#c9ced9;font-family:var(--mono);font-size:11px;font-weight:500}
.sj-accounts span{color:#6d7484}

/* Profile header, tightened.
   The name, the steam id and both dates now share one row. Previously the dates sat
   on a row of their own and the pink rule plus a "PLAYER" eyebrow added two more. */
.profile-command{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:0;padding:18px 0 20px}
.profile-command h1{margin:0;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.055em}
.profile-identity .profile-avatar{width:56px;height:56px}
.profile-identity{gap:14px}
.steam-id{margin-top:5px;font-size:10px}
.profile-dates{display:flex;gap:26px;margin:0;grid-column:auto;text-align:right}
.profile-dates dt{color:var(--soft);font-size:9px;font-weight:800;letter-spacing:var(--track-micro);text-transform:uppercase}
.profile-dates dd{margin:5px 0 0;color:#d3d8e2;font-family:var(--mono);font-size:12px}

/* Source selector: one line each, with the count set apart rather than stacked. */
.profile-views{gap:2px;margin:16px 0 18px;border-radius:6px;padding:2px}
.profile-views a{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 15px;font-size:12px}
.profile-views b{border-radius:4px;padding:2px 6px;background:#1b202b;color:var(--soft);font-family:var(--mono);font-size:10px;font-weight:600}
.profile-views a.active b{background:rgba(228,118,174,.2);color:var(--pink2)}

/* One heading, in the same voice as every other section label. */
.sj-head{align-items:center;padding-bottom:9px}
.sj-head .section-label{font-size:11px}
.sj-profile .sj-summary{margin-top:15px}
.sj-summary article{padding:11px 13px}

/* Filters: the label reads as the control, the count as a quiet badge beside it. */
.sj-filters{gap:7px;margin:15px 0 12px}
.sj-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 9px 7px 14px}
.sj-chip b{border-radius:4px;padding:2px 7px;background:#1b202b;color:var(--soft);font-family:var(--mono);font-size:10px;font-weight:600}
.sj-chip.active b{background:rgba(228,118,174,.2);color:var(--pink2)}
.sj-chip:hover b{color:#c9ced9}
@media(max-width:720px){
.profile-command{flex-wrap:wrap;gap:16px}
.profile-dates{width:100%;justify-content:flex-start;text-align:left}
}
.sj-head>span{font-size:11px}

/* The count badge is state, not a hover target: the selected chip holds its colour the
   way the Server / SourceJump buttons do. Without :not(.active) the later hover rule won. */
.sj-chip:not(.active):hover b{color:#c9ced9}
.sj-chip.active:hover b{background:rgba(228,118,174,.2);color:var(--pink2)}

/* Out to the map on SourceJump, for the runs this server never saw. */
.sj-map{display:inline-flex;align-items:center;gap:8px;min-width:0}
.sj-map .map-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sj-ext{display:grid;width:20px;height:20px;flex:0 0 auto;place-items:center;border:1px solid #2b3342;border-radius:4px;color:#6d7484;transition:border-color .15s,color .15s}
.sj-ext svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sj-ext:hover{border-color:var(--pink);color:var(--pink2)}
.sj-tier em{color:#5f6675;font-family:var(--ui);font-size:10px;font-style:normal;letter-spacing:var(--track-micro);text-transform:uppercase}

/* A map this server does not run: still their record, just nothing of ours to link to. */
.map-name.is-away{color:#c2c8d4;font-weight:800;cursor:default}
.sj-rank em{color:#6d7484;font-family:var(--mono);font-size:11px;font-style:normal}

/* The hover rail is an inset shadow, and these cards had no left padding, so it printed
   over the first characters of the map name and the age column. Pull the card into the
   gutter and pad it back, which frees 12px for the rail without moving any text. */
.record-card,.run-card{margin-left:-12px;padding-left:12px}

/* The heading above them takes the same 12px, or its underline stops short of
   where the rows begin and leaves a notch in the left margin. The padding puts
   the text back, so only the rule moves. */
.data-block-head{margin-left:-12px;padding-left:12px}

/* What build is live. Quiet enough to ignore, readable when you go looking. */
.site-version{margin:44px 0 0;color:#4a5160;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-align:center}
.site-version:hover{color:var(--soft)}