/* Home layout (feature: layout1). Admin › Website › Features › Home layout decides per block: shown on phones (up to 640 px)
   and/or on bigger screens, the order (home-layout.js moves the boxes), and a compact look on phones.
   seo.php puts the classes on <html> before the first paint: hl-p-<block>-on|off (phone), hl-d-<block>-on|off (bigger),
   hl-c-<block>-<look> (compact on phone). Blocks: pn = Play now button (big), pnh = Play now button in the header,
   fw = Following box, wk = This week awards, es = Empty servers list, ap = Get the app buttons. Without the classes nothing changes. */
@media (max-width: 640px) {
  html.hl-p-pn-off .pn-wrap, html.hl-p-pnh-off .pn-sm, html.hl-p-fw-off #fw-home, html.hl-p-wk-off #wk-home,
  html.hl-p-es-off #empty-servers-section, html.hl-p-ap-off .app-promo-pills, html.hl-p-ap-off #android-app-banner { display: none !important; }
  html.hl-p-pnh-on .pn-sm:not([hidden]) { display: flex; }
  html.hl-p-pnh-on .pn-sm .pn-txt small { max-width: 130px; }
}
@media (min-width: 641px) {
  html.hl-d-pn-off .pn-wrap, html.hl-d-pnh-off .pn-sm, html.hl-d-fw-off #fw-home, html.hl-d-wk-off #wk-home,
  html.hl-d-es-off #empty-servers-section, html.hl-d-ap-off .app-promo-pills, html.hl-d-ap-off #android-app-banner { display: none !important; }
  html.hl-d-pn-on .pn-wrap:not([hidden]) { display: block; }
  html.hl-d-pnh-on .pn-sm:not([hidden]) { display: flex; }
}
/* blocks placed under the server cards keep some air */
#tab-servers > #empty-servers-section ~ .pn-wrap, #tab-servers > #empty-servers-section ~ .wk-box, #tab-servers > #empty-servers-section ~ .fw-box { margin-top: 22px; }

/* compact on phone: tap-to-open header (This week awards, Following box) */
.hl-fold-h { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hl-tog { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; margin: -4px -6px -4px 4px; padding: 0; border: 1px solid rgba(232, 185, 35, .45); border-radius: 50%;
  background: rgba(11, 15, 10, .8); color: #e8b923; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s; }
.hl-open .hl-tog { transform: rotate(90deg); }
.hl-tog:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hl-fold-h > .hl-right { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.wk-h.hl-fold-h, .fw-h.hl-fold-h { flex-wrap: nowrap; align-items: center; margin-bottom: 0; padding-bottom: 0; }
.wk-h.hl-fold-h > span, .fw-h.hl-fold-h > span { white-space: nowrap; }
.hl-fold-body[hidden] { display: none; }
.hl-open .hl-fold-body { margin-top: 6px; }
.fw-box.hl-folded, .wk-box.hl-folded { padding-top: 10px; padding-bottom: 10px; }
.fw-h .hl-find { color: #e8b923; font-weight: 700; text-decoration: none; }
.fw-h .hl-online { color: #3ddc6a; }
@media (prefers-reduced-motion: reduce) { .hl-tog { transition: none; } }

/* compact on phone: This week awards as one swipeable row */
@media (max-width: 640px) {
  html.hl-c-wk-swipe #wk-home { padding: 10px 12px 6px; }
  html.hl-c-wk-swipe #wk-home .wk-h { margin-bottom: 4px; }
  html.hl-c-wk-swipe #wk-home .wk-list { display: flex; align-items: stretch; gap: 8px; margin: 0 -12px; padding: 2px 12px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none; }
  html.hl-c-wk-swipe #wk-home .wk-list::-webkit-scrollbar { display: none; }
  html.hl-c-wk-swipe #wk-home .wk-aw, html.hl-c-wk-swipe #wk-home .wk-facc { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; padding: 8px 10px; border: 1px solid #2c3827; border-radius: 12px; background: rgba(11, 15, 10, .72); }
  html.hl-c-wk-swipe #wk-home .wk-aw { gap: 10px; }
  html.hl-c-wk-swipe #wk-home .wk-ico { width: 34px; height: 34px; font-size: 17px; }
  html.hl-c-wk-swipe #wk-home .wk-who { font-size: 18px; }
  html.hl-c-wk-swipe #wk-home .wk-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.hl-c-wk-swipe #wk-home .wk-fac { padding-top: 0; border-top: 0; }
  html.hl-c-wk-swipe #wk-home .wk-split b { font-size: 17px; }
  html.hl-c-wk-swipe #wk-home .wk-em { width: 26px; height: 26px; }
  html.hl-c-wk-swipe #wk-home .pn-bar { height: 8px; margin: 5px 0 0; }
  html.hl-c-wk-swipe #wk-home .wk-note { display: none; } /* the same shares are in the bar's label and on stats.html */
  html.hl-c-wk-swipe #wk-home .wk-h > span::after { content: " · swipe ›"; color: #e8b923; }
  html.hl-c-wk-swipe #wk-home .wk-more { margin-top: 0; font-size: 13.5px; }
}

/* feat-a: Map of the day box (block md); reuses the This week box look (wk-box, wk-split, pn-bar) */
/* feat-hometools: now a More tools panel (#md-panel, hidden until its menu button opens it); Hide = panel and button gone */
@media (max-width: 640px) { html.hl-p-md-off #md-home, html.hl-p-md-off #md-panel, html.hl-p-md-off #toggle-mapday-panel { display: none !important; } }
@media (min-width: 641px) { html.hl-d-md-off #md-home, html.hl-d-md-off #md-panel, html.hl-d-md-off #toggle-mapday-panel { display: none !important; } }
.hl-tool-panel { margin: 14px 0; }
.hl-tool-panel[hidden], .server-tools-menu-item[data-hl-tool][hidden] { display: none; }
.hl-tool-panel > .wk-box { margin: 0; }
#tab-servers > #empty-servers-section ~ .md-box { margin-top: 22px; }
.md-box .md-map { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 2px 0 4px; }
.md-box .md-map a { color: #f2f4ee; font-size: 20px; font-weight: 800; text-decoration: none; }
.md-box .md-map small { color: var(--pn-muted, #9aa59a); font-size: 12px; font-weight: 600; }
.md-box .hl-right .md-name { overflow: hidden; max-width: 46vw; text-overflow: ellipsis; color: #f2f4ee; }
.md-box.hl-folded { padding-top: 10px; padding-bottom: 10px; }
.md-box .wk-h.hl-fold-h { flex-wrap: nowrap; align-items: center; margin-bottom: 0; }

/* feat-quick: New & returning players box (block nr, assets/new-players.js); same wk-box look as Map of the day */
@media (max-width: 640px) { html.hl-p-nr-off #nr-home, html.hl-p-nr-off #nr-panel, html.hl-p-nr-off #toggle-newret-panel { display: none !important; } }
@media (min-width: 641px) { html.hl-d-nr-off #nr-home, html.hl-d-nr-off #nr-panel, html.hl-d-nr-off #toggle-newret-panel { display: none !important; } }
#tab-servers > #empty-servers-section ~ .nr-box { margin-top: 22px; }
.nr-box .nr-line { margin: 2px 0 6px; color: #f2f4ee; font-size: 15px; line-height: 1.45; }
.nr-box .nr-line b { color: #e8b923; font-size: 19px; }
.nr-box .nr-names { margin: 0 0 4px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.nr-box .nr-names small { color: var(--pn-muted, #9aa59a); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; margin-right: 4px; }
.nr-box .hl-right .md-name { overflow: hidden; max-width: 46vw; text-overflow: ellipsis; white-space: nowrap; color: #f2f4ee; }
.nr-box.hl-folded { padding-top: 10px; padding-bottom: 10px; }
.nr-box .wk-h.hl-fold-h { flex-wrap: nowrap; align-items: center; margin-bottom: 0; }

/* feat-d: the More tools panels (qv = Favorites quick view, np = Now playing, hm = Activity heatmap). Hidden = the panel and
   its More tools button are gone (Favorites and now playing share one button: it goes when both are hidden). */
@media (max-width: 640px) {
  html.hl-p-qv-off #favorite-quickview, html.hl-p-np-off #battlefield-quickview > .now-playing-panel, html.hl-p-hm-off #server-heatmap-panel, html.hl-p-hm-off #toggle-server-heatmap,
  html.hl-p-qv-off.hl-p-np-off #battlefield-quickview, html.hl-p-qv-off.hl-p-np-off #toggle-quickview-panel { display: none !important; }
  html.hl-p-qv-off #battlefield-quickview, html.hl-p-np-off #battlefield-quickview { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) {
  html.hl-d-qv-off #favorite-quickview, html.hl-d-np-off #battlefield-quickview > .now-playing-panel, html.hl-d-hm-off #server-heatmap-panel, html.hl-d-hm-off #toggle-server-heatmap,
  html.hl-d-qv-off.hl-d-np-off #battlefield-quickview, html.hl-d-qv-off.hl-d-np-off #toggle-quickview-panel { display: none !important; }
  html.hl-d-qv-off #battlefield-quickview, html.hl-d-np-off #battlefield-quickview { grid-template-columns: minmax(0, 1fr); }
}

/* feat-events: Community events box (block ev, assets/events.js); same wk-box look as Map of the day */
@media (max-width: 640px) { html.hl-p-ev-off #ev-home { display: none !important; } }
@media (min-width: 641px) { html.hl-d-ev-off #ev-home { display: none !important; } }
#tab-servers > #empty-servers-section ~ .ev-box { margin-top: 22px; }
.ev-box .ev-home-list { display: grid; gap: 8px; margin: 2px 0 6px; padding: 0; list-style: none; }
.ev-box .ev-home-list li { display: grid; gap: 2px; min-width: 0; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ev-box .ev-home-list li:last-child { border-bottom: 0; }
.ev-box .ev-home-list b { color: #f2f4ee; font-size: 16px; overflow-wrap: anywhere; }
.ev-box .ev-home-list small { color: var(--pn-muted, #9aa59a); font-size: 12.5px; overflow-wrap: anywhere; }
.ev-box .ev-cd { justify-self: start; padding: 1px 8px; border-radius: 999px; background: rgba(232, 185, 35, .14); color: #e8b923; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ev-box .ev-cd.ev-live { background: rgba(70, 200, 110, .16); color: #6fdc8c; }
.ev-box .ev-cal { justify-self: start; display: inline-flex; align-items: center; min-height: 34px; margin-top: 2px; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; color: #f2f4ee; font-size: 13px; font-weight: 700; text-decoration: none; }
.ev-box .hl-right .md-name { overflow: hidden; max-width: 46vw; text-overflow: ellipsis; white-space: nowrap; color: #f2f4ee; }
.ev-box.hl-folded { padding-top: 10px; padding-bottom: 10px; }
.ev-box .wk-h.hl-fold-h { flex-wrap: nowrap; align-items: center; margin-bottom: 0; }