.wn-server-section{margin:26px 0 18px}
.wn-section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px}
.wn-section-heading h2{margin:0;font:800 28px/1.2 RustOnlineHeading,'Arial Black',Arial,sans-serif;text-transform:uppercase}
.wn-section-heading>span{font-size:13px;color:#b8c3ca}
.wn-cards{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:18px}
.wn-cards>.wn-server-card{flex:0 0 calc((100% - 36px)/3)}
.wn-server-card.wh-panel{position:relative;display:flex;flex-direction:column;margin:0;overflow:hidden;min-width:0;background:linear-gradient(135deg,#11171a,#090d10);border-color:var(--wh-accent)}
.wn-server-card.is-selected{box-shadow:0 0 0 1px var(--wh-accent)}
.wn-selected-label{position:absolute;z-index:3;pointer-events:none;right:12px;top:12px;padding:5px 8px;background:var(--wh-accent);color:var(--wh-accent-text);font-size:10px;font-weight:800;text-transform:uppercase;border-radius:3px}
.wn-card-choice{display:block;flex:none;width:100%;text-decoration:none;color:inherit}.wn-card-choice:focus-visible{outline-offset:-4px!important}.wn-card-copy h3 a{color:inherit;text-decoration:none}.wn-server-card[data-wn-selectable]{cursor:pointer}
.wn-card-art{display:block;overflow:hidden;aspect-ratio:16/9;width:100%;flex:none}
.wn-card-art img{width:100%;height:100%;object-fit:cover;object-position:var(--wn-x,50%) var(--wn-y,50%);display:block}
.wn-card-copy{display:flex;flex-direction:column;flex:1;padding:18px;min-width:0}
.wn-card-copy h3{font:800 22px/1.25 RustOnlineHeading,'Arial Black',Arial,sans-serif;text-transform:uppercase;overflow-wrap:anywhere;min-height:2.5em;margin:0 0 12px}
.wn-status{display:flex;align-items:center;gap:8px;font-size:12px;color:#dce3e5;margin:0;line-height:1.4}
.wn-status i{display:inline-block;flex:none;border-radius:50%;width:8px;height:8px;background:#9fabb4}
.wn-status[data-state=online] i{background:#56d635;box-shadow:0 0 10px #56d63525}
.wn-status[data-state=offline] i{background:#f04e48}
.wn-card-primary{margin:16px 0 12px;padding-top:0;display:flex;align-items:end;flex:1}
.wn-card-primary .wh-button{width:100%;min-height:42px;box-sizing:border-box;font-size:12px;font-family:inherit;cursor:pointer;text-align:center}
.wn-card-primary img{width:23px;height:23px;object-fit:contain}
.wn-card-primary button:disabled,.wn-card-primary [aria-disabled=true]{background:#252b2d;color:#9a9fa2;border-color:#454b4e;box-shadow:none;cursor:default}
[data-wn-join][aria-disabled=true]{opacity:.65;pointer-events:none}
.wn-card-links{display:flex;align-items:stretch;gap:8px;min-height:55px;box-sizing:border-box;border-top:1px solid #ffffff14;padding-top:12px}
.wn-card-links :is(a,button){display:inline-flex;flex:1 1 auto;min-width:0;align-items:center;justify-content:center;gap:5px;min-height:42px;font-family:inherit;font-size:11px;font-weight:800;line-height:1.3;color:#edf3f7;white-space:nowrap;text-decoration:none;background:linear-gradient(145deg,#22313b,#141f27);border:1px solid #3b4b57;border-radius:5px;padding:9px 6px;box-shadow:inset 0 1px 0 #ffffff09,0 2px 5px #0002;cursor:pointer}
.wn-card-links img{width:18px;height:18px;object-fit:contain;flex:none;filter:none}
@media(hover:hover) and (pointer:fine){
 .wn-card-links :is(a,button):not(:disabled):not([aria-disabled=true]):hover{color:#fff;border-color:var(--wh-accent);background:linear-gradient(145deg,color-mix(in srgb,var(--wh-accent) 16%,#22313b),#17232b);box-shadow:inset 0 1px 0 #ffffff12,0 4px 12px #0004,0 0 14px color-mix(in srgb,var(--wh-accent) 12%,transparent)}
}
@media(prefers-reduced-motion:no-preference){
 .wn-card-links :is(a,button){transition:background-color .18s,border-color .18s,box-shadow .18s,filter .18s}
 .wn-card-links img{transition:transform .18s}
 @media(hover:hover) and (pointer:fine){.wn-card-links :is(a,button):not(:disabled):not([aria-disabled=true]):hover img{transform:translateY(-2px) scale(1.08)}}
}
.wn-card-links button:disabled{opacity:.55;cursor:default}
.wn-server-card :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:3px}
.wn-account{display:flex;align-items:center;gap:8px;max-width:160px;font-size:12px;font-weight:700}
.wn-account>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wn-account>img{filter:brightness(0) invert(1);flex:none}
.wn-empty{padding:20px;color:#c9d2d7;font-size:14px}

.wn-muted{font-size:13px;color:#a6b7c1}.wn-pagination{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font-size:13px}.wn-pagination a{color:var(--wh-accent)}
#server-rules,#spin-player,#ws-inventory,#voters{scroll-margin-top:20px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.wn-card-art img{transition:transform .45s ease}.wn-server-card:hover .wn-card-art img{transform:scale(1.035)}}
@media(max-width:950px){.wn-cards>.wn-server-card{flex-basis:calc((100% - 18px)/2)}.wn-card-copy{padding:15px}.wn-card-copy h3{font-size:20px}.wn-card-links{column-gap:8px}}
@media(max-width:650px){.wn-cards>.wn-server-card{flex-basis:100%}.wn-card-copy{padding:18px}.wn-card-copy h3{font-size:22px}.wn-card-art img{object-position:var(--wn-mobile-x,50%) var(--wn-mobile-y,50%)}.wn-section-heading{align-items:flex-start;flex-direction:column;gap:7px}.wn-section-heading h2{font-size:25px}.wn-account{max-width:125px}}

.wn-card-primary .wh-primary img.wn-native-icon{filter:none}

/* Home and page selectors share one compact, centred section header. */
.wn-server-section .wn-section-heading{justify-content:center;align-items:center;flex-direction:row;gap:12px;margin-bottom:18px;padding:14px 18px;border:1px solid #34434c;border-top-color:color-mix(in srgb,var(--wh-accent) 55%,#34434c);border-radius:8px;background:linear-gradient(120deg,#142027,#0d1418);text-align:center}
.wn-server-section .wn-section-heading h2{font-size:23px;line-height:1.2}
.wn-server-section .wn-section-heading>img{width:28px;height:28px;object-fit:contain;flex:none}
#wn-servers-title{scroll-margin-top:24px}
.wn-vote-limit,.wh-site .spin-player .reward-vote-availability{display:flex;align-items:center;justify-content:center;gap:13px;box-sizing:border-box;width:max-content;max-width:100%;margin:24px auto!important;padding:15px 24px;border:1px solid color-mix(in srgb,var(--wh-accent) 42%,#34434c);border-radius:8px;background:linear-gradient(120deg,#15232b,#10191f);color:#edf3f6;font:600 14px/1.65 Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;text-align:center;box-shadow:inset 0 1px 0 #ffffff06}
.wn-vote-limit::before,.wh-site .spin-player .reward-vote-availability::before{content:'';display:block;flex:none;width:28px;height:28px;background:url('../dashboard/assets/icons/clock.png') center/contain no-repeat}
@media(max-width:650px){.wn-server-section .wn-section-heading{gap:10px;padding:13px 14px}.wn-server-section .wn-section-heading h2{font-size:20px}.wn-server-section .wn-section-heading>img{width:24px;height:24px}.wn-vote-limit,.wh-site .spin-player .reward-vote-availability{gap:10px;padding:13px 14px;font-size:12px;margin:20px auto!important}.wn-vote-limit::before,.wh-site .spin-player .reward-vote-availability::before{width:24px;height:24px}}
@media(hover:hover) and (pointer:fine){.wn-card-copy h3 a:hover{color:var(--wh-accent)}}