/* GCH Fanart V2.2: full-width, artwork-first responsive masonry. */
.gch-fanart-gallery, .gch-fanart-gallery * { box-sizing: border-box; }
.gch-fanart-gallery {
  position: relative;
  left: 50%;
  width: calc(100vw - 32px);
  max-width: none;
  transform: translateX(-50%);
  margin: 0 0 3rem;
  padding: 0 0.25rem;
  color: var(--gch-ink, #f2e9df);
}
.gch-fanart-gallery__head {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  flex-wrap: wrap; margin: 0.3rem 0 0.75rem; padding: 0 0.4rem;
}
.gch-fanart-gallery__head h1 {font-size: clamp(1.35rem, 2.4vw, 2.1rem); line-height: 1.2; margin: 0;}
.gch-fanart-gallery__reset {font-size: 0.91rem; color: inherit; text-decoration: underline; text-underline-offset: 3px;}
.gch-fanart-gallery__filters {
  display: flex; align-items: end; flex-wrap: wrap; gap: 0.65rem;
  margin: 0 0 1.1rem; padding: 0.7rem 0.8rem;
  border: 1px solid rgba(150,150,160,0.28); border-radius: 14px;
  background: rgba(30, 36, 48, 0.50); backdrop-filter: blur(5px);
}
.gch-fanart-gallery__filter {display: flex; flex-direction: column; gap: 0.25rem; flex: 0 1 220px; min-width: 155px;}
.gch-fanart-gallery__filter--character {flex: 1 1 320px; max-width: 460px;}
.gch-fanart-gallery__filter label {font-size: 0.75rem; font-weight: 700; opacity: 0.82; letter-spacing: 0.03em;}
.gch-fanart-gallery__filter select {
  appearance: auto; width: 100%; min-height: 40px; padding: 0.47rem 0.65rem;
  border: 1px solid rgba(160,170,185,0.38); border-radius: 9px;
  color: #fff6ec; background: #303847; font-size: 0.94rem;
  cursor: pointer; font-family: inherit; line-height: 1.25;
}
.gch-fanart-gallery__filter select:focus-visible, .gch-fanart-gallery a:focus-visible {
  outline: 2px solid #f5c97a; outline-offset: 2px;
}
.gch-fanart-gallery__grid {
  display: block;
  columns: 230px auto;
  column-gap: clamp(0.45rem, 0.8vw, 0.85rem);
  column-fill: balance;
}
.gch-fanart-gallery__card {
  display: inline-block; vertical-align: top; width: 100%;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  min-width: 0; margin: 0 0 clamp(0.45rem, 0.8vw, 0.85rem); overflow: hidden;
  border: 1px solid rgba(155,170,195,0.23); border-radius: 11px;
  background: rgba(29,35,49,0.83); box-shadow: 0 5px 16px rgba(0,0,0,0.17);
  transition: transform 130ms ease, border-color 130ms ease;
}
.gch-fanart-gallery__card:hover {transform: translateY(-2px); border-color: rgba(246,201,126,0.64);}
.gch-fanart-gallery__art-link {
  position: relative; display: block; overflow: hidden;
  background: rgba(7,13,21,0.63); text-decoration: none;
}
.gch-fanart-gallery__art-link img {
  display: block; width: 100%; height: auto; object-fit: contain;
  transition: transform 160ms ease;
}
.gch-fanart-gallery__card:hover .gch-fanart-gallery__art-link img {transform: scale(1.018);}
.gch-fanart-gallery__card--nsfw img {filter: blur(17px);}
.gch-fanart-gallery__nsfw {
  position: absolute; z-index: 1; right: 0.55rem; top: 0.55rem;
  padding: 0.25rem 0.45rem; background: rgba(18,24,34,0.85);
  color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: 4px;
}
.gch-fanart-gallery__card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  min-height: 42px; padding: 0.54rem 0.7rem;
}
.gch-fanart-gallery__name {
  min-width: 0; color: inherit; font-size: 0.93rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.gch-fanart-gallery__name:hover {text-decoration: underline;}
.gch-fanart-gallery__rating {white-space: nowrap; flex: 0 0 auto; font-size: 0.82rem; color: #f9d68b; font-variant-numeric: tabular-nums;}
.gch-fanart-gallery__rating small {font-size: 0.75rem; color: #d6d7dc;}
.gch-fanart-gallery__pagination {display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin: 1.6rem 0 2rem; font-variant-numeric: tabular-nums;}
.gch-fanart-gallery__pagination a {
  display: inline-block; border-radius: 8px; padding: 0.55rem 1.1rem;
  background: rgba(50,63,82,0.82); border: 1px solid rgba(160,170,185,0.35);
  color: inherit; text-decoration: none;
}
.gch-fanart-gallery__pagination a:hover {border-color: #f5c97a;}
.gch-fanart-gallery__notice, .gch-fanart-gallery__empty {margin: 2rem 0; text-align: center;}
@media (max-width: 680px) {
  .gch-fanart-gallery {width: calc(100vw - 16px);}
  .gch-fanart-gallery__filters {padding: 0.55rem; gap: 0.45rem;}
  .gch-fanart-gallery__filter {flex: 1 1 calc(50% - 0.5rem); min-width: 0;}
  .gch-fanart-gallery__filter--character {flex-basis: 100%; max-width: none;}
  .gch-fanart-gallery__grid {columns: 2; column-gap: 0.5rem;}
  .gch-fanart-gallery__card {margin-bottom: 0.5rem;}
  .gch-fanart-gallery__card-foot {padding: 0.45rem 0.52rem;}
  .gch-fanart-gallery__rating small {display: none;}
}
@media (max-width: 375px) {
  .gch-fanart-gallery__grid {columns: 1;}
}
@media (prefers-reduced-motion: reduce) {
  .gch-fanart-gallery__card, .gch-fanart-gallery__art-link img {transition: none;}
}

/* Selected character already has a localized page title: no redundant labels on cards. */
.gch-fanart-gallery__card-foot--character { justify-content: flex-end; min-height: 33px; padding: .34rem .65rem; }

/* Explicit contrast remains readable over the bright regional wallpaper. */
.gch-fanart-gallery__head{background:#17243e;color:#fff;border:1px solid #61738c;border-radius:10px;padding:12px 16px}
.gch-fanart-gallery__head h1,.gch-fanart-gallery__reset{color:#fff}
.gch-fanart-gallery__filters{background:#17243ef5;color:#fff}
.gch-fanart-gallery__filter label{color:#fff;opacity:1}