:root {
  --mob-gold:#d8ae5d;
  --mob-panel:rgba(9,12,18,.94);
  --mob-border:rgba(216,174,93,.24);
  --mob-muted:#9fa6b2
}
.mobs-background {
  position:fixed;
  inset:0;
  background:linear-gradient(rgba(4,6,10,.55),rgba(4,6,10,.92)),url('../../img/HH/wallpaper/wallpaper-hh.png') center top/cover no-repeat;
  z-index:-1
}
.mobs-page {
  min-height:calc(100vh - 160px);
  padding:64px 0 100px;
  background:radial-gradient(circle at 50% 0,rgba(197,145,54,.14),transparent 35%)
}
.mobs-container {
  max-width:1320px
}
.mobs-hero {
  position:relative;
  padding:42px 48px;
  margin-bottom:26px;
  border:1px solid var(--mob-border);
  background:linear-gradient(105deg,rgba(25,24,23,.96),rgba(8,11,17,.88));
  box-shadow:0 24px 65px rgba(0,0,0,.45);
  overflow:hidden
}
.mobs-hero:after {
  content:'\f6d5';
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  position:absolute;
  right:45px;
  top:5px;
  font-size:145px;
  color:rgba(216,174,93,.055)
}
.mobs-kicker {
  color:var(--mob-gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.38em
}
.mobs-hero h1 {
  margin:7px 0 8px;
  color:#fff;
  font:42px 'Marcellus SC',serif
}
.mobs-hero p {
  max-width:650px;
  margin:0;
  color:#b9bec8;
  font-size:17px
}
.mobs-stats {
  display:flex;
  gap:25px;
  margin-top:22px;
  color:var(--mob-muted);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.1em
}
.mobs-stats strong {
  color:#fff;
  font-size:16px
}
.mobs-filters {
  display:grid;
  grid-template-columns:minmax(250px,2fr) 1fr 1fr auto auto;
  gap:13px;
  align-items:end;
  padding:20px;
  margin-bottom:28px;
  border:1px solid var(--mob-border);
  background:var(--mob-panel)
}
.mobs-filters label {
  margin:0
}
.mobs-filters label span {
  display:block;
  margin-bottom:7px;
  color:#c8cbd0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em
}
.mobs-filters input,.mobs-filters select {
  width:100%;
  height:44px;
  padding:0 13px;
  color:#eee;
  border:1px solid rgba(255,255,255,.14);
  background:#11151c
}
.mobs-filters button,.mobs-clear {
  height:44px;
  padding:0 20px;
  border:1px solid var(--mob-gold);
  background:var(--mob-gold);
  color:#111;
  font-weight:700;
  line-height:42px;
  text-transform:uppercase;
  font-size:12px
}
.mobs-clear {
  background:transparent;
  color:var(--mob-gold)
}
.mobs-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}
.mob-card {
  border:1px solid var(--mob-border);
  background:var(--mob-panel);
  box-shadow:0 16px 40px rgba(0,0,0,.35)
}
.mob-card-heading {
  display:flex;
  gap:18px;
  align-items:center;
  padding:22px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.mob-emblem {
  display:flex;
  width:72px;
  height:72px;
  flex:0 0 72px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:1px solid var(--mob-border);
  background:radial-gradient(circle,rgba(216,174,93,.15),transparent 70%);
  color:var(--mob-gold)
}
.mob-emblem img {
  width:100%;
  height:100%;
  object-fit:cover
}
.mobs-zoomable {
  cursor:zoom-in
}
.mob-emblem svg {
  font-size:25px
}
.mob-emblem small {
  margin-top:7px;
  color:#8f929a;
  font-size:9px
}
.mob-card h2 {
  margin:0 0 9px;
  color:var(--mob-name-color);
  font:23px 'Marcellus SC',serif;
  text-shadow:0 1px 6px #000
}
.mob-meta {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.mob-meta span {
  padding:4px 8px;
  color:#c8cbd2;
  border:1px solid rgba(255,255,255,.1);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em
}
.mob-drops summary {
  display:flex;
  justify-content:space-between;
  padding:14px 20px;
  color:#ddd;
  cursor:pointer;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.1em
}
.mob-drops summary b {
  color:var(--mob-gold)
}
.drop-list {
  max-height:330px;
  overflow:auto;
  padding:0 12px 13px;
  scrollbar-color:#765d31 #111
}
.drop-item {
  display:flex;
  gap:12px;
  align-items:center;
  min-height:62px;
  padding:8px;
  border-top:1px solid rgba(255,255,255,.065)
}
.drop-icon {
  display:flex;
  width:46px;
  height:46px;
  flex:0 0 46px;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,rgba(216,174,93,.18),rgba(0,0,0,.4));
  border:1px solid rgba(216,174,93,.18);
  color:#826d47
}
.drop-icon img {
  max-width:40px;
  max-height:40px;
  image-rendering:auto
}
.drop-item strong {
  display:block;
  color:#e5e4df;
  font-size:14px;
  line-height:1.15
}
.drop-item small {
  display:block;
  margin-top:5px;
  color:#757d88;
  font-size:10px;
  text-transform:uppercase
}
.mobs-pagination {
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:35px
}
.mobs-pagination a {
  display:flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--mob-border);
  background:#0c1016;
  color:#c7c7c7
}
.mobs-pagination a.active {
  background:var(--mob-gold);
  color:#111
}
.mobs-pagination a.disabled {
  pointer-events:none;
  opacity:.3
}
.mobs-empty {
  padding:65px;
  text-align:center;
  border:1px solid var(--mob-border);
  background:var(--mob-panel);
  color:var(--mob-muted)
}
.mobs-empty svg {
  font-size:38px;
  color:var(--mob-gold)
}
.mobs-empty h2 {
  color:#fff
}
.mobs-image-viewer {
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.88);
  cursor:zoom-out;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease
}
.mobs-image-viewer.is-open {
  opacity:1;
  visibility:visible
}
.mobs-image-viewer img {
  width:auto;
  height:auto;
  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 48px);
  object-fit:contain;
  cursor:default;
  box-shadow:0 18px 65px rgba(0,0,0,.75)
}
body.mobs-viewer-open {
  overflow:hidden
}
.common-footer {
  color:var(--mob-muted);
  border-top:1px solid rgba(244,201,93,.16);
  background:rgba(0,0,0,.34)
}
@media(max-width:991px) {
  .mobs-filters {
    grid-template-columns:1fr 1fr
  }
  .mobs-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:575px) {
  .mobs-page {
    padding-top:35px
  }
  .mobs-hero {
    padding:28px 22px
  }
  .mobs-hero h1 {
    font-size:32px
  }
  .mobs-filters {
    grid-template-columns:1fr
  }
  .mob-card-heading {
    padding:17px
  }
  .mob-emblem {
    width:58px;
    height:58px;
    flex-basis:58px
  }
  .mob-card h2 {
    font-size:19px
  }
}