/*
 * Static storefront gloss.
 *
 * This layer sharpens the existing surfaces without touching product artwork,
 * video, layout, or motion. Keeping the treatment to borders and shadows also
 * avoids adding another live blur/compositing layer while demos are running.
 */

body {
  --oz-gloss-rgb: 8, 124, 167;
}

/* Preserve each product's own color while sharing the same material quality. */
body.home-shine :is(.gp-basketball, .home-products .pc.nba) {
  --oz-gloss-rgb: 241, 38, 130;
}

body.home-shine :is(.gp-shooters, .home-products .pc.cod) {
  --oz-gloss-rgb: 0, 154, 91;
}

body.home-shine :is(.gp-aim, .acc, .home-products .pc.aim) {
  --oz-gloss-rgb: 201, 52, 147;
}

body.home-shine :is(.gp-all, .home-bundle-card) {
  --oz-gloss-rgb: 8, 124, 167;
}

body.product-page:has(.hero.nba) {
  --oz-gloss-rgb: 241, 38, 130;
}

body.product-page:has(.hero.cod) {
  --oz-gloss-rgb: 0, 154, 91;
}

body.product-page:has(.hero.fn) {
  --oz-gloss-rgb: 201, 52, 147;
}

body.product-page:has(.hero.plus) {
  --oz-gloss-rgb: 8, 124, 167;
}

.guide-page.guide-basketball {
  --oz-gloss-rgb: 241, 38, 130;
}

.guide-page.guide-shooters {
  --oz-gloss-rgb: 0, 154, 91;
}

.guide-link-grid > a.is-basketball {
  --oz-gloss-rgb: 241, 38, 130;
}

.guide-link-grid > a.is-shooters {
  --oz-gloss-rgb: 0, 154, 91;
}

body.welcome-page .welcome-step:has(input:checked),
body.welcome-page .welcome-complete {
  --oz-gloss-rgb: 22, 163, 74;
}

body.home-shine .product-details-panel {
  --oz-gloss-rgb: var(--details-rgb);
}

/* Major commerce surfaces receive one crisp highlight and one soft depth cue. */
body.home-shine .home-products .pc,
body.home-shine :is(
  .purchase-assurance,
  .acc,
  .demo-teaser .dt-card,
  .ownership-path,
  .review-scoreboard,
  .review-toolbar
),
body.home-shine .product-details-panel,
body.product-page :where(
  .purchase-command,
  .pnp-hero,
  .install-app,
  .product-review-scoreboard,
  .product-review-report,
  .mod-showcase
) {
  --oz-gloss-line: rgba(var(--oz-gloss-rgb), .18);
  --oz-gloss-inset:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 1px 0 0 rgba(255, 255, 255, .46),
    inset 0 -1px 0 rgba(var(--oz-gloss-rgb), .075),
    inset -1px 0 0 rgba(var(--oz-gloss-rgb), .035);
  --oz-gloss-depth:
    0 1px 2px rgba(10, 27, 34, .035),
    0 14px 34px rgba(var(--oz-gloss-rgb), .075);
  border-color: var(--oz-gloss-line) !important;
  box-shadow: var(--oz-gloss-inset), var(--oz-gloss-depth) !important;
  will-change: auto !important;
}

/* Carry the same finish through demos, guides, support, policies, and welcome. */
body.product-page :is(
  .gd-wrap,
  .gpc-manifest,
  .gpc-library-stats,
  .gpc-library-grid .ucard,
  .gpc-compare .compare-col,
  .gpc-benefits,
  .gpc-final-cta
),
body :is(
  .content-page,
  .guide-page.guide-article,
  .guide-page:not(.guide-article) .guide-hero,
  .guide-link-grid > a,
  .guide-band,
  .guide-checklist,
  .guide-note,
  .compatibility-table dl,
  .welcome-hero,
  .welcome-step,
  .welcome-complete
) {
  --oz-gloss-line: rgba(var(--oz-gloss-rgb), .18);
  --oz-gloss-inset:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 1px 0 0 rgba(255, 255, 255, .46),
    inset 0 -1px 0 rgba(var(--oz-gloss-rgb), .075),
    inset -1px 0 0 rgba(var(--oz-gloss-rgb), .035);
  --oz-gloss-depth:
    0 1px 2px rgba(10, 27, 34, .035),
    0 14px 34px rgba(var(--oz-gloss-rgb), .075);
  box-shadow: var(--oz-gloss-inset), var(--oz-gloss-depth) !important;
  will-change: auto !important;
}

/* Small repeated controls stay lighter so the page does not become over-glossed. */
body.home-shine .hero-rating-proof,
body.home-shine .home-hero .trust-strip,
body.home-shine .game-picker .gp-chip,
body.product-page :where(
  .hero-rating,
  .install-showcase__benefits li,
  .install-showcase__cta
) {
  --oz-gloss-line: rgba(var(--oz-gloss-rgb), .18);
  --oz-gloss-compact:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(var(--oz-gloss-rgb), .06),
    0 1px 2px rgba(10, 27, 34, .03),
    0 7px 18px rgba(var(--oz-gloss-rgb), .055);
  border-color: var(--oz-gloss-line) !important;
  box-shadow: var(--oz-gloss-compact) !important;
  will-change: auto !important;
}

/* Keep existing accent rails and state borders; add depth without recoloring. */
body :is(
  .content-page .callout,
  .content-page .programmer-inline-link,
  .content-primary-link,
  .guide-primary,
  .guide-secondary,
  .guide-steps > li > b,
  .guide-next > a,
  .welcome-logo-mark,
  .welcome-statuses span,
  .welcome-start,
  .welcome-page .btn-secondary,
  .notfound .btn-primary
) {
  --oz-gloss-line: rgba(var(--oz-gloss-rgb), .18);
  --oz-gloss-compact:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(var(--oz-gloss-rgb), .06),
    0 1px 2px rgba(10, 27, 34, .03),
    0 7px 18px rgba(var(--oz-gloss-rgb), .055);
  box-shadow: var(--oz-gloss-compact) !important;
  will-change: auto !important;
}

body.welcome-page .welcome-support {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(var(--oz-gloss-rgb), .14) !important;
  will-change: auto !important;
}

/* Raise the smallest illustrated-interface labels to a readable quality floor. */
body.product-page .install-showcase :where(
  .install-app__rail-title,
  .install-app__script-card small,
  .install-screen__head > div > span,
  .install-programmer__summary small,
  .install-control > span > b small,
  .install-connect__browser > span small,
  .install-connect__browser small,
  .install-connect__link > span,
  .install-connect__zen > span small,
  .install-connect__zen > div small,
  .install-connect__zen > div em,
  .install-flash__slots small,
  .install-flash__slots em,
  .install-flash__timeline > span small,
  .install-flash__receipt small,
  .install-showcase__cta small,
  .install-screen__state
) {
  font-size: clamp(.5rem, 2.1vw, .56rem) !important;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-transparency: reduce) {
  body.home-shine .home-products .pc,
  body.home-shine :is(
    .purchase-assurance,
    .acc,
    .demo-teaser .dt-card,
    .ownership-path,
    .review-scoreboard,
    .review-toolbar
  ),
  body.home-shine .product-details-panel,
  body.home-shine .hero-rating-proof,
  body.home-shine .home-hero .trust-strip,
  body.home-shine .game-picker .gp-chip,
  body.product-page :where(
    .purchase-command,
    .pnp-hero,
    .install-app,
    .gd-wrap,
    .gpc-manifest,
    .gpc-library-stats,
    .gpc-library-grid .ucard,
    .gpc-compare .compare-col,
    .gpc-benefits,
    .gpc-final-cta,
    .product-review-scoreboard,
    .product-review-report,
    .mod-showcase,
    .hero-rating,
    .install-showcase__benefits li,
    .install-showcase__cta
  ),
  body :is(
    .content-page,
    .guide-page.guide-article,
    .guide-page:not(.guide-article) .guide-hero,
    .guide-link-grid > a,
    .guide-band,
    .guide-checklist,
    .guide-note,
    .compatibility-table dl,
    .welcome-hero,
    .welcome-step,
    .welcome-complete,
    .content-page .callout,
    .content-page .programmer-inline-link,
    .content-primary-link,
    .guide-primary,
    .guide-secondary,
    .guide-steps > li > b,
    .guide-next > a,
    .welcome-logo-mark,
    .welcome-statuses span,
    .welcome-start,
    .welcome-page .btn-secondary,
    .notfound .btn-primary
  ) {
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 0 0 1px rgba(var(--oz-gloss-rgb), .07),
      0 8px 22px rgba(10, 27, 34, .06) !important;
  }
}
