/* One shared purple-and-pink interaction for cards on every public page. */
body :is(.role-card,.program-card,.hub-paths>a,.hub-game,.update-card,.hub-empty,.hub-story,.hub-team-card,.hub-player-card,.offer-card,.home-feature:not(:has(.hub-story)),.score-related-links>a){
  position:relative;
  transition:transform .28s cubic-bezier(.2,.75,.25,1),border-color .25s ease,box-shadow .28s ease;
}
body :is(.role-card>img,.program-card .image-wrap img,.hub-paths .program-path-photo){transition:transform .6s cubic-bezier(.2,.75,.25,1)}
body :is(.role-card,.program-card,.hub-paths>a,.hub-game,.update-card,.hub-empty,.hub-story,.hub-team-card,.hub-player-card,.offer-card,.home-feature:not(:has(.hub-story)),.score-related-links>a):focus-within{
  z-index:2;
  transform:translateY(-8px) scale(1.015);
  border-color:#e87bcc!important;
  box-shadow:0 0 0 2px #bd83ff,0 0 24px #dd55bb38,0 22px 40px -12px #25103c80!important;
}
body :is(.role-card,.program-card,.hub-paths>a,.hub-game,.update-card,.hub-empty,.hub-story,.hub-team-card,.hub-player-card,.home-feature,.score-related-links>a):focus-visible{outline:3px solid #f4b4e7;outline-offset:4px}
body .role-card:focus-visible>img,
body .program-card:focus-within .image-wrap img,
body .hub-paths>a:focus-visible .program-path-photo{transform:scale(1.055)}
@media(hover:hover) and (pointer:fine){
  body :is(.role-card,.program-card,.hub-paths>a,.hub-game,.update-card,.hub-empty,.hub-story,.hub-team-card,.hub-player-card,.offer-card,.home-feature:not(:has(.hub-story)),.score-related-links>a):hover{
    z-index:2;
    transform:translateY(-8px) scale(1.015);
    border-color:#e87bcc!important;
    box-shadow:0 0 0 2px #bd83ff,0 0 24px #dd55bb38,0 22px 40px -12px #25103c80!important;
  }
  body .role-card:hover>img,
  body .program-card:hover .image-wrap img,
  body .hub-paths>a:hover .program-path-photo{transform:scale(1.055)}
}
@media(hover:none){
  body :is(.role-card,.program-card,.hub-paths>a):hover:not(:focus-within){transform:none}
  body .role-card:hover:not(:focus-within)>img,
  body .program-card:hover:not(:focus-within) .image-wrap img,
  body .hub-paths>a:hover:not(:focus-within) .program-path-photo{transform:none}
}
@media(prefers-reduced-motion:reduce){
  body :is(.role-card,.program-card,.hub-paths>a,.hub-game,.update-card,.hub-empty,.hub-story,.hub-team-card,.hub-player-card,.offer-card,.home-feature,.score-related-links>a),
  body :is(.role-card>img,.program-card .image-wrap img,.hub-paths .program-path-photo){transition:none!important;transform:none!important}
}

/* Brazil keeps the shared card motion with its own flag-color treatment. */
#state-chooser .brazil-card{
  background:linear-gradient(145deg,#009c3b 0%,#007548 48%,#06499b 100%);
  border-color:#ffdf00;
  box-shadow:0 14px 35px #003b5c40;
}
#state-chooser .brazil-card:before{
  background:linear-gradient(90deg,#007440e8 0%,#007440a8 24%,#00744020 60%,transparent 85%),linear-gradient(0deg,#073c8ecc,transparent 54%);
}
#state-chooser .brazil-card:after{background:linear-gradient(90deg,#ffdf00,#25d67a,#47aaff)}
#state-chooser .brazil-card .role-copy strong{color:#ffdf00;text-shadow:0 2px 8px #06458270}
#state-chooser .brazil-card .role-prefix{color:#fff7af}
#state-chooser .brazil-card .role-description{color:#fff}
#state-chooser .brazil-card .role-action{border-top-color:#ffdf0080}
#state-chooser .brazil-card .role-action>span{color:#ffdf00}
#state-chooser .brazil-card .brazil-flag{font-size:2rem;line-height:1}
#state-chooser .brazil-card>img{width:100%;height:100%;object-fit:cover;object-position:67% 28%;filter:none}
#state-chooser .brazil-card .role-copy{max-width:54%}
#state-chooser .brazil-card:focus-visible{outline-color:#ffdf00}

@media(max-width:760px){#state-chooser .brazil-card{height:520px;min-height:520px}#state-chooser .brazil-card>img{object-position:67% 28%}#state-chooser .brazil-card:before{background:linear-gradient(180deg,#00744045,transparent 22%,transparent 48%,#007548e8 76%,#073c8e)}#state-chooser .brazil-card .role-copy{max-width:none}}

/* Destination flag palettes. Desktop reveals flags on interaction; touch shows them by default. */
#state-chooser [data-state="maryland"]{--flag-accent:#f3c524;--flag-glow:#e2394666;--flag-shadow:#4c0d2680;--flag-bar:linear-gradient(90deg,#eaaa00 0 25%,#161616 25% 50%,#fff 50% 75%,#9d2235 75%);background:#3b1320;border-color:#eaaa0080}
#state-chooser [data-state="maryland"]:before{background:linear-gradient(180deg,#21151980,transparent 35%,#571529ad 70%,#561528f5)}
#state-chooser [data-state="connecticut"]{--flag-accent:#f6f8ff;--flag-glow:#81acff55;--flag-shadow:#07367580;--flag-bar:linear-gradient(90deg,#064eae,#fff,#d9af58);background:#073675;border-color:#bfd4ff80}
#state-chooser [data-state="connecticut"]:before{background:linear-gradient(180deg,#04317380,transparent 35%,#033275bd 70%,#043580f5)}
#state-chooser [data-state="south-carolina"]{--flag-accent:#f5f7fa;--flag-glow:#bdd8ee55;--flag-shadow:#001e4780;--flag-bar:linear-gradient(90deg,#002868,#fff);background:#00234c;border-color:#b9cce080}
#state-chooser [data-state="south-carolina"]:before{background:linear-gradient(180deg,#001c4180,transparent 35%,#002044bd 70%,#00244ff5)}
#state-chooser [data-state="brazil"]{--flag-accent:#ffdf00;--flag-glow:#00ba6745;--flag-shadow:#003d9180;--flag-bar:linear-gradient(90deg,#009c3b,#ffdf00,#06499b)}
/* Flag-colored lettering, with a fine light edge to keep dark flag colors readable. */
#state-chooser [data-state="maryland"]{--flag-lettering:linear-gradient(110deg,#f3c524 0% 26%,#171717 26% 48%,#fff 48% 71%,#dc354b 71% 100%)}
#state-chooser [data-state="connecticut"]{--flag-lettering:linear-gradient(110deg,#3576dc 0% 30%,#fff 46% 72%,#e5bf69 88% 100%)}
#state-chooser [data-state="south-carolina"]{--flag-lettering:linear-gradient(110deg,#fff 0% 36%,#c6d7ed 50%,#002868 70% 100%)}
#state-chooser [data-state="brazil"]{--flag-lettering:linear-gradient(110deg,#19be62 0% 24%,#ffdf00 38% 56%,#2869c3 70% 82%,#fff 94% 100%)}
@supports (background-clip:text) or (-webkit-background-clip:text){
 #state-chooser .location-entry .state-card .role-copy strong{width:fit-content;max-width:100%;background-image:var(--flag-lettering);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.45px #ffffffb3;text-shadow:none;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 7px #0008)}
}
#state-chooser .state-card .role-top,#state-chooser .state-card .role-copy{position:relative;z-index:1}
#state-chooser .state-card .role-copy strong,#state-chooser .state-card .role-action>span{color:var(--flag-accent)}
#state-chooser .state-card .role-prefix,#state-chooser .state-card .role-description{color:#f8fbff}
#state-chooser .state-card .role-action{border-top-color:#ffffff66}
#state-chooser .state-card:after{background:var(--flag-bar);z-index:2}
#state-chooser .state-card:focus-visible{outline-color:var(--flag-accent)}
#state-chooser .state-card:focus-within{border-color:var(--flag-accent)!important;box-shadow:0 0 0 2px var(--flag-accent),0 0 26px var(--flag-glow),0 22px 40px -12px var(--flag-shadow)!important}
#state-chooser .state-flag{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
#state-chooser .state-flag>img{position:absolute;inset:-7%;width:114%;height:114%;max-width:none;object-fit:fill;transform-origin:left center;animation:state-flag-wave 5.6s ease-in-out infinite paused}
#state-chooser .state-flag:after{content:'';position:absolute;inset:-10%;background:repeating-linear-gradient(100deg,#fff5 0%,transparent 17%,#00224266 32%,transparent 47%,#fff5 64%);background-size:220% 100%;mix-blend-mode:soft-light;animation:state-flag-folds 5.6s ease-in-out infinite paused}
#state-chooser .state-card:focus-within .state-flag{opacity:.1265;visibility:visible;transition-delay:0s}
#state-chooser .state-card:focus-within .state-flag>img,#state-chooser .state-card:focus-within .state-flag:after{animation-play-state:running}
@media(hover:hover) and (pointer:fine){
 #state-chooser .state-card:hover{border-color:var(--flag-accent)!important;box-shadow:0 0 0 2px var(--flag-accent),0 0 26px var(--flag-glow),0 22px 40px -12px var(--flag-shadow)!important}
 #state-chooser .state-card:hover .state-flag{opacity:.1265;visibility:visible;transition-delay:0s}
 #state-chooser .state-card:hover .state-flag>img,#state-chooser .state-card:hover .state-flag:after{animation-play-state:running}
}
/* A phone has no hover: show each flag immediately, including on focus or tap. */
@media(hover:none),(pointer:coarse),(max-width:760px){
 #state-chooser .state-card .state-flag,
 #state-chooser .state-card:hover .state-flag,
 #state-chooser .state-card:focus-within .state-flag{opacity:.2;visibility:visible;transition:none}
 #state-chooser .state-card .state-flag>img,
 #state-chooser .state-card .state-flag:after{animation-play-state:running}
}
@keyframes state-flag-wave{0%,100%{transform:perspective(800px) translateX(-1%) rotateY(-4deg) skewY(-.8deg)}50%{transform:perspective(800px) translateX(1%) rotateY(4deg) skewY(.8deg)}}
@keyframes state-flag-folds{0%,100%{background-position:0% 50%;transform:translateX(-2%)}50%{background-position:100% 50%;transform:translateX(2%)}}
@media(prefers-reduced-motion:reduce){#state-chooser .state-flag{transition:none}#state-chooser .state-flag>img,#state-chooser .state-flag:after{animation:none!important;transform:none!important}}