﻿/* FIFA_FINAL_APPROVED_R1
   FIFA_VISUAL_MATCH_R2
   Visual target: approved Football Pulse FIFA full-page reference.
   Scope: /fifa only. Global portal topbar remains owned by base.html.
*/

html,body{
  margin:0!important;
  padding:0!important;
  min-height:100%!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:#020a12!important;
}

.fpfa{
  --bg:#020a12;
  --panel:#061725;
  --panel2:#081d30;
  --line:rgba(47,174,245,.28);
  --blue:#1e9fff;
  --cyan:#55d7ff;
  --green:#1cf18a;
  --text:#f5f9ff;
  --muted:#98aec2;

  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  color:var(--text)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(18,91,146,.10),transparent 28%),
    linear-gradient(180deg,#020a12 0%,#03101b 60%,#020a12 100%)!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
}

.fpfa *,
.fpfa *::before,
.fpfa *::after{box-sizing:border-box!important}

.fpfa-hero{
  position:relative!important;
  display:block!important;
  min-height:430px!important;
  height:430px!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(54,184,255,.22)!important;
}

.fpfa-hero-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 56%!important;
  filter:brightness(.76) saturate(1.02) contrast(1.08)!important;
}

.fpfa-hero-shade{
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(1,7,14,.94) 0%,rgba(1,7,14,.76) 36%,rgba(1,7,14,.18) 58%,rgba(1,7,14,.22) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.05) 58%,rgba(0,0,0,.42))!important;
}

.fpfa-hero-inner{
  position:relative!important;
  z-index:2!important;
  width:min(94%,1800px)!important;
  height:430px!important;
  min-height:430px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:48% 52%!important;
  align-items:center!important;
}

.fpfa-copy{
  align-self:center!important;
  padding:34px 0 30px 22px!important;
}

.fpfa-kicker{
  margin:0 0 12px!important;
  color:#9bbddd!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.21em!important;
}

.fpfa-copy h1{
  margin:0!important;
  display:block!important;
  white-space:normal!important;
  font-size:44px!important;
  line-height:.94!important;
  letter-spacing:-.035em!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  text-shadow:0 7px 22px rgba(0,0,0,.42)!important;
}

.fpfa-copy h1 span,
.fpfa-copy h1 em{display:block!important}

.fpfa-copy h1 span{color:#fff!important}

.fpfa-copy h1 em{
  margin-top:3px!important;
  font-style:normal!important;
  background:linear-gradient(90deg,#1da6ff 0%,#49d8ff 46%,#92ff58 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

.fpfa-copy h2{
  margin:13px 0 0!important;
  font-size:17px!important;
  line-height:1.2!important;
  font-weight:700!important;
}

.fpfa-lead{
  margin:12px 0 0!important;
  max-width:610px!important;
  color:#b0c3d6!important;
  font-size:12px!important;
  line-height:1.5!important;
}

.fpfa-actions{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin-top:20px!important;
}

.fpfa-btn{
  height:41px!important;
  min-height:41px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(71,170,238,.48)!important;
  border-radius:7px!important;
  background:rgba(4,18,34,.78)!important;
  color:#eef7ff!important;
  text-decoration:none!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px)!important;
}

.fpfa-btn-primary{
  background:linear-gradient(135deg,#087eff,#24aaff)!important;
  border-color:#259eff!important;
  box-shadow:0 8px 22px rgba(0,111,255,.24)!important;
}

.fpfa-globe-wrap{
  position:relative!important;
  height:430px!important;
  min-height:430px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}

.fpfa-glow{
  position:absolute!important;
  right:9%!important;
  top:2%!important;
  width:65%!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(0,156,255,.34),rgba(0,89,255,.10) 52%,transparent 72%)!important;
  filter:blur(11px)!important;
}

.fpfa-globe-frame{
  position:absolute!important;
  right:10%!important;
  top:18px!important;
  width:min(390px,64%)!important;
  aspect-ratio:1!important;
  overflow:hidden!important;
  border-radius:50%!important;
  background:#020a12!important;
  border:1px solid rgba(91,216,255,.72)!important;
  box-shadow:
    0 0 0 1px rgba(86,211,255,.30),
    0 0 20px rgba(37,185,255,.60),
    0 0 44px rgba(16,94,255,.28)!important;
}

.fpfa-globe{
  position:absolute!important;
  left:-37%!important;
  top:-37%!important;
  width:174%!important;
  height:174%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:saturate(1.42) contrast(1.18) brightness(1.22)!important;
}

.fpfa-routes{
  position:absolute!important;
  z-index:3!important;
  right:4.6%!important;
  top:3px!important;
  width:min(460px,74%)!important;
  height:auto!important;
  pointer-events:none!important;
  filter:drop-shadow(0 0 4px rgba(75,207,255,.62))!important;
}

.fpfa-motto{
  position:absolute!important;
  z-index:4!important;
  right:0!important;
  top:42px!important;
  margin:0!important;
  padding-left:12px!important;
  border-left:2px solid #49d4ff!important;
  color:#afd4f7!important;
  font-size:8px!important;
  line-height:1.45!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
}

.fpfa-confeds{
  position:relative!important;
  width:min(95%,1800px)!important;
  margin:14px auto 0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
}

.fpfa-confed{
  --accent:#39baff;
  position:relative!important;
  display:block!important;
  height:252px!important;
  min-height:252px!important;
  overflow:hidden!important;
  border:1px solid var(--accent)!important;
  border-radius:7px!important;
  background:#061522!important;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:0 9px 23px rgba(0,0,0,.22)!important;
}

.fpfa-confed img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  filter:saturate(1.04) brightness(.88)!important;
}

.fpfa-confed::before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(2,9,18,.01),rgba(2,9,18,.04) 34%,rgba(2,9,18,.96) 88%)!important;
}

.fpfa-region{
  position:absolute!important;
  z-index:3!important;
  left:15px!important;
  top:113px!important;
  color:var(--accent)!important;
  font-size:20px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}

.fpfa-confed>div{
  position:absolute!important;
  z-index:3!important;
  left:15px!important;
  right:42px!important;
  bottom:13px!important;
}

.fpfa-confed strong{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
}

.fpfa-confed small{
  display:block!important;
  margin-top:6px!important;
  color:var(--accent)!important;
  font-size:7px!important;
  line-height:1.25!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}

.fpfa-confed p{
  margin:6px 0 0!important;
  color:#e1ebf4!important;
  font-size:9px!important;
  line-height:1.3!important;
}

.fpfa-confed i{
  position:absolute!important;
  z-index:4!important;
  right:11px!important;
  bottom:13px!important;
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--accent)!important;
  border-radius:50%!important;
  background:rgba(2,10,18,.66)!important;
  font-style:normal!important;
  font-size:21px!important;
}

.fpfa-confed--conmebol{--accent:#58efa2!important}
.fpfa-confed--concacaf{--accent:#f0c64a!important}
.fpfa-confed--caf{--accent:#54e899!important}
.fpfa-confed--afc{--accent:#39baff!important}
.fpfa-confed--ofc{--accent:#a18aff!important}

.fpfa-lower{
  position:relative!important;
  width:min(95%,1800px)!important;
  margin:13px auto 20px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:1.22fr 1fr .82fr!important;
  gap:11px!important;
  align-items:stretch!important;
}

.fpfa-panel{
  position:relative!important;
  display:block!important;
  min-height:326px!important;
  height:326px!important;
  overflow:hidden!important;
  border:1px solid rgba(68,164,230,.32)!important;
  border-radius:7px!important;
  background:linear-gradient(145deg,#061827,#04121f)!important;
}

.fpfa-panel>header{
  height:60px!important;
  padding:12px 16px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}

.fpfa-panel h2{
  margin:0!important;
  font-size:16px!important;
  line-height:1.1!important;
}

.fpfa-panel header p{
  margin:4px 0 0!important;
  color:#8fa9c2!important;
  font-size:9px!important;
}

.fpfa-panel header>span{font-size:22px!important}

.fpfa-panel header>a{
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #2aafff!important;
  border-radius:50%!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:21px!important;
}

.fpfa-video{
  position:relative!important;
  display:block!important;
  height:248px!important;
  margin:0 14px 14px!important;
  overflow:hidden!important;
  border:1px solid rgba(74,176,244,.28)!important;
  border-radius:6px!important;
  color:#fff!important;
}

.fpfa-video>img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  filter:brightness(.84)!important;
}

.fpfa-video::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.78))!important;
}

.fpfa-play{
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:47%!important;
  transform:translate(-50%,-50%)!important;
  width:53px!important;
  height:53px!important;
  display:grid!important;
  place-items:center!important;
  border:1.5px solid #fff!important;
  border-radius:50%!important;
  background:rgba(1,8,16,.58)!important;
  font-size:18px!important;
}

.fpfa-controls{
  position:absolute!important;
  z-index:4!important;
  left:12px!important;
  right:12px!important;
  bottom:9px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  font-size:8px!important;
}

.fpfa-controls i{
  flex:1!important;
  height:2px!important;
  background:rgba(255,255,255,.62)!important;
}

.fpfa-rule-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  padding:0 14px!important;
}

.fpfa-rule-grid a{
  height:103px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  border:1px solid rgba(77,166,231,.27)!important;
  border-radius:6px!important;
  background:linear-gradient(145deg,rgba(16,45,78,.78),rgba(5,20,38,.82))!important;
  color:#eef7ff!important;
  text-decoration:none!important;
  text-align:center!important;
}

.fpfa-rule-grid span{font-size:24px!important}

.fpfa-rule-grid strong{
  font-size:8px!important;
  line-height:1.3!important;
}

.fpfa-rules footer{
  height:45px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 15px!important;
  color:#8ca6bf!important;
  font-size:7px!important;
}

.fpfa-rules footer a{
  color:#28b5ff!important;
  text-decoration:none!important;
  font-weight:900!important;
}

.fpfa-sources nav{
  display:grid!important;
  gap:3px!important;
  padding:0 12px 11px!important;
}

.fpfa-sources nav a{
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:28px 1fr auto!important;
  align-items:center!important;
  gap:7px!important;
  padding:4px 7px!important;
  border:1px solid rgba(77,161,224,.16)!important;
  border-radius:5px!important;
  background:rgba(7,27,49,.68)!important;
  color:#e8f3ff!important;
  text-decoration:none!important;
}

.fpfa-sources nav a>span{
  width:26px!important;
  height:26px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(85,177,236,.22)!important;
  border-radius:5px!important;
}

.fpfa-sources nav strong{
  display:block!important;
  font-size:8px!important;
}

.fpfa-sources nav small{
  display:block!important;
  margin-top:1px!important;
  color:#6f8dab!important;
  font-size:6.5px!important;
}

.fpfa-sources nav b{color:#65bfe9!important}

.fpfa-footer{
  position:relative!important;
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  width:min(95%,1800px)!important;
  height:auto!important;
  min-height:132px!important;
  margin:0 auto!important;
  padding:22px 0 20px!important;
  border-top:1px solid rgba(65,153,215,.20)!important;
  grid-template-columns:210px 1.45fr .75fr .55fr!important;
  gap:25px!important;
  align-items:start!important;
  overflow:visible!important;
}

.fpfa-footer-brand{
  display:grid!important;
}

.fpfa-footer-brand strong{
  font-size:15px!important;
  line-height:1!important;
}

.fpfa-footer-brand b{
  margin-top:4px!important;
  color:#17ef84!important;
  font-size:9px!important;
  letter-spacing:.22em!important;
}

.fpfa-footer-brand small{
  margin-top:4px!important;
  color:#6f8aa6!important;
  font-size:6px!important;
  letter-spacing:.14em!important;
}

.fpfa-footer-copy strong,
.fpfa-footer-nav>strong,
.fpfa-footer-social>strong{
  font-size:9px!important;
}

.fpfa-footer-copy p{
  margin:6px 0 0!important;
  color:#748da5!important;
  font-size:7px!important;
  line-height:1.55!important;
}

.fpfa-footer-nav nav{
  margin-top:8px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px 16px!important;
}

.fpfa-footer-nav a{
  color:#8ca6bf!important;
  text-decoration:none!important;
  font-size:8px!important;
}

.fpfa-footer-social div{
  margin-top:10px!important;
  display:flex!important;
  gap:12px!important;
  color:#eef7ff!important;
  font-weight:800!important;
}

.fpfa-legal{
  position:relative!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  width:min(95%,1800px)!important;
  min-height:42px!important;
  margin:0 auto!important;
  padding:13px 0 16px!important;
  border-top:1px solid rgba(65,153,215,.13)!important;
  justify-content:space-between!important;
  color:#607890!important;
  font-size:6px!important;
}

@media(max-width:1450px){
  .fpfa-copy h1{font-size:40px!important}
  .fpfa-copy h2{font-size:16px!important}
  .fpfa-btn{padding-inline:11px!important;font-size:9px!important}
  .fpfa-confed strong{font-size:16px!important}
}

@media(max-width:1200px){
  .fpfa-hero{height:auto!important;min-height:760px!important}
  .fpfa-hero-inner{height:auto!important;min-height:760px!important;grid-template-columns:1fr!important}
  .fpfa-copy{padding:34px 22px 4px!important}
  .fpfa-globe-wrap{height:360px!important;min-height:360px!important}
  .fpfa-confeds{grid-template-columns:repeat(3,1fr)!important}
  .fpfa-lower{grid-template-columns:1fr 1fr!important}
  .fpfa-sources{grid-column:1/-1!important}
  .fpfa-footer{grid-template-columns:1fr 1fr!important}
}

@media(max-width:900px){
  .fpfa-copy h1{font-size:36px!important}
  .fpfa-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .fpfa-confeds{grid-template-columns:1fr 1fr!important}
  .fpfa-lower{grid-template-columns:1fr!important}
  .fpfa-panel{height:auto!important;min-height:326px!important}
  .fpfa-sources{grid-column:auto!important}
  .fpfa-footer{grid-template-columns:1fr!important}
}

@media(max-width:520px){
  .fpfa-actions{grid-template-columns:1fr!important}
  .fpfa-confeds{grid-template-columns:1fr!important}
  .fpfa-rule-grid{grid-template-columns:1fr!important}
  .fpfa-legal{display:grid!important;gap:8px!important}
}
/* /FIFA_VISUAL_MATCH_R2 */