/* Home Game Menu as an icon-card grid (lane home-b6, 2026-10-06).
   ONE concern: the right-column Game Menu window on the homepage (index.html, the
   <aside class="hm-cmd__side"> region). It used to be a stack of 14 identical red
   buttons; now every door is a card: a real client icon (assets/icons/, seated in the
   crafting slot frame exactly like .hm-door__icon in wgf-home.css), a title and a
   one-line hint. Forever doors first, then the Forever profession calculators (which
   took over the Tailoring/cloth links from the hero), then the rest of the site.
   Squared chrome (owner law: no rounded cards). Two columns at every width the side
   column can take, including 375px phones. Loaded from inside the aside so the whole
   feature is one contiguous block in index.html. */

.hm-menu--cards .hm-menu__body{display:block;padding-bottom:14px}

.hm-gm__label{
  margin:2px 0 6px;
  font-family:var(--font-game);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--wgf-gold-muted);text-shadow:var(--text-ink-outline);
}
.hm-gm__label:not(:first-child){margin-top:12px}

.hm-gm{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
}
.hm-gm > li{min-width:0}

.hm-gm__card{
  display:flex;align-items:flex-start;gap:6px;height:100%;
  padding:6px 6px 7px;
  /* client inset frame (kit --wgf-inset-art, wgf-chrome.css; owner Ready Check
     2026-10-06: Blizzard art only, no navy plate + gold outline) */
  background:var(--wgf-inset-art);border:0;border-radius:0;
  color:inherit;text-decoration:none;
  transition:filter .12s ease;
}
.hm-gm__card:hover{filter:brightness(1.35)}
.hm-gm__card:focus-visible{filter:brightness(1.35);outline:2px solid var(--wgf-gold-primary);outline-offset:1px}

.hm-gm__icon{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:30px;height:30px;
  background:url("/assets/ui/professions-slot-frame.png") center/100% 100% no-repeat;
}
.hm-gm__icon > img{width:22px;height:22px;display:block}

.hm-gm__text{display:flex;flex-direction:column;min-width:0}
.hm-gm__title{
  font-family:var(--font-game);font-weight:700;font-size:.8125rem;line-height:1.2;
  color:var(--wgf-gold-primary);text-shadow:var(--text-ink-outline);
  overflow-wrap:break-word;hyphens:auto;
}
.hm-gm__hint{font-size:var(--text-xs);line-height:1.3;color:var(--wgf-muted);margin-top:1px}
.hm-gm__stat{font-size:var(--text-xs);line-height:1.3;color:var(--wgf-up);margin-top:2px}
.hm-gm__stat[hidden]{display:none}

/* Profession calculators: the Tailoring card spans the row, its cloth inputs and the
   other Forever professions ride under it as small icon chips. */
.hm-gm > li.hm-gm__wide{grid-column:1 / -1}
.hm-gm__wide > .hm-gm__card{height:auto}
.hm-gm__chips{
  list-style:none;margin:6px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:4px;
}
.hm-gm__chips > li{min-width:0}
.hm-gm__chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 7px 3px 3px;
  background:var(--wgf-inset-art);border:0;border-radius:0;
  font-size:var(--text-xs);line-height:1.2;color:var(--wgf-gold-link);text-decoration:none;
}
.hm-gm__chip:hover,
.hm-gm__chip:focus-visible{color:var(--wgf-gold-bright);filter:brightness(1.35);outline:none}
.hm-gm__chip:focus-visible{outline:2px solid var(--wgf-gold-primary);outline-offset:1px}
.hm-gm__chip > img{width:18px;height:18px;display:block}
.hm-gm__chips-label{width:100%;font-size:var(--text-xs);color:var(--wgf-muted);margin:2px 0 0}

.hm-menu--cards .hm-menu__rule{margin:12px 0 8px}
.hm-menu--cards .hm-gm__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hm-menu--cards .hm-gm__meta .wgf-btn-red{width:100%;justify-content:center;min-width:0}