/* Complete local calendar; the approved navigation, artwork and banner layout stay intact. */
.server-discovery { scroll-margin-top:20px; margin-bottom:24px; }
.server-discovery .discovery-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 290px; gap:16px; margin-bottom:12px; align-items:start; }
.discovery-column,.discovery-sidebar { min-width:0; }
.calendar-group { border:1px solid #283241; border-top-color:#665333; border-radius:8px; background:linear-gradient(125deg,#101722,#090f18); margin-bottom:13px; overflow:hidden; scroll-margin-top:20px; }
.calendar-group-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 11px 10px; }
.calendar-group-heading h3 { display:flex; align-items:center; gap:6px; color:#e7bb60; font:600 12px/1.45 var(--font); text-transform:uppercase; }
.calendar-group-heading h3>.icon { width:14px; height:14px; flex-shrink:0; }
.calendar-group-heading p { font-size:9px; color:#8e9bb0; margin-top:4px; line-height:1.5; }
.group-count { font-size:10px; font-variant-numeric:tabular-nums; color:#d5c394; border:1px solid #70603e66; background:#ba8c2111; border-radius:4px; padding:3px 6px; flex-shrink:0; }
.promotional-group { border-color:#796039; background:radial-gradient(ellipse at top left,#c48c2412,transparent),#0c121c; }
.promotional-group .calendar-group-heading h3 { color:#f6cf79; }
.discovery-list { list-style:none; padding:0 6px 6px; margin:0; display:grid; gap:5px; }
:is(.discovery-row,.discovery-example) { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid #303b4a; border-radius:5px; background:#121b28; }
.discovery-row-main { min-width:0; }
:is(.discovery-row,.discovery-example) .server-identity { gap:6px; }
:is(.discovery-row,.discovery-example) .realm-symbol { width:24px; height:26px; margin:0; border-radius:4px; border-color:#6b5335; }
:is(.discovery-row,.discovery-example) .server-name { font-size:11px; line-height:1.5; font-weight:600; color:#e6eaf2; overflow-wrap:anywhere; }
:is(.discovery-row,.discovery-example) .server-name:hover { color:#ffe1a1; }
:is(.discovery-row,.discovery-example) .server-name-content { width:auto; min-width:0; }
:is(.discovery-row,.discovery-example) .badge { font-size:8px; padding:2px 4px; }
.discovery-row-meta { margin:4px 0 0 30px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; color:#b6c3d6; line-height:1.5; }
.row-spec { font-size:10px; font-weight:500; }
.row-spec>span { color:#7c8a9c; padding-inline:3px; }
.discovery-row-meta time { font-size:9px; color:#a9b7cd; font-variant-numeric:tabular-nums; }
:is(.discovery-row,.discovery-example) .countdown { display:block; margin:3px 0 0 30px; font-size:9px; line-height:1.4; color:#9cd89e; font-variant-numeric:tabular-nums; }
:is(.discovery-row,.discovery-example) .server-actions { gap:4px; justify-content:flex-end; }
:is(.discovery-row,.discovery-example) .server-social-link { width:25px; height:27px; border-radius:4px; }
:is(.discovery-row,.discovery-example) .view-button { width:42px; height:27px; font-size:8px; }
:is(.discovery-row,.discovery-example) .server-social-link .icon { width:13px; height:13px; }
.discovery-list .row-normal { background:linear-gradient(120deg,#141e2c,#0f1723); }
.discovery-list .row-normal:hover { background:#1a2637; border-color:#53637a; }
.discovery-list .row-vip { background:linear-gradient(110deg,#705020,#86652f 40%,#5e4525 80%,#392b18); border-color:#e4bd69; box-shadow:inset 0 1px #ffdc872e,inset 0 -1px #ad7d35; }
.discovery-list .row-vip:hover { background:linear-gradient(110deg,#856029,#977538 40%,#70532a 80%,#4b371d); border-color:#ffe09b; box-shadow:0 0 12px #d9ab4535,inset 0 1px #ffe3a355; }
.discovery-list .row-hot { background:linear-gradient(110deg,#702631,#8e3038 45%,#59202d 85%,#381624); border-color:#cc514f; box-shadow:inset 0 1px #ff8e7c30,inset 0 -1px #9f333b; }
.discovery-list .row-hot:hover { background:linear-gradient(110deg,#82303a,#a63e45 45%,#722938 85%,#501e2c); border-color:#f78a7b; box-shadow:0 0 12px #d9504d38; }
.discovery-list :is(.row-vip,.row-hot) .server-name { color:#fff9e9; }
.discovery-list :is(.row-vip,.row-hot) :is(.row-spec,.discovery-row-meta time) { color:#fff1d6; }
.discovery-list :is(.row-vip,.row-hot) .row-spec>span { color:#d6c5ab; }
.discovery-list .row-plus { background:linear-gradient(120deg,#141e2c,#0f1723); border-color:#3f86e0; box-shadow:0 0 8px #3b8cff26; }
.discovery-list .row-plus:hover { background:#1a2637; border-color:#6aa9ff; box-shadow:0 0 12px #3b8cff40; }
.discovery-list .row-plus .server-name { color:#8fcbff; text-shadow:0 0 6px #3b9bffb0,0 0 14px #3b9bff55; }
.bucket-empty,.column-empty { padding:0 12px 12px; color:#94a1b6; font-size:10px; line-height:1.6; margin:0; }
.column-empty { padding:15px 12px; border:1px solid #303b4a; background:#101925; border-radius:6px; }
.calendar-group:has(.bucket-empty:not([hidden])) .discovery-list { padding:0; }
.calendar-group:has(.bucket-empty:not([hidden])) .calendar-group-heading { padding-block:9px 6px; }
.calendar-group:has(.bucket-empty:not([hidden])) .calendar-group-heading p { display:none; }
.load-more { display:block; width:calc(100% - 12px); margin:2px 6px 7px; padding:10px 7px; border:1px solid #68532f; border-radius:5px; background:#b68e2d0e; color:#dfc27d; font-size:10px; text-align:center; }
.load-more:hover { background:#b68e2d25; border-color:#c4a159; }
.discovery-source { font-size:9px; color:#8290a6; line-height:1.7; }
.discovery-sidebar { display:grid; gap:14px; }
.server-discovery .ranking-section { padding:12px 10px 8px; border-radius:8px; }
.server-discovery .ranking-section .dashboard-heading { min-height:32px; margin-bottom:6px; gap:5px; }
.server-discovery .ranking-section h2 { font-size:12px; }
.server-discovery .ranking-section h2>.icon { width:15px; height:15px; margin-right:3px; }
.server-discovery .scope-label { font-size:8px; padding:4px 5px; }
.server-discovery .ranking-list { display:block; }
.server-discovery .ranking-list li { min-height:42px; gap:6px; padding:6px 1px; }
.server-discovery .rank-number { width:20px; min-width:20px; font-size:12px; }
.server-discovery .ranking-symbol { width:20px; height:23px; }
.server-discovery .rank-server>a { font-size:10px; overflow-wrap:anywhere; white-space:normal; }
.server-discovery .vote-count { min-width:45px; padding-inline:4px; gap:4px; font-size:10px; }
.server-discovery .vote-count .icon { width:12px; }
.server-discovery .ranking-footer { min-height:32px; }
.sidebar-panel { padding:13px 12px; border:1px solid #303a49; border-top-color:#6d5731; border-radius:8px; background:linear-gradient(130deg,#111a27,#0b111b); }
.sidebar-panel>header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:13px; }
.sidebar-panel h2 { font:600 12px/1.6 var(--font); text-transform:uppercase; color:#edc46c; display:flex; align-items:center; gap:6px; }
.sidebar-panel h2>.icon { width:16px; height:16px; flex-shrink:0; }
.sidebar-panel>header>span { font-size:8px; color:#bdab82; }
.search-panel label { display:block; font-size:10px; color:#c2ccdc; margin-bottom:6px; }
.search-field { display:flex; align-items:center; gap:7px; padding:9px 8px; background:#080e18; border:1px solid #344258; border-radius:5px; }
.search-field:focus-within { border-color:#dbad50; box-shadow:0 0 0 2px #c3963729; }
.search-field>.icon { width:15px; height:15px; color:#9b885e; flex-shrink:0; }
.search-field input { width:100%; min-width:0; color:#eef0f5; border:0; background:none; outline:0; padding:0; font:400 11px/1.6 var(--font); }
.search-field input::placeholder { color:#8492a8; opacity:1; }
.search-submit { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; margin-top:8px; min-height:35px; border:1px solid #9c7838; background:linear-gradient(#3c301c,#231e17); border-radius:5px; color:#f2cd7b; font-size:10px; }
.search-submit:hover { border-color:#e9bc61; background:#47371e; }
.search-submit>.icon { width:13px; height:13px; }
#searchHelp,.tags-scope,.tags-empty { font-size:10px; line-height:1.6; color:#9caac0; margin-top:9px; }
.search-feedback { margin-top:10px; border-top:1px solid #293447; padding-top:10px; }
#searchResults { color:#dfc58d; font-size:10px; line-height:1.6; }
.search-feedback .text-button { font-size:10px; margin-top:8px; }
.tags-panel>header { margin-bottom:0; }
.tags-scope { margin-top:4px; }
.tag-group { margin-top:12px; }
.tag-group h3 { font:500 10px/1.6 var(--font); color:#a8b7cc; margin-bottom:7px; }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; }
.tag-button { display:flex; align-items:center; gap:7px; border:1px solid #3e4a5d; border-radius:4px; padding:6px 7px; background:#162131; color:#cbd5e5; font-size:10px; }
.tag-button>span { padding-left:6px; border-left:1px solid #415069; color:#a3b1c6; font-size:9px; }
.tag-button:hover,.tag-button[aria-pressed=true] { background:#72542245; border-color:#d5ac57; color:#f6d48d; }
.tag-button[aria-pressed=true]>span { color:#f6d48d; }
.page-wrap>.advertise-panel { margin-top:26px; }
.sidebar-panel h2 { scroll-margin-top:20px; }
.preview-option { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #2e3949; color:#d8dfeb; font-size:11px; cursor:pointer; }
.preview-option small { display:block; margin-top:4px; font-size:9px; line-height:1.6; color:#94a4ba; }
.preview-option input { flex-shrink:0; width:18px; height:18px; accent-color:#e7ba59; }
#previewStatus { font-size:10px; line-height:1.7; color:#c9b17f; margin-top:11px; }
.demo-badge { color:#c4dfff; border:1px solid #8cb5e077; background:#162944; padding:2px 3px; border-radius:3px; font-size:7px; letter-spacing:.2px; flex-shrink:0; }
.demo-actions { opacity:.65; cursor:default; }
.demo-actions>span { display:inline-flex; align-items:center; justify-content:center; cursor:default; }
.is-demo-group .group-count { color:#c4dcfa; background:#172842; border-color:#6387b666; font-size:8px; }
.discovery-row-meta .countdown { margin:0; }

/* The owner can compare this compact treatment with the previous row density. */
.server-discovery.is-compact .calendar-group { margin-bottom:10px; border-radius:6px; }
.server-discovery.is-compact .calendar-group-heading { padding:9px 9px 7px; }
.server-discovery.is-compact .discovery-list { gap:3px; padding:0 5px 5px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) { padding:5px 6px; gap:6px; border-radius:4px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-identity { gap:5px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .realm-symbol { width:20px; height:22px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-name { font-size:11px; line-height:1.4; }
.server-discovery.is-compact .discovery-row-meta { margin:2px 0 0 25px; gap:2px 8px; line-height:1.4; }
.server-discovery.is-compact .row-spec { font-size:9px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .countdown { margin:0; font-size:9px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-actions { display:flex; gap:4px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-social-link { width:25px; height:27px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .view-button { width:39px; height:27px; }

@media(max-width:1320px) {
  .server-discovery .discovery-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 270px; gap:12px; }
  .calendar-group-heading { padding-inline:9px; }
  .calendar-group-heading h3 { font-size:11px; }
  :is(.discovery-row,.discovery-example) { gap:6px; padding:7px 6px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:10px; }
  :is(.discovery-row,.discovery-example) .realm-symbol { width:21px; height:24px; }
  .discovery-row-meta,:is(.discovery-row,.discovery-example) .countdown { margin-left:27px; }
  :is(.discovery-row,.discovery-example) .server-actions { display:grid; grid-template-columns:25px 42px; gap:4px; }
  :is(.discovery-row,.discovery-example) .website-link { grid-column:1; grid-row:1; }
  :is(.discovery-row,.discovery-example) .discord-link { grid-column:1; grid-row:2; }
  :is(.discovery-row,.discovery-example) .view-button { grid-column:2; grid-row:1 / 3; align-self:center; }
}
@media(max-width:1180px) {
  .server-discovery .discovery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .discovery-sidebar { grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
  .calendar-group-heading h3 { font-size:12px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:11px; }
  :is(.discovery-row,.discovery-example) .server-actions { display:flex; }
}
@media(max-width:900px) {
  .discovery-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .discovery-sidebar>.ranking-section { grid-row:span 2; }
  :is(.discovery-row,.discovery-example) .server-actions { display:grid; grid-template-columns:25px 42px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:10px; }
  :is(.discovery-row,.discovery-example) .realm-symbol { width:21px; height:24px; }
}
@media(max-width:760px) {
  .server-discovery .discovery-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .calendar-group-heading h3 { font-size:12px; }
  .discovery-sidebar { grid-column:auto; grid-template-columns:minmax(0,1fr); }
  .discovery-sidebar>.ranking-section { grid-row:auto; }
  :is(.discovery-row,.discovery-example) { padding:9px 7px; gap:8px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:11px; }
  :is(.discovery-row,.discovery-example) .realm-symbol { width:24px; height:26px; }
  .discovery-row-meta,:is(.discovery-row,.discovery-example) .countdown { margin-left:30px; }
  :is(.discovery-row,.discovery-example) .server-social-link { width:31px; height:32px; }
  :is(.discovery-row,.discovery-example) .view-button { width:45px; height:32px; }
  :is(.discovery-row,.discovery-example) .server-actions { grid-template-columns:31px 45px; gap:5px; }
  .discovery-row-meta { gap:3px 8px; }
  .discovery-list { padding-inline:6px; }
  .load-more { padding:13px 8px; }
  .server-discovery .ranking-section h2 { font-size:14px; }
  .server-discovery .ranking-list li { min-height:46px; gap:8px; }
  .server-discovery .rank-server>a { font-size:11px; }
  .server-discovery .vote-count { min-width:53px; height:30px; }
  .sidebar-panel h2 { font-size:14px; }
  .search-field input { font-size:16px; }
  .search-submit { min-height:40px; font-size:11px; }
  .tag-button { padding:9px; }
}

/* VIP / HOT / PLUS as a diagonal ribbon in the top-right corner of list rows (calendar and Top 1000). */
.row-ribbon { position:absolute; top:7px; right:-24px; z-index:1; width:84px; padding:3px 0; text-align:center; transform:rotate(45deg); font:700 8px/1 var(--font); letter-spacing:.8px; text-transform:uppercase; box-shadow:0 2px 6px #0008; pointer-events:none; }
.row-ribbon--vip { background:linear-gradient(#ffe397,#e5b952); color:#352104; }
.row-ribbon--hot { background:linear-gradient(#e35951,#b82730); color:#fff2de; }
.row-ribbon--plus { background:#0f1a2b; color:#8fcbff; box-shadow:inset 0 0 0 1px #4b8fe6, 0 2px 6px #0008; }
.discovery-row { position:relative; overflow:hidden; }
.discovery-row:has(.row-ribbon) .server-actions { margin-right:30px; }
.discovery-row .server-actions { flex-wrap:nowrap; }

/* Server logo in a fixed slot just before the buttons, only in rows that have a logo. 32px stays inside the row's
   own height and the buttons keep one width, so logos line up. In the narrow multi-column calendar (761–1320px)
   there is no room for it, so the logo is hidden there and those rows look exactly as before. */
.discovery-row .row-logo { display:none; }
@media(min-width:1321px), (max-width:760px) {
  .discovery-row:has(.row-logo) { grid-template-columns:minmax(0,1fr) 32px auto; }
  .discovery-row .row-logo { display:block; width:32px; height:32px; }
  .discovery-row .row-logo img { display:block; width:100%; height:100%; object-fit:contain; border-radius:6px; filter:drop-shadow(0 2px 3px #000a); } /* shadow follows the logo shape, so transparent logos have no box */
}
@media(min-width:1321px) { .discovery-row:has(.row-logo) .server-actions { min-width:100px; } }