/* レトロゲーム図鑑 v161-QA94 — appearance only; SSR + SPA detail/series.
   Reuses the exact photo embedded in the approved top page.
   No DOM layout, content, link, search, or component behavior is modified. */

/* Soft photographic ambience, implemented as a background only.
   Do not change positioning or containing blocks of the site's controls. */
body.server-page,
body.rgz-index-page {
  background-color: #f3eee4;
  background-image:
    linear-gradient(180deg, rgba(243,238,228,.80) 0%, rgba(243,238,228,.91) 42%, #f3eee4 100%),
    url("/assets/collection-hero-v159.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center 150px, center 150px;
  background-size: 100% 610px, auto 610px;
}

/* Keep the existing white cards, typography, fields, and geometry. The photo
   is visible only as a softened accent in the upper part of each card. */
body.server-page .detail .detail-body,
body.rgz-index-page .sheet {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.83) 100%),
    url("/assets/collection-hero-v159.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: 100% 205px, auto 205px;
  border-color: #ddcfb9;
  box-shadow: 0 8px 24px rgba(69,49,22,.075);
}

/* Shared restrained sepia accents without changing size, order, or spacing. */
body.server-page .detail .kicker,
body.rgz-index-page .kicker,
body.rgz-index-page .count-fig { color: #917044; }
body.server-page .detail .en,
body.server-page .detail .series-lead { border-color: #d8c9b0; }
body.server-page .detail .admin { border-color: #e7d8c0; }
body.rgz-index-page .title-item:hover,
body.rgz-index-page .title-item:focus-visible { background-color: #fbf7ef; }

/* Narrow screens: reduce visual distraction behind title and search. */
@media (max-width: 520px) {
  body.server-page,
  body.rgz-index-page {
    background-position: center 148px, center 148px;
    background-size: 100% 545px, auto 545px;
  }
  body.server-page .detail .detail-body,
  body.rgz-index-page .sheet {
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.975) 42%, rgba(255,255,255,.88) 100%),
      url("/assets/collection-hero-v159.webp");
    background-size: 100% 194px, auto 194px;
  }
}


/* v161: previously missed client-side route (home -> game/series). */
body:has(#detail[style*="block"]) {
  background-color: #f3eee4;
  background-image:
    linear-gradient(180deg, rgba(243,238,228,.80) 0%, rgba(243,238,228,.91) 42%, #f3eee4 100%),
    url("/assets/collection-hero-v159.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center 150px, center 150px;
  background-size: 100% 610px, auto 610px;
}
body:has(#detail[style*="block"]) #detail .detail-body {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.83) 100%),
    url("/assets/collection-hero-v159.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: 100% 205px, auto 205px;
  border-color: #ddcfb9;
  box-shadow: 0 8px 24px rgba(69,49,22,.075);
}
body:has(#detail[style*="block"]) #detail .kicker { color: #917044; }
body:has(#detail[style*="block"]) #detail .en,
body:has(#detail[style*="block"]) #detail .series-lead { border-color: #d8c9b0; }
body:has(#detail[style*="block"]) #detail .admin { border-color: #e7d8c0; }
@media (max-width: 520px) {
  body:has(#detail[style*="block"]) {
    background-position: center 148px, center 148px;
    background-size: 100% 545px, auto 545px;
  }
  body:has(#detail[style*="block"]) #detail .detail-body {
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.975) 42%, rgba(255,255,255,.88) 100%),
      url("/assets/collection-hero-v159.webp");
    background-size: 100% 194px, auto 194px;
  }
}