/* The Shop tab brand directory (/shop). Light, in the shop's own palette
   (shop.css :root): white cards, dark ink, teal accent. Each brand's logo sits
   on a small dark plate so white logos (Duprix, Ballvek) still read. */
.bdir-title { margin: 8px 4px 2px; font-size: clamp(24px, 6vw, 34px); font-weight: 800; color: var(--shop-fg); }
.bdir-sub { margin: 0 4px 20px; color: var(--shop-dim); font-size: 14px; }

.bdir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  align-items: start;
}
.bdir {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(8, 36, 44, .1);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: var(--shop-fg);
  box-shadow: 0 2px 10px rgba(8, 36, 44, .06);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.bdir:hover {
  border-color: var(--shop-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(8, 36, 44, .12);
}
.bdir__head {
  height: 128px;
  display: grid;
  place-items: center;
  margin: 10px 10px 0;
  padding: 14px;
  border-radius: 12px;
  background: radial-gradient(80% 140% at 50% 0%, #1d2a33, #0b1418);
}
.bdir__logo { max-width: 78%; max-height: 92px; object-fit: contain; display: block; }
.bdir__word {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #f4f7f8;
  text-align: center;
}
.bdir__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
}
.bdir__name { font-size: 17px; font-weight: 800; color: var(--shop-fg); }
.bdir__count {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--shop-accent-ink); background: rgba(22, 200, 210, .12);
  padding: 3px 9px; border-radius: 999px;
}
/* Four small thumbnails per row; one product stays small instead of stretching. */
.bdir__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 14px 14px;
}
.bdir__thumb {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #eef3f4;
  border: 1px solid rgba(8, 36, 44, .08);
}
.bdir__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 2026-10-24: shop home open, brands first ---- */

/* Header logo: the same text wordmark as the home page (app/app.css .app-wordmark). */
.shop-nav__brand .app-wordmark { display: inline-flex; align-items: baseline; font: 900 27px/1 "Arial Black", "Segoe UI Black", system-ui, sans-serif; letter-spacing: -0.02em; white-space: nowrap; user-select: none; }
.shop-nav__brand .app-wordmark__exp { color: #16c8d2; }
.shop-nav__brand .app-wordmark__tube { color: #000; }
.shop-nav__shop { font: 800 13px/1 system-ui, sans-serif; letter-spacing: 0.16em; color: var(--shop-dim, #52707a); padding-top: 4px; }
@media (max-width: 640px) { .shop-nav__brand .app-wordmark { font-size: 22px; } }

/* Brands lead the page; the Starter Packs band follows as a compact strip. */
main.shop-main { display: flex; flex-direction: column; }
main.shop-main > #shopResults { order: -1; }
main.shop-main > .shop-status { order: -2; }

/* Brand cards: the brand's name as a heavy wordmark on a light plate. */
.bdir-title { font-size: clamp(30px, 7vw, 46px); font-weight: 900; letter-spacing: -0.03em; }
.bdir__head { background: #f6f6f6; height: 140px; }
.bdir__word {
  font: 900 clamp(26px, 5vw, 36px)/1 Inter, "Arial Black", system-ui, sans-serif;
  letter-spacing: -0.06em;
  text-transform: none;
  color: #131313;
  overflow-wrap: anywhere;
}
.bdir__word sup { font-size: 0.32em; font-weight: 700; letter-spacing: 0; margin-left: 2px; vertical-align: top; position: relative; top: 0.25em; }

/* MMO Starter Packs, compact: header, the three packs with perks + price. The
   long reward lists, the countdown bar and the info block are hidden here only
   (the game's own pack screen is unchanged). */
main.shop-main #starterPacks { margin: 26px 0 0; padding: 14px 16px; }
main.shop-main #starterPacks h2 { font-size: 17px; }
main.shop-main #starterPacks .spk-lede,
main.shop-main #starterPacks .spk-strip,
main.shop-main #starterPacks .spk-info,
main.shop-main #starterPacks .spk-limited,
main.shop-main #starterPacks .spk-head small { display: none !important; }
main.shop-main #starterPacks .spk-grid { gap: 10px; margin-top: 10px; }
main.shop-main #starterPacks .spk-card { padding: 10px 12px !important; min-height: 0 !important; }
main.shop-main #starterPacks .spk-head { margin-bottom: 4px; }
main.shop-main #starterPacks .spk-buff { font-size: 11.5px; margin: 4px 0 8px; }
main.shop-main #starterPacks .spk-buy { padding: 8px 10px !important; font-size: 14px !important; }
main.shop-main #starterPacks .spk-ribbon { transform: scale(0.85); }
main.shop-main #starterPacks .spk-fine { font-size: 11px; margin-top: 6px; }

/* Two rows of brands, then "See all N brands" (8 cards; 4 on a phone), so the
   MMO Starter Packs below stay in view. */
.bdir-grid--folded > .bdir:nth-child(n + 9) { display: none; }
@media (max-width: 640px) {
  .bdir-grid--folded > .bdir:nth-child(n + 5) { display: none; }
}
.bdir-more {
  display: block;
  margin: 18px auto 0;
  padding: 11px 26px;
  border: 1px solid rgba(8, 36, 44, .16);
  border-radius: 999px;
  background: #fff;
  color: var(--shop-fg);
  font: 800 15px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.bdir-more:hover { border-color: #16c8d2; color: #0b8d95; }