/* v9q loot catalog filters + 6-tile hub. Tokens from Option E / Tips. */

:root{
  --loot-gold:#E4C25A;
  --loot-gold-soft:#FFF3C4;
  --loot-gold-deep:#C9A227;
  --loot-gold-ink:#8A6416;
}

/* ----- Loot hub: six Tips-style tiles, gold for Drops ----- */
.loot-hub__grid--6{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:600px){
  .loot-hub__grid--6{grid-template-columns:1fr 1fr;gap:14px}
}
@media (min-width:1040px){
  .loot-hub__grid--6{grid-template-columns:repeat(3,1fr);gap:16px}
}
.loot-hub__all{
  margin:16px 0 0;
  font-size:0.95rem;
}
.loot-hub__all a{font-weight:600}
.tile--loot-drops{
  box-shadow:0 0 0 1px rgba(228,194,90,.45), 0 0 28px rgba(228,194,90,.14);
}
.tile--loot-drops .kicker,
.tile--loot-drops .cta{color:var(--loot-gold)}
.tile-count{
  display:block;
  margin-top:4px;
  color:var(--loot-gold-soft);
  font-variant-numeric:tabular-nums;
  font-size:0.85rem;
  opacity:.9;
}
.tile--tips .tile-count{color:inherit;opacity:.75}

/* ----- Filter bar ----- */
.loot-filters{
  margin:0 0 22px;
  min-width:0;
  max-width:100%;
}
.loot-filters__open{
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  margin:0 0 10px;
  padding:10px 16px;
  border:1px solid rgba(228,194,90,.45);
  border-radius:10px;
  background:rgba(228,194,90,.08);
  color:var(--loot-gold-soft);
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.loot-filters__count{
  margin:8px 0 0;
  font-size:0.9rem;
  opacity:.85;
}
.loot-filters__bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:flex-end;
  min-width:0;
  max-width:100%;
}
.loot-filters__fields{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:flex-end;
  min-width:0;
  flex:1 1 auto;
}
.loot-filters__field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 140px;
  max-width:100%;
}
.loot-filters__field--search{flex:2 1 200px}
.loot-filters__field label,
.loot-filters__field .loot-filters__lab{
  font-size:0.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.75;
}
.loot-filters select,
.loot-filters input[type="search"]{
  width:100%;
  max-width:100%;
  min-height:40px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(5,7,11,.7);
  color:inherit;
  font:inherit;
  box-sizing:border-box;
}
.loot-filters__head,
.loot-filters__actions .loot-filters__done{display:none}
.loot-filters__actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}
.loot-filters__clear{
  min-height:40px;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}
.loot-filters__scrim{display:none}

/* Mobile: Filter & sort sheet, no sideways scroll */
@media (max-width:700px){
  .loot-filters__open{display:inline-flex}
  .loot-filters__scrim{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:80;
    border:0;
    padding:0;
  }
  .loot-filters.is-open .loot-filters__scrim{display:block}
  .loot-filters__bar{
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:81;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0;
    max-height:min(88vh, 720px);
    overflow:auto;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius:16px 16px 0 0;
    background:#0c1016;
    box-shadow:0 -8px 40px rgba(0,0,0,.45);
  }
  .loot-filters.is-open .loot-filters__bar{display:flex}
  .loot-filters__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 12px;
  }
  .loot-filters__head h2{
    margin:0;
    font-size:1.1rem;
  }
  .loot-filters__close{
    min-width:44px;
    min-height:44px;
    border:0;
    background:transparent;
    color:inherit;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
  }
  .loot-filters__fields{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:12px;
  }
  .loot-filters__field,
  .loot-filters__field--search{
    flex:none;
    width:100%;
    max-width:100%;
  }
  .loot-filters__actions{
    margin-top:16px;
    width:100%;
  }
  .loot-filters__actions .loot-filters__done{
    display:inline-flex;
    flex:1;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 16px;
    border:0;
    border-radius:10px;
    background:var(--loot-gold);
    color:#1a1404;
    font-weight:700;
    cursor:pointer;
  }
  .loot-filters__clear{flex:0 0 auto}
}

/* Hidden entries stay out of layout; kept in the DOM for no-reload filters */
.loot-card.is-hidden,
a.drop-tile.is-hidden,
article.drop-tile.is-hidden,
.catalog-group.is-hidden{display:none !important}

/* Container / unified catalog cards */
.loot-card-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  min-width:0;
}
@media (min-width:700px){
  .loot-card-row{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width:1100px){
  .loot-card-row{grid-template-columns:repeat(5, minmax(0,1fr))}
}
a.loot-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-decoration:none;
  color:inherit;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  box-shadow:0 0 0 1px rgba(228,194,90,.22);
}
a.loot-card:hover,
a.loot-card:focus-visible{
  box-shadow:0 0 0 1px var(--loot-gold), 0 0 18px rgba(228,194,90,.18);
}
.loot-card__media{
  position:relative;
  aspect-ratio:16/10;
  background:#0a0d12;
  overflow:hidden;
}
.loot-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.loot-card__ph{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(228,194,90,.18), transparent 60%),
    #0a0d12;
}
.loot-card__ph .drop-tile__mark{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--loot-gold);
  box-shadow:0 0 10px rgba(228,194,90,.7);
}
.loot-card__body{padding:10px 12px 12px;min-width:0}
.loot-card__title{
  margin:0;
  font-size:0.95rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.loot-card__meta{
  margin:4px 0 0;
  font-size:0.75rem;
  opacity:.75;
  overflow-wrap:anywhere;
}
/* On category pages, slim drop tiles already have a row; keep them wrapping */
.drop-tile-row--slim{min-width:0;max-width:100%}

/* Container detail */
.container-facts{margin:0 0 22px}
.container-photos{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:0 0 28px;
}
@media (min-width:700px){
  .container-photos{grid-template-columns:1fr 1fr}
}
.container-photos figure{
  margin:0;
  min-width:0;
}
.container-photos img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}
.container-photos figcaption{margin-top:6px;font-size:0.85rem;opacity:.8}
.container-list{margin:0;padding-left:1.15em}
.container-list a{font-weight:600}

/* Fixed 16:10 media box. padding-bottom holds height even when later CSS sets
   height:auto !important and the image is out of flow (so intrinsic size cannot grow the row). */
.loot-hub__grid--6 .thumb{
  position:relative !important;
  margin:var(--tile-pad) var(--tile-pad) 0 !important;
  width:calc(100% - 2 * var(--tile-pad)) !important;
  max-width:calc(100% - 2 * var(--tile-pad)) !important;
  aspect-ratio:unset !important;
  height:0 !important;
  padding-bottom:62.5% !important;
  overflow:hidden !important;
  flex:none !important;
  min-height:0 !important;
  box-sizing:border-box;
}
.loot-hub__grid--6 .thumb img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}
.loot-filters__field--sort,
.loot-filters__field:has(#loot-sort-all),
.loot-filters select[name="sort"]{
  max-width:100%;
}