:root{--ink:#111827;--muted:#7b8494;--line:#e3e7ee;--green:#76d653;--orange:#f38a11;--blue:#3887f2;--red:#ff485b}*{box-sizing:border-box}body{margin:0;background:#f6f7f9;color:var(--ink);font-family:"Noto Sans KR",sans-serif}button,input,select{font:inherit}button,a{transition:.16s ease}a{text-decoration:none;color:inherit}.simple-header{height:86px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 max(24px,calc((100% - 1320px)/2))}.simple-header a{height:58px;display:flex;align-items:center}.simple-header img{display:block;width:250px;max-height:56px;object-fit:contain;object-position:left center}.center-banner{max-width:1320px;margin:28px auto 0;padding:0 24px}.center-banner img{display:block;width:100%;aspect-ratio:1912/823;height:auto;object-fit:cover;border-radius:19px;box-shadow:0 8px 28px rgba(29,41,67,.08)}.directory-page{max-width:1320px;margin:0 auto;padding:25px 24px 60px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px}.filter-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px;align-self:start;position:sticky;top:20px}.filter-title{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #111;padding-bottom:13px}.filter-title h2{font-size:20px;margin:0}.filter-title button{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer}.tag-filters{display:grid;gap:11px;padding-top:16px}.tag-filters p{color:var(--muted);font-size:12px;margin:0}.tag-filter{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}.tag-filter input{width:17px;height:17px;accent-color:#111}.tag-filter span{margin-left:auto;color:#9aa2af;font-size:11px}.server-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.server-heading h1{font-size:25px;margin:0}.server-heading>div{display:flex;align-items:center;gap:12px}.server-heading b{font-size:13px;color:var(--muted)}.server-heading select{border:1px solid #cfd5dd;background:#fff;border-radius:10px;padding:9px 32px 9px 12px}.server-list{display:grid;gap:13px}.server-card{min-height:112px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:12px 14px;display:grid;grid-template-columns:86px minmax(190px,1fr) minmax(220px,auto) 150px;align-items:center;gap:18px;box-shadow:0 3px 12px rgba(22,34,57,.04)}.server-card:hover{border-color:#bec7d4;box-shadow:0 9px 25px rgba(22,34,57,.08)}.server-logo,.detail-logo{display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#71bcff,#3977e0);color:#fff;font-size:34px;font-weight:900}.server-logo{width:80px;height:80px;border-radius:14px}.server-logo img,.detail-logo img{width:100%;height:100%;display:block;object-fit:cover}.server-info{min-width:0}.server-info h2{font-size:18px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.server-info p{font-size:12px;color:#9a6c6c;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.server-tags{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.server-tag{border:4px solid #111;border-radius:22px;padding:3px 15px;font-size:14px;font-weight:900;line-height:1.25}.server-players{text-align:center;font-weight:900;font-size:27px;white-space:nowrap}.server-actions{display:grid;gap:4px}.server-actions a,.server-actions button{height:43px;border-radius:24px;background:#fff;font-size:18px;font-weight:900;cursor:pointer}.server-actions a{border:5px solid var(--green);display:grid;place-items:center}.server-actions button{border:5px solid var(--orange);line-height:1}.server-actions a:hover{background:#efffeb}.server-actions button:hover{background:#fff7ea}.empty{background:#fff;border:1px dashed #bdc5d0;border-radius:16px;padding:55px 20px;text-align:center;color:var(--muted)}.error{color:#d93248}.detail-backdrop{position:fixed;z-index:100;inset:0;background:rgba(5,10,20,.5);padding:20px;display:grid;place-items:center}.detail-backdrop[hidden]{display:none}.detail-modal{width:min(650px,100%);min-height:320px;background:#fff;border:6px solid #111;border-radius:28px;padding:28px 38px 25px;position:relative;box-shadow:0 22px 70px rgba(0,0,0,.22)}.detail-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:33px;cursor:pointer}.detail-title{display:flex;align-items:center;gap:26px;padding-right:35px}.detail-logo{width:65px;height:65px;border-radius:12px;flex:none;font-size:27px}.detail-title h2{font-size:35px;margin:0;line-height:1.2}.detail-modal>p{font-size:28px;margin:25px 5px;line-height:1.5}.detail-tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 5px 25px}.detail-tags .server-tag{font-size:12px;border-width:3px}.detail-go{height:52px;border:6px solid var(--green);border-radius:29px;display:grid;place-items:center;font-size:22px;font-weight:900}.detail-go:hover{background:#efffeb}
.admin-main{max-width:1050px;margin:0 auto;padding:45px 24px}.admin-main+script{}body>header:not(.simple-header){height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 max(24px,calc((100% - 1050px)/2))}body>header:not(.simple-header) .brand{display:flex;width:230px}body>header:not(.simple-header) .brand img{width:100%;height:50px;object-fit:contain;object-position:left}.admin-link{margin-left:auto;border:1px solid #d5dae2;border-radius:9px;padding:9px 14px;font-size:13px;font-weight:700}.login{max-width:480px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 14px 38px rgba(22,35,64,.09)}.login h1,.dashboard-head h1{margin:5px 0}.login p{color:#667085}.login form,.fields{display:grid;gap:15px}.login label,.fields label{display:grid;gap:6px;font-weight:700;font-size:13px}.login input,.fields input{width:100%;border:1px solid #d9e0e9;border-radius:9px;padding:12px;outline:none}.login input:focus,.fields input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #e8f1ff}.login button,.primary{border:0;background:var(--red);color:#fff;padding:13px 18px;border-radius:9px;font-weight:800;cursor:pointer}.eyebrow{font-size:11px;color:var(--blue);font-weight:900;letter-spacing:.15em}.dashboard-head,.panel-title{display:flex;justify-content:space-between;align-items:center}.secondary{border:1px solid #d9e0e9;background:#fff;border-radius:8px;padding:9px 13px;cursor:pointer}.stat{display:inline-flex;align-items:baseline;gap:6px;margin:20px 0;padding:18px 24px;background:#eff5ff;border-radius:13px}.stat strong{font-size:28px;color:var(--blue)}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:23px;margin:17px 0}.panel h2{margin:0;font-size:18px}.fields{grid-template-columns:1fr 1fr;margin:20px 0}.fields .wide{grid-column:1/-1}.logo-upload{border:1px dashed #bfc7d2;border-radius:12px;padding:14px}.logo-preview{width:76px;height:76px;margin-top:10px;border-radius:12px;background:#edf1f6;display:grid;place-items:center;overflow:hidden;color:#697386}.logo-preview img{width:100%;height:100%;object-fit:cover}.message{color:#e0394d;font-size:13px}.admin-row{padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.admin-row>div:first-child{display:grid;gap:4px}.admin-row span,.admin-row small{font-size:11px;color:#7a8595}.admin-row button{border:1px solid #d8dfe9;background:#fff;border-radius:7px;padding:7px 11px;margin-left:6px;cursor:pointer}.admin-row button.danger{color:#e53b4d}
@media(max-width:980px){.server-card{grid-template-columns:75px minmax(0,1fr) 125px}.server-logo{width:70px;height:70px}.server-tags{grid-column:1/3;justify-content:flex-start}.server-players{grid-column:3;grid-row:1;font-size:19px}.server-actions{grid-column:3;grid-row:2}.server-actions a,.server-actions button{height:36px;font-size:14px;border-width:4px}}
@media(max-width:700px){.simple-header{height:74px;padding:0 16px}.simple-header img{width:205px}.center-banner{margin-top:15px;padding:0 13px}.center-banner img{border-radius:12px;object-fit:contain;background:#fff}.directory-page{display:block;padding:16px 13px 45px}.filter-panel{position:static;margin-bottom:18px}.tag-filters{display:flex;flex-wrap:wrap}.tag-filter{border:1px solid #d5dae2;border-radius:20px;padding:6px 10px}.tag-filter span{margin-left:4px}.server-card{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:12px}.server-logo{width:60px;height:60px}.server-info h2{font-size:16px}.server-tags{grid-column:1/-1}.server-players{grid-column:1/-1;grid-row:auto;font-size:18px;text-align:left}.server-actions{grid-column:1/-1;grid-row:auto;grid-template-columns:1fr 1fr}.server-heading h1{font-size:22px}.server-heading select{max-width:120px}.detail-modal{padding:25px 20px 20px;border-width:4px}.detail-title{gap:14px}.detail-title h2{font-size:24px}.detail-modal>p{font-size:18px;margin:20px 2px}.detail-go{height:46px;font-size:18px;border-width:5px}.fields{grid-template-columns:1fr}.fields .wide{grid-column:auto}.admin-main{padding:25px 14px}.admin-row{align-items:flex-start;flex-direction:column}.admin-row>div:last-child{align-self:flex-end}}

/* 서버 목록은 내용 길이와 화면 폭이 달라도 같은 흐름을 유지한다. */
.server-list{gap:12px}.server-card{min-height:104px;padding:14px 16px;grid-template-columns:74px minmax(0,1fr) 128px 130px;gap:16px}.server-logo{width:74px;height:74px;border-radius:13px}.server-info{display:grid;gap:6px}.server-info h2{font-size:17px;margin:0}.server-info p{color:#788396;margin:0}.server-tags{justify-content:flex-start;gap:6px;min-height:20px}.server-tag{border:1px solid #202938;border-radius:14px;padding:3px 9px;font-size:11px;font-weight:800}.server-players{display:grid;gap:3px;justify-items:center;text-align:center}.server-players small{font-size:11px;color:#7b8494}.server-players strong{font-size:18px}.server-actions{gap:6px}.server-actions a,.server-actions button{height:35px;border-radius:9px;font-size:13px}.server-actions a{border:1px solid var(--green);color:#327f25}.server-actions button{border:1px solid var(--orange);color:#bb6508}
@media(max-width:980px){.server-card{grid-template-columns:70px minmax(0,1fr) 112px}.server-logo{width:68px;height:68px}.server-actions{grid-column:2/-1;grid-template-columns:1fr 1fr}.server-actions a,.server-actions button{height:33px}}
@media(max-width:700px){.server-card{grid-template-columns:60px minmax(0,1fr);gap:10px;padding:12px}.server-logo{width:58px;height:58px}.server-info h2{font-size:16px}.server-info p{font-size:11px}.server-players{grid-column:1/-1;justify-items:start;text-align:left;border-top:1px solid #edf0f3;padding-top:9px}.server-players strong{font-size:16px}.server-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}}

/* 서버 상세 창 */
.server-logo img,.detail-logo img{object-fit:contain;background:#fff}.detail-backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(5px);animation:detail-backdrop-in .2s ease-out}.detail-backdrop.is-closing{animation:detail-backdrop-out .18s ease-in forwards}.detail-modal{width:min(560px,calc(100% - 32px));min-height:0;border:1px solid #dce2ea;border-radius:22px;padding:0;overflow:hidden;box-shadow:0 28px 70px rgba(15,23,42,.28);animation:detail-modal-in .28s cubic-bezier(.2,.8,.2,1)}.detail-backdrop.is-closing .detail-modal{animation:detail-modal-out .18s ease-in forwards}.detail-close{z-index:1;right:18px;top:18px;width:34px;height:34px;padding:0;border:1px solid #dbe1ea;border-radius:50%;background:#fff;color:#586477;font-size:25px;line-height:1;display:grid;place-items:center}.detail-close:hover{background:#f4f6f8;color:#111827}.detail-title{gap:15px;padding:25px 70px 23px 25px;border-bottom:1px solid #e9edf2;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%)}.detail-logo{width:62px;height:62px;border-radius:15px;box-shadow:0 6px 16px rgba(59,119,224,.22)}.detail-title>div:last-child{min-width:0}.detail-title span,.detail-description>span,.detail-stat>span{display:block;color:#7b8798;font-size:12px;font-weight:700}.detail-title h2{font-size:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 0}.detail-body{padding:22px 25px 18px;display:grid;gap:18px}.detail-stat{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:1px solid #e5e9ef;border-radius:12px;background:#f8fafc}.detail-stat strong{font-size:19px;color:#263244}.detail-description{display:grid;gap:7px}.detail-description p{margin:0;color:#374151;font-size:15px;line-height:1.65;word-break:keep-all}.detail-tags{margin:0;min-height:0}.detail-go{height:50px;margin:0 25px 25px;border:0;border-radius:12px;background:var(--green);color:#173514;font-size:16px;font-weight:900;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.detail-go:hover{background:#68c94b;transform:translateY(-2px);box-shadow:0 7px 14px rgba(96,190,72,.24)}.detail-go:active{transform:translateY(0) scale(.98);box-shadow:none}.server-actions a,.server-actions button,.admin-row button{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.server-actions a:hover,.server-actions button:hover,.admin-row button:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(25,35,55,.1)}.server-actions a:active,.server-actions button:active,.admin-row button:active{transform:translateY(0) scale(.97);box-shadow:none}@keyframes detail-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes detail-backdrop-out{from{opacity:1}to{opacity:0}}@keyframes detail-modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes detail-modal-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.985)}}
@media(max-width:700px){.detail-modal{width:min(100% - 24px,520px);border-radius:18px}.detail-title{padding:21px 58px 19px 20px}.detail-logo{width:54px;height:54px;border-radius:13px}.detail-title h2{font-size:21px}.detail-close{right:13px;top:13px}.detail-body{padding:18px 20px 15px;gap:15px}.detail-description p{font-size:14px}.detail-go{margin:0 20px 20px;height:47px}}
@media(prefers-reduced-motion:reduce){.detail-backdrop,.detail-modal,.detail-backdrop.is-closing,.detail-backdrop.is-closing .detail-modal{animation:none}.detail-close,.detail-go,.server-actions a,.server-actions button,.admin-row button{transition:none}}


/* Per-server card and detail themes. */
.server-card{background-repeat:no-repeat;background-size:cover;background-position:center}.server-card.custom-server-text,.server-card.custom-server-text .server-info h2,.server-card.custom-server-text .server-info p,.server-card.custom-server-text .server-players,.server-card.custom-server-text .server-players small,.server-card.custom-server-text .server-players strong{color:var(--server-custom-text)!important}.server-card.custom-server-text .server-tag{color:var(--server-custom-text);border-color:currentColor;background:rgba(255,255,255,.72)}.detail-modal{background-repeat:no-repeat;background-size:cover;background-position:center}.detail-modal.custom-server-text,.detail-modal.custom-server-text .detail-title h2,.detail-modal.custom-server-text .detail-title span,.detail-modal.custom-server-text .detail-description p,.detail-modal.custom-server-text .detail-description span,.detail-modal.custom-server-text .detail-stat strong,.detail-modal.custom-server-text .detail-stat span{color:var(--server-custom-text)!important}.detail-modal.custom-server-text .detail-title,.detail-modal.custom-server-text .detail-body{background:rgba(255,255,255,.74)}.wide-preview{width:100%;height:92px}.fields label span{font-size:11px;color:#7a8595;font-weight:500}

/* Custom server artwork remains visible inside the detail view. */
.detail-modal.custom-detail-background .detail-title,
.detail-modal.custom-detail-background .detail-body{background:transparent}
.detail-modal.custom-detail-background .detail-stat{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.38)}
.detail-modal.custom-detail-background .detail-title{border-bottom-color:rgba(255,255,255,.5)}
.detail-modal.custom-detail-background .detail-go{background:rgba(0,0,0,.48);border:1px solid rgba(0,0,0,.55)}
.server-card.white-server-text .server-actions a,
.server-card.white-server-text .server-actions button{color:#fff!important;background:rgba(0,0,0,.48);border-color:rgba(0,0,0,.55)}
.server-card.white-server-text .server-actions a:hover,
.server-card.white-server-text .server-actions button:hover{background:rgba(0,0,0,.67)}
.server-card.white-server-text .server-tag{color:#fff!important;border-color:#fff!important;background:rgba(0,0,0,.48)}
.detail-modal.white-server-text .server-tag{color:#fff!important;border-color:#fff!important;background:rgba(0,0,0,.48)}
.detail-modal.white-server-text .detail-go{color:#fff!important}

/* Per-server moving neon outline. */
@property --neon-rotation{syntax:"<angle>";inherits:false;initial-value:0deg}
.server-card.neon-border,.detail-modal.neon-border{position:relative;border-color:transparent;isolation:isolate;box-shadow:0 0 15px color-mix(in srgb,var(--server-neon) 74%,transparent),0 0 30px color-mix(in srgb,var(--server-neon) 34%,transparent),0 7px 20px rgba(22,34,57,.12)}
.server-card.neon-border::before,.detail-modal.neon-border::before{content:"";position:absolute;inset:-4px;padding:4px;border-radius:inherit;background:conic-gradient(from var(--neon-rotation),color-mix(in srgb,var(--server-neon) 42%,#080d18) 0deg,color-mix(in srgb,var(--server-neon) 72%,#fff) 20deg,var(--server-neon) 74deg,color-mix(in srgb,var(--server-neon) 38%,#080d18) 150deg,color-mix(in srgb,var(--server-neon) 66%,#fff) 218deg,var(--server-neon) 285deg,color-mix(in srgb,var(--server-neon) 42%,#080d18) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;filter:drop-shadow(0 0 7px var(--server-neon)) drop-shadow(0 0 15px var(--server-neon));animation:neon-border-travel 2.8s linear infinite}
.server-card.neon-border:hover,.detail-modal.neon-border:hover{box-shadow:0 0 20px color-mix(in srgb,var(--server-neon) 88%,transparent),0 0 38px color-mix(in srgb,var(--server-neon) 46%,transparent),0 9px 25px rgba(22,34,57,.15)}
@keyframes neon-border-travel{to{--neon-rotation:360deg}}
@media(prefers-reduced-motion:reduce){.server-card.neon-border::before{animation:none}}

/* Bright action traces are reserved for white-text custom cards. */
.server-card.white-server-text .server-actions a,.server-card.white-server-text .server-actions button,.detail-modal.white-server-text .detail-go,.detail-modal.white-server-text .detail-close{position:relative;isolation:isolate}
.server-card.white-server-text .server-actions a,.detail-modal.white-server-text .detail-go{--button-neon:#76ef4f}
.server-card.white-server-text .server-actions button{--button-neon:#ff9a1f}
.detail-modal.white-server-text .detail-close{--button-neon:#ff4355}
.detail-modal.white-server-text .detail-go:hover{background:rgba(18,63,14,.7)}
.detail-modal.white-server-text .detail-close:hover{background:rgba(80,9,16,.68);color:#fff}

/* Keep the close control aligned with the detail header and readable on artwork. */
.detail-modal .detail-close{top:16px;right:16px;width:40px;height:40px;font-size:22px;line-height:1;display:grid;place-items:center;text-align:center}
.detail-modal.white-server-text .detail-go,.detail-modal.white-server-text .detail-close{background:rgba(0,0,0,.52);border:1px solid rgba(0,0,0,.62);color:#fff!important}
.detail-modal.white-server-text .detail-go:hover{background:rgba(0,0,0,.72)}
.detail-modal.white-server-text .detail-close:hover{background:rgba(80,9,16,.72);color:#fff!important}
@media(max-width:700px){.detail-modal .detail-close{top:12px;right:12px;width:38px;height:38px;font-size:21px}}

/* The close button belongs to the title bar so it cannot drift outside the panel. */
.detail-title{position:relative}
.detail-title .detail-close{position:absolute!important;top:16px!important;right:16px!important;left:auto!important;margin:0;transform:none}
@media(max-width:700px){.detail-title .detail-close{top:12px!important;right:12px!important;left:auto!important}}

/* Optional transparent logo treatment per registered server. */
.server-logo.transparent-logo-background,.detail-logo.transparent-logo-background,.server-logo.transparent-logo-background img,.detail-logo.transparent-logo-background img{background:transparent!important}

/* Count updates keep the last confirmed value while polling and fade into new values. */
.server-players strong.player-count-changing{animation:player-count-swap .42s ease both}
@keyframes player-count-swap{0%{opacity:0;transform:translateY(5px)}48%{opacity:.25;transform:translateY(2px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.server-players strong.player-count-changing{animation:none}}
/* Site-wide light/dark appearance switch. */
html{background:#f6f7f9;transition:background .22s ease,color .22s ease}
.simple-header{justify-content:space-between;gap:18px;transition:background .22s ease,border-color .22s ease}
.connect-brand{min-width:0}
.simple-header .connect-brand img{width:274px;max-width:52vw;height:56px;object-fit:contain;object-position:left center}
.theme-switch{display:inline-flex;align-items:center;gap:8px;flex:none;color:#697386;font-size:12px;font-weight:800;cursor:pointer;user-select:none}
.theme-switch input{position:absolute;opacity:0;pointer-events:none}
.theme-track{width:48px;height:26px;padding:3px;border-radius:999px;background:#d8dee8;box-shadow:inset 0 1px 3px rgba(15,23,42,.15);transition:background .22s ease}
.theme-track span{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(15,23,42,.22);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.theme-switch input:checked+.theme-track{background:#4d74bb}
.theme-switch input:checked+.theme-track span{transform:translateX(22px)}
.theme-switch input:focus-visible+.theme-track{outline:3px solid #9cc7ff;outline-offset:2px}
.theme-label-dark{color:#a2abba}.theme-switch input:checked~.theme-label-dark{color:#23324c}.theme-switch input:checked~.theme-label-light{color:#a2abba}
html.dark-mode{background:#10151f;color:#eef3fb}
html.dark-mode body{background:#10151f;color:#eef3fb}
html.dark-mode .simple-header{background:#171e2a;border-color:#2d3748}
html.dark-mode .theme-switch{color:#dbe5f3}
html.dark-mode .theme-label-dark,html.dark-mode .theme-switch input:checked~.theme-label-dark{color:#fff}
html.dark-mode .theme-switch input:checked~.theme-label-light{color:#8994a8}
html.dark-mode .filter-panel,html.dark-mode .server-card,html.dark-mode .empty{background:#18212e;border-color:#303c4e;box-shadow:0 3px 12px rgba(0,0,0,.22)}
html.dark-mode .filter-title{border-color:#e4e9f0}
html.dark-mode .filter-title button,html.dark-mode .tag-filters p,html.dark-mode .server-heading b,html.dark-mode .server-players small{color:#aab5c7}
html.dark-mode .tag-filter span{color:#8995a8}
html.dark-mode .tag-filter input{accent-color:#8ee46e}
html.dark-mode .server-heading select{background:#18212e;color:#eef3fb;border-color:#3b495e}
html.dark-mode .server-info p{color:#aeb8c8}
html.dark-mode .server-card:hover{border-color:#64738d;box-shadow:0 9px 25px rgba(0,0,0,.28)}
html.dark-mode .server-card:not(.custom-server-text) .server-info h2,html.dark-mode .server-card:not(.custom-server-text) .server-players{color:#f4f7fb}
html.dark-mode .server-card:not(.custom-server-text) .server-tag{color:#e8edf6;border-color:#7e8ba0;background:#212c3c}
html.dark-mode .server-actions a,html.dark-mode .server-actions button{background:#1d2735}
html.dark-mode .server-actions a{color:#a7ef94}
html.dark-mode .server-actions button{color:#ffc06a}
html.dark-mode .detail-backdrop{background:rgba(0,0,0,.7)}
html.dark-mode .detail-modal:not(.custom-detail-background){background:#18212e;border-color:#39465b}
html.dark-mode .detail-modal:not(.custom-detail-background) .detail-title{background:linear-gradient(135deg,#1d2735,#18212e);border-color:#324055}
html.dark-mode .detail-modal:not(.custom-detail-background) .detail-title span,html.dark-mode .detail-modal:not(.custom-detail-background) .detail-description>span,html.dark-mode .detail-modal:not(.custom-detail-background) .detail-stat>span{color:#aeb9ca}
html.dark-mode .detail-modal:not(.custom-detail-background) .detail-title h2,html.dark-mode .detail-modal:not(.custom-detail-background) .detail-description p{color:#f2f5fa}
html.dark-mode .detail-modal:not(.custom-detail-background) .detail-stat{background:#202b3a;border-color:#3c4b61}
html.dark-mode .detail-modal:not(.custom-detail-background) .detail-stat strong{color:#fff}
html.dark-mode .detail-close{background:#253143;border-color:#45546b;color:#fff}
html.dark-mode .detail-close:hover{background:#324258;color:#fff}
html.dark-mode .detail-go{background:#6dcc4f;color:#12270e}
@media(max-width:700px){.simple-header .connect-brand img{width:215px;height:46px}.theme-label-light,.theme-label-dark{display:none}.theme-switch{gap:0}}
@media(prefers-reduced-motion:reduce){html,.simple-header,.theme-track,.theme-track span{transition:none}}

@media(max-width:700px){html.dark-mode .center-banner{padding-left:0;padding-right:0}html.dark-mode .center-banner img{border-radius:0}}


/* Detail panel: the panel glides in, then its newly revealed content pops in. */
.detail-modal{animation:detail-panel-arrive .34s cubic-bezier(.18,.88,.22,1) both}
.detail-backdrop.is-closing .detail-modal{animation:detail-panel-leave .22s cubic-bezier(.55,0,1,.45) both}
.detail-title{animation:detail-header-arrive .30s .03s cubic-bezier(.2,.82,.25,1) both}
.detail-body>*{animation:detail-item-pop .26s cubic-bezier(.2,.9,.28,1) both}
.detail-body .detail-stat{animation-delay:.11s}
.detail-body .detail-description{animation-delay:.17s}
.detail-body .detail-tags{animation-delay:.23s}
.detail-go{animation:detail-item-pop .28s .29s cubic-bezier(.2,.9,.28,1) both}
.detail-backdrop.is-closing .detail-title,.detail-backdrop.is-closing .detail-body>*,.detail-backdrop.is-closing .detail-go{animation:none}
@keyframes detail-panel-arrive{from{opacity:0;transform:translate3d(48px,18px,0) scale(.94)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes detail-panel-leave{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(-34px,12px,0) scale(.96)}}
@keyframes detail-header-arrive{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes detail-item-pop{from{opacity:0;transform:translateY(10px) scale(.92)}65%{opacity:1;transform:translateY(-2px) scale(1.018)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.detail-modal,.detail-backdrop.is-closing .detail-modal,.detail-title,.detail-body>*,.detail-go{animation:none!important}}


/* Detail closing choreography: identity rotates away, remaining content pops out. */
.detail-backdrop.is-closing .detail-title{animation:detail-header-leave .22s cubic-bezier(.55,0,1,.45) both!important;transform-origin:left center}
.detail-backdrop.is-closing .detail-body>*{animation:detail-item-pop-out .18s cubic-bezier(.55,0,1,.45) both!important}
.detail-backdrop.is-closing .detail-body .detail-stat{animation-delay:.02s!important}
.detail-backdrop.is-closing .detail-body .detail-description{animation-delay:.06s!important}
.detail-backdrop.is-closing .detail-body .detail-tags{animation-delay:.10s!important}
.detail-backdrop.is-closing .detail-go{animation:detail-item-pop-out .18s .14s cubic-bezier(.55,0,1,.45) both!important}
@keyframes detail-header-leave{from{opacity:1;transform:rotate(0) translateX(0)}to{opacity:0;transform:rotate(-10deg) translateX(-26px)}}
@keyframes detail-item-pop-out{from{opacity:1;transform:translateY(0) scale(1)}35%{opacity:1;transform:translateY(-2px) scale(1.035)}to{opacity:0;transform:translateY(10px) scale(.78)}}
@media(prefers-reduced-motion:reduce){.detail-backdrop.is-closing .detail-title,.detail-backdrop.is-closing .detail-body>*,.detail-backdrop.is-closing .detail-go{animation:none!important}}


/* The dark banner uses its own artwork ratio and never leaves white gutters. */
html.dark-mode .center-banner img{aspect-ratio:1983/793;height:auto;object-fit:cover;background:#050609}
@media(max-width:700px){html.dark-mode .center-banner{margin-top:0}html.dark-mode .center-banner img{display:block;width:100%;max-width:none;min-height:0;object-fit:cover;background:#050609}}


/* Player history stays inside the server detail panel. */
.detail-modal{max-height:calc(100dvh - 40px);overflow-y:auto}
.detail-graph-button{border:1px solid #b6c6da;border-radius:12px;padding:11px 16px;background:#edf4ff;color:#245fb0;font-weight:800;cursor:pointer;width:100%;transition:background .18s,transform .18s}
.detail-graph-button:hover{background:#dceaff}.detail-graph-button:active{transform:scale(.98)}
.detail-graph{border:1px solid #d5deeb;border-radius:14px;background:#fff;padding:15px;animation:detail-item-pop .25s ease;color:#172235}.detail-graph[hidden]{display:none}
.graph-heading{display:flex;justify-content:space-between;align-items:center;font-size:14px}.graph-heading span,.graph-note{font-size:11px;color:#718096}
#graph-status{font-size:12px;margin:12px 0 0;min-height:18px}#player-graph{display:block;width:100%;height:auto;overflow:visible;margin-top:10px}
.graph-grid{stroke:#e1e7ef;stroke-width:1}.graph-label{fill:#718096;font-size:11px}.graph-line{fill:none;stroke:#3887f2;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.graph-point{fill:#3887f2}.graph-note{margin:8px 0 0;line-height:1.6}
html.dark-mode .detail-graph{background:#172232;border-color:#3c4b61;color:#f2f5fa}html.dark-mode .graph-grid{stroke:#354257}html.dark-mode .graph-label{fill:#b1bfd1}html.dark-mode .graph-note,html.dark-mode .graph-heading span{color:#b1bfd1}html.dark-mode .detail-graph-button{background:#253b58;color:#c5deff;border-color:#486080}
.detail-modal.white-server-text .detail-graph-button{background:rgba(0,0,0,.52);color:#fff;border-color:rgba(255,255,255,.7)}
@media(max-width:700px){.detail-graph{padding:12px}.detail-modal{max-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){.detail-graph{animation:none}}
/* A stationary SVG path carries the moving light around the actual perimeter. */
.button-neon-outline{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:2;filter:drop-shadow(0 0 4px var(--button-neon)) drop-shadow(0 0 9px var(--button-neon))}
.button-neon-outline rect{stroke:var(--button-neon);vector-effect:non-scaling-stroke}
@media(prefers-reduced-motion:reduce){.button-neon-outline{transition:none}}

/* Let details grow with their content; scroll the overlay on small screens. */
.detail-backdrop{overflow-y:auto;align-items:safe center}
.detail-modal{max-height:none;overflow:hidden;flex-shrink:0}

/* White text uses readable artwork overlays and matching graph strokes. */
.detail-modal.white-server-text .detail-graph-button{position:relative;isolation:isolate;--button-neon:#4b9dff}
.detail-modal.white-server-text .detail-graph{background:rgba(0,0,0,.52);border-color:rgba(255,255,255,.5);color:#fff}
.detail-modal.white-server-text .graph-line{stroke:#fff}
.detail-modal.white-server-text .graph-point{fill:#fff}
.detail-modal.white-server-text .graph-grid{stroke:rgba(255,255,255,.2)}
.detail-modal.white-server-text .graph-label{fill:#fff}
.detail-modal.white-server-text .graph-note,.detail-modal.white-server-text .graph-heading span{color:rgba(255,255,255,.8)}

/* The detail outline now shares the same traveling light as its buttons. */
.detail-modal.neon-border::before{display:none}
.detail-modal.neon-border{box-shadow:0 22px 70px rgba(0,0,0,.3);--button-neon:var(--server-neon)}
.detail-modal>.button-neon-outline{inset:0;width:100%;height:100%;z-index:3;filter:drop-shadow(0 0 3px var(--button-neon)) drop-shadow(0 0 7px var(--button-neon))}
.detail-modal:not(.neon-border)>.button-neon-outline{display:none}
.button-neon-outline{filter:drop-shadow(0 0 3px var(--button-neon)) drop-shadow(0 0 8px var(--button-neon));transition:none}

/* Two opposing lights share one continuous orbit on every neon outline. */
.server-card.neon-border::before,.detail-modal.neon-border::before,
.server-card.white-server-text .server-actions a::before,
.server-card.white-server-text .server-actions button::before,
.detail-modal.white-server-text .detail-go::before,
.detail-modal.white-server-text .detail-close::before,
.detail-modal.white-server-text .detail-graph-button::before{
 content:"";display:block;position:absolute;inset:-2px;padding:4px;border-radius:inherit;
 background:conic-gradient(from var(--neon-rotation),color-mix(in srgb,var(--trace-color) 24%,transparent) 0deg,color-mix(in srgb,var(--trace-color) 46%,transparent) 35deg,var(--trace-color) 75deg,color-mix(in srgb,var(--trace-color) 65%,white) 88deg,color-mix(in srgb,var(--trace-color) 24%,transparent) 105deg,color-mix(in srgb,var(--trace-color) 24%,transparent) 180deg,color-mix(in srgb,var(--trace-color) 46%,transparent) 215deg,var(--trace-color) 255deg,color-mix(in srgb,var(--trace-color) 65%,white) 268deg,color-mix(in srgb,var(--trace-color) 24%,transparent) 285deg,color-mix(in srgb,var(--trace-color) 24%,transparent) 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 pointer-events:none;z-index:3;filter:drop-shadow(0 0 5px var(--trace-color));animation:neon-border-travel 2.8s linear infinite;transition:opacity .22s ease;opacity:0;
}
.server-card.neon-border,.detail-modal.neon-border{--trace-color:var(--server-neon)}
.server-card.neon-border::before{inset:-4px;opacity:1}
.detail-modal.neon-border::before{inset:0;opacity:1}
.server-card.white-server-text .server-actions a,.server-card.white-server-text .server-actions button,
.detail-modal.white-server-text .detail-go,.detail-modal.white-server-text .detail-close,.detail-modal.white-server-text .detail-graph-button{--trace-color:var(--button-neon)}
.server-card.white-server-text .server-actions a:hover::before,.server-card.white-server-text .server-actions a:focus-visible::before,
.server-card.white-server-text .server-actions button:hover::before,.server-card.white-server-text .server-actions button:focus-visible::before,
.detail-modal.white-server-text .detail-go:hover::before,.detail-modal.white-server-text .detail-go:focus-visible::before,
.detail-modal.white-server-text .detail-close:hover::before,.detail-modal.white-server-text .detail-close:focus-visible::before,
.detail-modal.white-server-text .detail-graph-button:hover::before,.detail-modal.white-server-text .detail-graph-button:focus-visible::before{opacity:1}

.server-maintenance-notice{display:flex;flex-direction:column;align-items:center;width:max-content;gap:4px;margin-top:8px;font-weight:800;font-size:14px;color:inherit}
.server-maintenance-notice img{display:block;width:58px;height:50px;object-fit:contain;flex-shrink:0}
.maintenance-switch input{width:22px;height:22px;accent-color:#f59e0b;cursor:pointer}
@media(max-width:700px){.server-maintenance-notice img{width:49px;height:42px}}

.directory-page[hidden],.site-maintenance-notice[hidden]{display:none!important}
.site-maintenance-notice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:48px 20px 64px;min-height:340px;text-align:center}
.site-maintenance-notice img{display:block;width:280px;max-width:70vw;height:auto;object-fit:contain}
.site-maintenance-notice h1{font-size:32px;margin:0;font-weight:900;color:inherit}
.global-maintenance-control label{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:18px;font-weight:800}
.global-maintenance-control label span{width:100%;font-size:13px;font-weight:400;color:#718096}
.global-maintenance-control input{width:24px;height:24px;accent-color:#f59e0b;cursor:pointer}
#maintenance-message{font-size:13px;min-height:18px;margin-bottom:0}

.server-name-row{display:flex;align-items:center;gap:10px}.server-name-row h2{min-width:0;flex:1}
.server-event-name{font:inherit;line-height:inherit;text-align:left;border:0;padding:0;background:none;cursor:pointer;animation:server-event-rainbow 4s linear infinite}
@keyframes server-event-rainbow{0%,100%{color:#ff4b66}16%{color:#ff983c}33%{color:#d7b719}50%{color:#36bd70}66%{color:#3c9df4}83%{color:#b46bff}}
.detail-event{border:1px solid #d7bd6a;border-radius:14px;padding:16px;background:#fff8e3;color:#574018}
.detail-event[hidden]{display:none}.detail-event h3{font-size:15px;margin:0 0 10px}.detail-event p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;margin:0;font-size:14px}
.detail-modal.white-server-text .detail-event{background:rgba(0,0,0,.52);border-color:rgba(255,255,255,.5);color:#fff}
html.dark-mode .detail-event{background:#302917;color:#f6dfa4;border-color:#67562e}
.fields textarea{width:100%;box-sizing:border-box;border:1px solid #dce2ea;border-radius:10px;padding:12px;font:inherit;resize:vertical}
@media(max-width:700px){.server-heading{flex-wrap:wrap;gap:12px}.server-heading>div{flex-wrap:wrap;gap:8px}}