/* Decorative finish for the released FeatureContext audience.
   Keep layout, card artwork, rating colours and entitlement states intact. */
:root {
  --chrome-ink: #e5eee9;
  --chrome-rule: rgba(193, 218, 202, .28);
  --chrome-panel: #101614;
  --chrome-field: #090f0d;
  --chrome-panel-rule: rgba(222, 237, 230, .15);
  --chrome-surface: linear-gradient(155deg, #dce8e2 0%, #9aada3 18%, #f5faf7 34%, #839a8e 49%, #cbdcd2 55%, #f1f7f3 76%, #a0b4a8 100%);
}

.site-header.has-account-entry {
  position: sticky;
  top: 0;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  background: rgb(0 0 0 / 60%) !important;
  border-bottom-color: var(--chrome-rule);
  box-shadow: 0 1px 0 rgba(221, 241, 230, .04), 0 8px 26px rgba(0, 0, 0, .12);
}
html { scroll-padding-top: 72px; }
@media (min-width: 769px) {
  html { scroll-padding-top: 88px; }
}

.site-header.has-account-entry .account-entry .account-entry-pro:not(.is-pro) {
  background-image: linear-gradient(165deg, #c7ff70, #a3ff12 46%, #8fe209);
  box-shadow: inset 0 1px 0 #e6ffac, inset 0 -1px 0 #70a832, 0 3px 12px #99ff1212;
}

/* Silver typography is limited to display headings; body text stays solid. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .home-page--refresh .hero-title,
  .tb-pro-audience .tb-hero__title,
  .pro-page .pro-hero h1,
  .page-title {
    color: var(--chrome-ink);
    background-image: var(--chrome-surface);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 0 rgba(220, 242, 228, .08), 0 5px 14px rgba(0, 0, 0, .18);
  }
}

.home-page--refresh .hero-title span {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 2px 0 rgba(62, 101, 25, .25);
}

.home-page--refresh .home-hero {
  background-image: radial-gradient(ellipse at 80% 45%, rgba(113, 168, 92, .10), transparent 56%);
  border-bottom-color: var(--chrome-rule);
}

.home-page--refresh .hero-showcase::before,
.home-page--refresh .hero-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% -3%;
  border: 1px solid rgba(185, 217, 197, .22);
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(.74);
  box-shadow: inset 0 1px 0 rgba(238, 255, 246, .10), 0 1px 0 rgba(0, 0, 0, .5);
  pointer-events: none;
}

.home-page--refresh .hero-showcase::after {
  inset: 4% 13%;
  transform: rotate(34deg) scaleX(.82);
  border-color: rgba(172, 219, 164, .14);
}

.home-page--refresh .hero-showcase__halo {
  background: radial-gradient(circle, rgba(190, 222, 196, .12), rgba(139, 255, 74, .07) 42%, transparent 72%);
}

.home-page--refresh .btn-primary,
.home-page--refresh .home-pro__actions .home-pro__cta {
  background-image: linear-gradient(165deg, rgba(231, 255, 185, .4), transparent 46%, rgba(37, 70, 9, .12));
  box-shadow: inset 0 1px 0 rgba(240, 255, 220, .65), inset 0 -1px 0 rgba(43, 85, 14, .28), 0 5px 18px rgba(0, 0, 0, .18);
}

.home-page--refresh .btn-secondary,
.pro-page .secondary-link,
.pro-page .pro-hero-actions a {
  color: #e4eee8;
  border-color: #81978a;
  background-image: linear-gradient(160deg, rgba(202, 227, 214, .12), rgba(202, 227, 214, .015) 45%, rgba(202, 227, 214, .065));
  box-shadow: inset 0 1px 0 rgba(230, 247, 237, .12), 0 3px 12px rgba(0, 0, 0, .15);
}

.home-page--refresh .app-actions__grid,
.home-page--refresh .home-squad-details,
.pro-page .plan {
  border-color: #4c5b51;
  background-image: linear-gradient(145deg, rgba(202, 227, 214, .055), transparent 44%);
  box-shadow: inset 0 1px 0 rgba(230, 247, 237, .08);
}

.home-page--refresh .app-action:hover,
.home-page--refresh .app-action:focus-visible {
  background-image: linear-gradient(125deg, rgba(202, 227, 214, .075), transparent 70%);
}

/* Retire the old lime decoration; keep functional focus and active states. */
.home-page--refresh .hero-content::before,
.home-page--refresh .latest-players-heading::before,
.home-page--refresh .section-header::before { content: none; }
.home-page--refresh .app-action--primary { box-shadow: none; }
.home-page--refresh .section-link { border-bottom-color: var(--chrome-panel-rule); }
.home-page--refresh .section-link:hover { border-bottom-color: var(--chrome-rule); }
@media (max-width: 1100px) {
  .home-page--refresh .app-actions__grid {
    gap: 1px;
    border: 1px solid var(--chrome-panel-rule);
    background: rgba(211, 235, 222, .13);
    box-shadow: none;
  }
  .home-page--refresh .app-action {
    border: 0;
    background-color: #0d1210;
  }
}

.home-page--refresh .home-squad-preview .pitch,
.tb-pro-audience #stepResult .pitch {
  border-color: #8aab95;
  box-shadow: inset 0 1px 0 rgba(233, 255, 240, .3), 0 0 0 1px rgba(5, 12, 8, .85), 0 18px 36px rgba(0, 0, 0, .3);
}

.home-page--refresh .home-pro {
  border-block-color: #4c5b51;
  background-image: radial-gradient(ellipse at 80% 35%, #263c27, #0b120d 58%, #080e0b);
}

.home-page--refresh .home-pro__benefits span {
  border-color: #6b8272;
  box-shadow: inset 0 1px 0 rgba(230, 247, 237, .08);
}

.home-page--refresh .home-pro__media {
  border: 1px solid var(--chrome-rule);
  border-radius: 6px;
}

/* Pricing finish only: keep plan content, dimensions and checkout states intact. */
.pro-page .plan {
  --plan-ink: #eaf1ed;
  --plan-muted: #aebfb5;
  --plan-rule: rgba(211, 235, 222, .13);
  --plan-edge: linear-gradient(145deg, #b1c8bc, #46584e 17%, #27332c 43%, #18231d 66%, #79988a);
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(150deg, #1b2822, #0d1511 38%, #0a100d 72%, #122219) padding-box, var(--plan-edge) border-box;
  box-shadow: inset 0 1px 0 #e0f5e31c, 0 18px 44px #0004;
}
.pro-page .plan.plan-featured {
  --plan-edge: linear-gradient(145deg, #e2f3de, #7ca68c 18%, #395c44 42%, #203529 66%, #b3d77f);
  box-shadow: inset 0 1px 0 #eaffd82b, 0 18px 44px #0004;
}
.pro-page .plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 95% 35% at 100% 0%, #2ddeab38, transparent 75%), radial-gradient(ellipse 70% 25% at 0% 100%, #a3ff1217, transparent 80%), linear-gradient(145deg, #eefcf013, transparent 25%);
  animation: plan-aurora-glow 18s ease-in-out infinite alternate;
}
.pro-page .plan-featured::before {
  background: radial-gradient(ellipse 100% 35% at 100% 0%, #43edaa52, transparent 75%), radial-gradient(ellipse 80% 30% at 0% 100%, #a3ff1221, transparent 80%), linear-gradient(145deg, #eefcf018, transparent 25%);
}
.pro-page .plan-top {
  border-radius: 13px 13px 0 0;
  border-bottom-color: var(--plan-rule);
  background: linear-gradient(110deg, #d9f1e511, #d9f1e503 50%, #d9f1e509);
}
.pro-page .plan-featured .plan-top { color: #dcf8c6; }
.pro-page .plan-edition { color: #b5c7bc; }
.pro-page .plan-saving {
  border-radius: 5px;
  background: linear-gradient(155deg, #e1ffba, #b6f364 55%, #95d243);
  box-shadow: inset 0 1px 0 #f3ffe8a6;
}
.pro-page .plan-feature-icon img { filter: drop-shadow(0 2px 6px #0005); }
.pro-page .plan-feature-check { color: #b5d0bd; }
.pro-page .plan :is(button, .plan-login) {
  border-color: #bde980;
  border-radius: 8px;
  background: linear-gradient(165deg, #d0ff87, #a3ee39 46%, #90cf32);
  box-shadow: inset 0 1px 0 #efffd4b3, inset 0 -1px 0 #466c244d, 0 5px 16px #0003;
}
.pro-page .plan-featured :is(button, .plan-login) {
  background: linear-gradient(165deg, #e1ff9d, #b2fa42 46%, #9add31);
}
.pro-page .plan :is(button, .plan-login):hover {
  background: linear-gradient(165deg, #e6ffbd, #c4ff75 46%, #acf24b);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pro-page .plan h3 {
    background-image: var(--chrome-surface);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@keyframes plan-aurora-glow { from { opacity: .65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pro-page .plan::before { animation: none; }
}
@media (forced-colors: active) {
  .pro-page .plan { border-color: CanvasText; }
  .pro-page .plan::before { display: none; }
  .pro-page .plan h3 { background: none; -webkit-text-fill-color: CanvasText; }
}

@media (max-width: 650px) {
  .home-page--refresh .hero-showcase::before { inset-inline: 3%; }
  .home-page--refresh .hero-showcase::after { border-color: rgba(172, 219, 164, .1); }
}

/* Saturated aurora ribbons: bright corners separated by a dark diagonal valley. */
.has-fluid-ambient {
  position: relative;
  isolation: isolate;
}
.has-fluid-ambient > .fluid-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.has-fluid-ambient > .fluid-ambient::before {
  content: "";
  position: absolute;
  inset: -16%;
  background:
    radial-gradient(ellipse 60% 18% at 78% 90%, rgba(221, 255, 228, .22), transparent 75%),
    radial-gradient(ellipse at 12% 3%, rgba(226, 255, 222, .5), transparent 30%),
    linear-gradient(147deg, #b7ff31 0%, #56f780 12%, #12c9ba 23%, #195645 31%, #06100d 40%, #030807 58%, #123f30 68%, #28d89e 78%, #80fa37 89%, #c7ff83 100%);
  filter: blur(24px);
  opacity: .92;
  transform: translate3d(-1%, -1%, 0) rotate(-2deg) scale(1.02);
  animation: fluid-ambient-drift 36s ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* Localised shade keeps headings readable without washing out the colour edges. */
.has-fluid-ambient > .fluid-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(3, 8, 7, .5), transparent 72%);
}
.has-fluid-ambient .seo-summary {
  background-color: rgba(5, 14, 10, .88);
}
.pro-page .pro-hero > .fluid-ambient::after {
  background: linear-gradient(0deg, #090c0b, transparent 25%), radial-gradient(ellipse at 50% 42%, rgba(3, 8, 7, .5), transparent 72%);
}
@media (max-width: 768px) {
  .has-fluid-ambient > .fluid-ambient::after {
    background:
      radial-gradient(ellipse 80% 22% at 50% 16%, rgba(3, 8, 7, .62), transparent 100%),
      radial-gradient(ellipse at 50% 42%, rgba(3, 8, 7, .5), transparent 72%);
  }
}
.has-fluid-ambient.is-ambient-visible > .fluid-ambient::before { animation-play-state: running; }
.fluid-motion-paused .has-fluid-ambient > .fluid-ambient::before { animation-play-state: paused; }
@keyframes fluid-ambient-drift {
  to { transform: translate3d(2%, 1.5%, 0) rotate(2deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .has-fluid-ambient > .fluid-ambient::before { animation: none; }
}
@media (forced-colors: active) {
  .has-fluid-ambient > .fluid-ambient { display: none; }
}

/* Shared mobile navigation: retain its dimensions, safe area and active state. */
@media (max-width: 768px) {
  .app-bottom-nav {
    background: linear-gradient(165deg, #1b2620 0%, #0c120f 42%, #090c0b 100%);
    border-top-color: #71887a;
    box-shadow: inset 0 1px 0 rgba(226, 245, 234, .12), 0 -8px 24px rgba(0, 0, 0, .2);
  }
  .app-bottom-nav .app-bottom-nav__item { color: #adbbb2; }
  .app-bottom-nav .app-bottom-nav__item.is-active {
    color: var(--accent);
    background: linear-gradient(180deg, rgba(163, 255, 18, .07), transparent 85%);
  }
  .app-bottom-nav .app-bottom-nav__item.is-active::after {
    background: linear-gradient(90deg, #7fa658, #d8ff9e 50%, #a3ff12);
    box-shadow: 0 1px 6px rgba(163, 255, 18, .14);
  }
  .app-bottom-nav .app-bottom-nav__main-icon {
    background: linear-gradient(155deg, #d1ff87, #a3ff12 42%, #87d40b);
    box-shadow: inset 0 1px 0 #eeffc9, inset 0 -1px 0 #719e38, 0 2px 8px #0006;
  }
  .app-bottom-nav .app-bottom-nav__item:focus-visible {
    outline: 2px solid #d6efde;
    outline-offset: -2px;
  }
}

@media (forced-colors: active) {
  .home-page--refresh .hero-title,
  .tb-pro-audience .tb-hero__title,
  .pro-page .pro-hero h1,
  .page-title { background: none; -webkit-text-fill-color: CanvasText; text-shadow: none; }
  .home-page--refresh .hero-showcase::before,
  .home-page--refresh .hero-showcase::after { display: none; }
}