/* ==========================================================================
   Pages: hero guides, counter guides, community builds.
   Built on the tokens and components in styles.css (panels, tags, bands, tiles).
   ========================================================================== */

.page-enter {
  animation: rise 420ms ease both;
}

/* ---------- band ---------- */

.page-band .band-in {
  min-height: 380px;
  padding-block: 40px 52px;
}

.page-band .h-page {
  margin-top: 18px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-size: 13px;
}

.crumbs a:hover {
  color: var(--white);
}

.crumbs .sep {
  opacity: 0.5;
}

.crumbs .current {
  color: var(--muted);
}

.band-in .eyebrow {
  margin-top: 18px;
}

.crumbs + .eyebrow {
  margin-top: 20px;
}

.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.band-actions .btn {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

.btn-ghost {
  background: rgb(22 24 28 / 60%);
  backdrop-filter: blur(6px);
}

.diff-sm i {
  width: 12px;
  height: 4px;
}

.diff-sm b {
  font-size: 12px;
  font-weight: 600;
}

/* ---------- sticky tabs ---------- */

.page-subnav {
  position: sticky;
  top: var(--hdr);
  z-index: 30;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  background: rgb(13 15 17 / 90%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-subnav .seg {
  padding-bottom: 2px;
}

/* ---------- sections ---------- */

.page-sec {
  padding-block: 40px 8px;
}

.page-sec .sec-head {
  margin-bottom: 20px;
}

.sub-title {
  margin: 30px 0 4px;
  color: var(--white);
  font: 800 22px/1.1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-sec .sub-title:first-of-type {
  margin-top: 6px;
}

.link-block {
  margin-top: 22px;
}

.page-credit {
  margin-top: 32px;
  color: var(--dim);
  font-size: 13px;
}

.page-credit a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* panels */

.pn {
  padding: 22px;
}

.pn p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.pn p + p {
  margin-top: 10px;
}

.pn-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: var(--white);
  font: 800 21px/1.1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pn-title .svgi {
  color: var(--hero-accent);
}

.pn.warn {
  border-left: 3px solid var(--press);
}

.pn.warn .pn-title .svgi {
  color: var(--press);
}

.pn-title.mt {
  margin-top: 20px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.num-list {
  display: grid;
  gap: 12px;
  counter-reset: step;
}

.num-list li {
  position: relative;
  padding-left: 36px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  counter-increment: step;
}

.num-list li::before {
  content: counter(step);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--hero-accent) 16%, transparent);
  color: var(--hero-accent);
  font: 800 14px/1 var(--display);
}

.dot-list {
  display: grid;
  gap: 11px;
}

.dot-list li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.dot-list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-accent);
}

.pn.warn .dot-list li::before {
  background: var(--press);
}

strong {
  color: var(--white);
  font-weight: 600;
}

/* ---------- quick answer ---------- */

.quick {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden;
}

.quick-main,
.quick-side {
  padding: 26px;
}

.quick-side {
  display: grid;
  gap: 24px;
  border-left: 1px solid var(--line);
  background: rgb(255 255 255 / 1.5%);
}

.quick-goal {
  margin-top: 12px;
  color: var(--white);
  font-size: 19px;
  line-height: 1.5;
}

.glance {
  display: grid;
  gap: 0;
  margin-top: 20px;
}

.glance > div {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.glance dt {
  margin-bottom: 5px;
  color: var(--hero-accent);
  font: 700 11px/1 var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.glance dd {
  margin: 0;
  color: var(--white);
  font-weight: 500;
  line-height: 1.5;
}

.pts {
  display: grid;
  gap: 13px;
  margin-top: 14px;
}

.pts li {
  display: flex;
  gap: 11px;
}

.pts .svgi {
  margin-top: 2px;
}

.pts.good .svgi { color: var(--def); }
.pts.bad .svgi { color: var(--press); }

.pts b {
  display: block;
  color: var(--white);
  font-weight: 600;
}

.pts i {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
}

/* ---------- popular items ---------- */

.pop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.pop-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
}

.pop-card h4 {
  margin-bottom: 10px;
  color: var(--hero-accent);
  font: 700 12px/1 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: default;
  transition: background 150ms ease;
}

.pop-row:hover,
.pop-row:focus-visible {
  background: var(--carbon-2);
}

.pop-icon {
  width: 30px;
  height: 30px;
  flex: none;
  border: 1.5px solid var(--cat, var(--line-2));
  border-radius: 7px;
  background: var(--carbon-3);
  object-fit: cover;
}

.pop-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop-pct {
  color: var(--white);
  font: 800 17px/1 var(--display);
  letter-spacing: 0.03em;
}

.ab-block .sub {
  margin: 8px 0 14px;
}

/* ---------- game plan ---------- */

.gp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gp {
  padding: 20px;
  border-top: 2px solid var(--hero-accent);
}

.gp-0 { border-top-color: color-mix(in srgb, var(--hero-accent) 45%, transparent); }
.gp-1 { border-top-color: color-mix(in srgb, var(--hero-accent) 72%, transparent); }

.gp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.gp-head h3 {
  color: var(--white);
  font: 800 26px/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gp-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hero-accent) 14%, transparent);
  color: var(--hero-accent);
  font-size: 12.5px;
  font-weight: 700;
}

.gp-head .svgi {
  width: 14px;
  height: 14px;
}

.gp p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- rewards, tips ---------- */

.rewards {
  display: grid;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
}

.reward-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}

.reward-row:first-child {
  border-top: 0;
}

.reward-row b {
  color: var(--hero-accent);
  font: 800 18px/1.2 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reward-row span {
  color: var(--muted);
  font-size: 14.5px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* ---------- matchups ---------- */

.mu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.mu-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.mu-portrait {
  width: 52px;
  height: 62px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #000;
  object-fit: cover;
  object-position: 50% 18%;
}

.mu-head h3 {
  color: var(--white);
  font: 800 26px/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mu-tag {
  display: inline-block;
  margin-top: 5px;
  font: 700 11px/1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mu-tag.threat { color: var(--press); }
.mu-tag.opp { color: var(--def); }

.mu-row p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.mu-row p.strong {
  color: var(--white);
  font-weight: 600;
}

.mu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ---------- stats ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.tiles-sm {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
}

.tile small {
  color: var(--dim);
  font: 700 10.5px/1 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tile b {
  color: var(--white);
  font: 800 38px/0.95 var(--display);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tiles-sm .tile b {
  font-size: 30px;
}

.tile-sub {
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 600;
}

.tile-sub.up { color: var(--def); }
.tile-sub.down { color: var(--press); }

.bars-panel {
  margin-top: 12px;
}

.bars-panel .sub {
  margin: -4px 0 14px;
  font-size: 14px;
}

.bars {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 62px 90px;
  align-items: center;
  gap: 14px;
}

.bar-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.bar-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--carbon-3);
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--press);
  transition: width 500ms ease;
}

.bar-track span.up {
  background: var(--hero-accent);
}

.bar-mid {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1.5px;
  background: rgb(244 243 238 / 40%);
}

.bar-row b {
  color: var(--white);
  font: 800 19px/1 var(--display);
  letter-spacing: 0.03em;
  text-align: right;
}

.bar-row small {
  color: var(--dim);
  font-size: 12px;
}

/* ---------- next links ---------- */

.next-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.next-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  transition: transform 180ms ease, border-color 180ms ease;
}

.next-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hero-accent) 55%, var(--line));
}

.next-art {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: #000;
  object-fit: cover;
}

.next-card span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.next-card b {
  color: var(--white);
  font: 800 19px/1.1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.next-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.next-card > .svgi {
  color: var(--hero-accent);
}

/* ---------- hub ---------- */

.hub {
  padding-top: 34px;
}

.hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.hub-toolbar .search-wrap {
  width: min(340px, 100%);
  margin: 0;
}

.hub-toolbar .type-filter {
  margin: 0;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.hcard {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--carbon-2);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.hcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(10 11 13 / 95%) 0%, rgb(10 11 13 / 35%) 42%, transparent 66%);
}

.hcard[data-type="frontline"] { --type-color: var(--type-frontline); }
.hcard[data-type="gun-carry"] { --type-color: var(--type-gun-carry); }
.hcard[data-type="spirit-carry"] { --type-color: var(--type-spirit-carry); }
.hcard[data-type="pick"] { --type-color: var(--type-pick); }
.hcard[data-type="support"] { --type-color: var(--type-support); }

.hcard::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 3px;
  background: var(--type-color, var(--lime));
}

.hcard:hover {
  transform: translateY(-3px);
  border-color: var(--tile-accent, var(--lime));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--tile-accent, var(--lime)) 25%, transparent);
}

.hcard-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  transition: transform 350ms ease;
}

.hcard:hover .hcard-art {
  transform: scale(1.06);
}

.hcard-meta {
  position: absolute;
  inset: auto 14px 14px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hcard-meta small {
  color: var(--type-color, var(--lime));
  font: 700 10px/1 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hcard-meta b {
  color: var(--white);
  font: 800 28px/0.95 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hcard-meta em {
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
}

.hcard-meta .diff {
  margin-top: 4px;
}

/* ---------- counter guide ---------- */

.glance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-top: 2px solid var(--c);
}

.gl-press { --c: var(--press); }
.gl-ctrl { --c: var(--ctrl); }
.gl-def { --c: var(--def); }

.gl .kicker {
  color: var(--c);
}

.gl p {
  color: var(--white);
  font-size: 16.5px;
  line-height: 1.5;
}

.role-panel {
  margin-top: 14px;
}

.detail-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.problem {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

.problem h3 {
  color: var(--white);
  font: 700 18px/1.3 var(--body);
}

.problem > p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.problem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: default;
}

.problem-item b {
  display: block;
  color: var(--white);
  font: 800 22px/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.problem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.problem-tags em {
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--hero-accent) 14%, transparent);
  color: var(--hero-accent);
  font: 600 11.5px/1.4 var(--body);
  font-style: normal;
}

.faq {
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
  transition: border-color 150ms ease;
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--hero-accent) 40%, var(--line));
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: var(--white);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--hero-accent);
  font: 400 24px/1 var(--body);
  transition: transform 200ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- community builds ---------- */

.builds-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.build-list {
  position: sticky;
  top: calc(var(--hdr) + 16px);
  display: grid;
  gap: 12px;
  max-height: calc(100vh - var(--hdr) - 32px);
  padding: 18px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--carbon);
  scrollbar-width: thin;
  scrollbar-color: var(--carbon-3) transparent;
}

.build-items {
  display: grid;
  gap: 8px;
}

.build-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--carbon-2);
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
}

.build-item:hover {
  border-color: rgb(244 243 238 / 30%);
}

.build-item[aria-pressed="true"] {
  border-color: var(--hero-accent);
  background: color-mix(in srgb, var(--hero-accent) 10%, var(--carbon-2));
}

.build-item b {
  display: -webkit-box;
  overflow: hidden;
  color: var(--white);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.build-stats {
  display: flex;
  gap: 14px;
}

.build-stats em {
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
}

.share-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--carbon-3);
}

.share-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--hero-accent);
}

.build-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.build-detail > * {
  min-width: 0;
}

.bd-head {
  display: grid;
  gap: 12px;
  margin-bottom: 6px;
}

.bd-head h3 {
  color: var(--white);
  font: 800 clamp(28px, 3.4vw, 40px) / 1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bd-block {
  margin-top: 14px;
}

.bd-block .sub-title {
  margin: 0 0 12px;
}

.bi-group {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
}

.bi-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.bi-title b {
  color: var(--hero-accent);
  font: 700 12px/1 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.bi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--carbon-2);
  cursor: default;
  transition: border-color 150ms ease;
}

.bi:hover,
.bi:focus-visible {
  border-color: var(--cat, var(--hero-accent));
}

.bi-icon {
  width: 36px;
  height: 36px;
  flex: none;
  border: 1.5px solid var(--cat, var(--line-2));
  border-radius: 8px;
  background: var(--carbon-3);
  object-fit: cover;
}

.bi span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.bi b {
  overflow: hidden;
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bi small {
  color: var(--dim);
  font-size: 11.5px;
}

.unlock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.unlock small {
  color: var(--dim);
  font: 700 10.5px/1 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.unlock-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--carbon);
}

.unlock-chip .ab-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
}

.unlock-chip b {
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- 404 ---------- */

.not-found {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding-block: 90px;
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .quick { grid-template-columns: 1fr; }
  .quick-side { border-top: 1px solid var(--line); border-left: 0; }
  .pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gp-grid,
  .tips-grid,
  .mu-grid,
  .glance-grid,
  .next-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builds-layout { grid-template-columns: minmax(0, 1fr); }
  .build-list { position: static; max-height: 360px; }
  .problem-grid,
  .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .page-band .band-in { min-height: 0; padding-block: 28px 44px; }
  .reward-row { grid-template-columns: 1fr; gap: 4px; }
  .pop-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 84px minmax(0, 1fr) 54px; gap: 10px; }
  .bar-row small { display: none; }
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hcard-meta b { font-size: 22px; }
  .hcard-meta { inset: auto 10px 10px; }
  .related-grid { grid-template-columns: 1fr; }
  .tile b { font-size: 30px; }
  .quick-main,
  .quick-side { padding: 20px 16px; }
}

@media print {
  .page-subnav,
  .band-actions { display: none !important; }
}