/* SOF2 Maps — uses SOF2 Stats Hub's colours when it's active, with the same values as fallbacks. */
.sof2m {
  --m-bg2: var(--sof2s-bg2, #10171c);
  --m-panel: var(--sof2s-panel, #151d22);
  --m-panel2: var(--sof2s-panel2, #192329);
  --m-line: var(--sof2s-line, #2a363a);
  --m-gold: var(--sof2s-gold, #d3a45d);
  --m-gold2: var(--sof2s-gold2, #f2ce8d);
  --m-text: var(--sof2s-text, #eef0ed);
  --m-muted: var(--sof2s-muted, #a8b3b2);
  --m-dim: var(--sof2s-dim, #758380);
  --m-green: var(--sof2s-green, #83c690);
  --m-radius: var(--sof2s-radius, 13px);
  color: var(--m-text);
}
.sof2m a { color: var(--m-gold2); text-decoration: none; }
.sof2m a:hover { text-decoration: underline; }
.sof2m .sof2s-btn, .sof2m .sof2s-btn:hover { text-decoration: none; }
.sof2m code { background: var(--m-bg2); border: 1px solid var(--m-line); border-radius: 5px; padding: 1px 6px; font-size: .82em; color: var(--m-muted); }
.sof2m-h { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--m-gold2); }
.sof2m-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 0 0 rgba(131, 198, 144, .6); animation: sof2m-pulse 1.8s infinite; }
@keyframes sof2m-pulse { 70% { box-shadow: 0 0 0 9px rgba(131, 198, 144, 0); } 100% { box-shadow: 0 0 0 0 rgba(131, 198, 144, 0); } }
@media (prefers-reduced-motion: reduce) { .sof2m-dot { animation: none; } }

/* Header numbers */
.sof2m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 18px; }
.sof2m-stat { padding: 13px 15px; border: 1px solid var(--m-line); border-radius: 10px; background: linear-gradient(180deg, var(--m-panel2), var(--m-panel)); min-width: 0; }
.sof2m-stat strong { display: block; font-size: 1.45rem; font-weight: 900; line-height: 1.1; color: var(--m-gold2); font-variant-numeric: tabular-nums; }
.sof2m .sof2m-stat small { display: block; margin-top: 4px; color: var(--m-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sof2m-stat.is-live strong { color: var(--m-green); }

/* Being played now */
.sof2m-live { margin: 0 0 20px; }
.sof2m-live-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.sof2m-live-item { position: relative; overflow: hidden; padding: 14px 15px; border: 1px solid #3c5a43; border-radius: 11px; background: linear-gradient(90deg, rgba(14, 20, 24, .97) 35%, rgba(14, 20, 24, .7)), var(--sof2m-img, none) center/cover, var(--m-panel); }
.sof2m-live-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sof2m-live-map { font-weight: 800; font-size: 1.02rem; }
.sof2m-live-where { font-size: .88rem; margin-bottom: 10px; }
.sof2m .sof2m-live-where small { color: var(--m-muted); }
.sof2m-live-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Toolbar */
.sof2m-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; padding: 12px; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: var(--m-panel); }
.sof2m-toolbar label { margin: 0; }
.sof2m-search { flex: 1 1 260px; }
.sof2m .sof2m-toolbar input[type="search"], .sof2m .sof2m-toolbar select { width: 100%; box-sizing: border-box; min-height: 40px; background: #10171a; border: 1px solid #495550; color: var(--m-text); border-radius: 7px; padding: 8px 12px; font: inherit; font-size: .95rem; }
.sof2m .sof2m-toolbar select { width: auto; }
.sof2m .sof2m-toolbar .sof2m-server-filter select { max-width: 260px; }
.sof2m .sof2m-toolbar input:focus, .sof2m .sof2m-toolbar select:focus { outline: none; border-color: var(--m-gold); box-shadow: 0 0 0 3px rgba(211, 164, 93, .18); }
.sof2m .sof2m-toolbar .sof2s-btn { min-height: 40px; }
.sof2m-letters { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 16px; }
.sof2m-letters a, .sof2m-letters span { min-width: 28px; padding: 4px 6px; border-radius: 6px; text-align: center; font-size: .8rem; font-weight: 800; }
.sof2m-letters a { background: var(--m-panel); border: 1px solid var(--m-line); }
.sof2m-letters a.is-current { background: var(--m-gold); border-color: var(--m-gold); color: #141410; }
.sof2m-letters span { color: var(--m-dim); opacity: .45; border: 1px solid transparent; }
.sof2m-count { color: var(--m-muted); margin: 0 0 12px; }

/* Cards */
.sof2m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 18px; }
.sof2m-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: var(--m-panel); transition: border-color .15s, transform .15s; min-width: 0; }
.sof2m-card:hover { border-color: #5d5338; transform: translateY(-2px); }
.sof2m-card.is-live { border-color: #3c5a43; }
.sof2m-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: #142022 center/cover no-repeat; }
.sof2m-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 24, 24, .55), rgba(15, 24, 24, 0) 55%); }
.sof2m-thumb.no-image { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #141c21 0 14px, #11181c 14px 28px); }
.sof2m-thumb.no-image::after { display: none; }
.sof2m-thumb-name { padding: 6px 12px; border: 1px solid rgba(120, 132, 116, .45); border-radius: 5px; background: rgba(16, 24, 28, .87); font-weight: 800; color: var(--m-gold2); max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sof2m-badges { position: absolute; z-index: 1; top: 9px; left: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.sof2m-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; background: rgba(16, 24, 28, .9); border: 1px solid rgba(120, 132, 116, .5); color: var(--m-text); vertical-align: middle; }
.sof2m-badge.is-live { background: #23452c; border-color: #4f8f5c; color: #c9f2d1; }
.sof2m-badge.is-new { background: #4a3a1c; border-color: #876a42; color: var(--m-gold2); }
.sof2m-body { flex: 1; padding: 12px 14px 4px; min-width: 0; }
.sof2m .sof2m-title { margin: 0 0 2px; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.sof2m .sof2m-title a { color: var(--m-text); }
.sof2m-file { font-size: .76rem; color: var(--m-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }
.sof2m-types { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.sof2m-type { padding: 1px 6px; border-radius: 4px; background: var(--m-bg2); border: 1px solid var(--m-line); font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: var(--m-muted); }
.sof2m-facts { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--m-muted); }
.sof2m-fact.is-live { color: var(--m-green); font-weight: 700; }
.sof2m-actions { display: flex; gap: 6px; padding: 12px 14px 14px; }
.sof2m-actions .sof2s-btn { flex: 1; justify-content: center; text-align: center; }

/* Pages */
.sof2m-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0 10px; }
.sof2m-pages a, .sof2m-pages span { min-width: 34px; padding: 6px 10px; border-radius: 7px; text-align: center; font-weight: 800; font-size: .88rem; border: 1px solid var(--m-line); background: var(--m-panel); }
.sof2m-pages .is-current { background: var(--m-gold); border-color: var(--m-gold); color: #141410; }
.sof2m-pages .is-gap { border-color: transparent; background: none; color: var(--m-dim); }
.sof2m-empty { padding: 26px; text-align: center; border: 1px dashed var(--m-line); border-radius: var(--m-radius); color: var(--m-muted); margin: 0 0 18px; }
.sof2m-empty p { margin: 0 0 10px; }
.sof2m-empty p:last-child { margin: 0; }
.sof2m-admin-note { padding: 10px 12px; border-left: 3px solid var(--m-gold); background: rgba(211, 164, 93, .08); font-size: .88rem; }

/* Details */
.sof2m-back { margin: 0 0 12px; font-weight: 700; }
.sof2m-hero { position: relative; overflow: hidden; margin: 0 0 18px; border: 1px solid #3a3a2c; border-radius: var(--m-radius); background: linear-gradient(90deg, rgba(11, 16, 20, .97) 30%, rgba(11, 16, 20, .55)), var(--sof2m-img, none) center/cover, var(--m-panel); min-height: 260px; display: flex; align-items: flex-end; }
.sof2m-hero-text { padding: 26px 28px; max-width: 640px; }
.sof2m .sof2m-hero-title { margin: 2px 0 8px; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; }
.sof2m-hero-meta { margin: 0 0 16px; color: var(--m-muted); font-size: .9rem; }
.sof2m-hero-actions { margin: 0 0 8px; }
.sof2m .sof2s-btn.sof2m-big { padding: 13px 26px; font-size: 1.02rem; }
.sof2m-howto { margin: 0; color: var(--m-dim); }
.sof2m-live-box { margin: 0 0 18px; padding: 14px 18px; border: 1px solid #3c5a43; border-radius: var(--m-radius); background: rgba(47, 91, 56, .14); }
.sof2m-live-box ul { list-style: none; margin: 0; padding: 0; }
.sof2m-live-box li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.sof2m-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sof2m-cols > * { min-width: 0; }
.sof2m-ranks, .sof2m-list { list-style: none; margin: 0; padding: 0; }
.sof2m-ranks li, .sof2m-list li { padding: 7px 0; border-top: 1px solid var(--m-line); }
.sof2m-ranks li:first-child, .sof2m-list li:first-child { border-top: 0; }
.sof2m-rank { display: inline-block; width: 22px; color: var(--m-gold2); font-weight: 900; }
.sof2m .sof2m-ranks small, .sof2m .sof2m-list small { color: var(--m-dim); }
.sof2m-pack { margin: 0 0 18px; }
.sof2m-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sof2m-pack-item { padding: 10px; border: 1px solid var(--m-line); border-radius: 11px; background: var(--m-panel); min-width: 0; }
.sof2m-pack-item.is-live { border-color: #3c5a43; }
.sof2m-pack-item code { align-self: flex-start; }
.sof2m-pack-img { position: relative; }
.sof2m-pack-img .sof2m-badge { position: absolute; top: 7px; left: 7px; }
.sof2m-pack-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0 0; }
.sof2m-pack-stats > div { padding: 6px 8px; border-radius: 7px; background: var(--m-bg2); border: 1px solid var(--m-line); min-width: 0; }
.sof2m-pack-stats dt { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--m-dim); }
.sof2m-pack-stats dd { margin: 1px 0 0; font-weight: 800; color: var(--m-gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sof2m .sof2m-muted { color: var(--m-dim); }
.sof2m-shot { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--m-line); line-height: 0; }
.sof2m-shot img { display: block; width: 100%; height: auto; transition: transform .2s; }
.sof2m-shot:hover img { transform: scale(1.03); }
.sof2m-shot-solo { max-width: 480px; margin: 0 0 18px; }
.sof2m-pack-item { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.sof2m-pack-img { display: block; aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid var(--m-line); background: #142022 center/cover no-repeat; }
.sof2m-pack-img.no-image { background: repeating-linear-gradient(135deg, #141c21 0 14px, #11181c 14px 28px); }
.sof2m-single { max-width: 340px; margin: 0 0 18px; }

@media (max-width: 760px) {
  .sof2m-cols { grid-template-columns: minmax(0, 1fr); }
  .sof2m-hero-text { padding: 20px 18px; }
  .sof2m .sof2m-toolbar select { flex: 1 1 140px; width: 100%; }
}
@media (max-width: 420px) {
  .sof2m-grid { grid-template-columns: minmax(0, 1fr); }
}