/* A single centerline connects the collectible, its title, and its goal. */
.ff-badge-object{display:block;width:min(100%,216px);height:auto;aspect-ratio:240/260;max-width:100%;position:relative;flex:none;transform:perspective(900px) rotateX(3deg) rotateY(-4deg);filter:drop-shadow(2px 11px 10px #0006)}
.ff-badge-art{display:block;width:100%;height:100%;max-width:100%;overflow:hidden}
.ff-badge--locked{filter:saturate(.65) brightness(.94) drop-shadow(2px 9px 9px #0006)}
.ff-badge--compact{width:88px;height:auto;flex:0 0 88px;aspect-ratio:240/260}
.ff-badge--earned:hover,.training-badge-card:hover .ff-badge--earned,.training-badge-card:hover .ff-badge--locked{transform:perspective(900px) rotateX(-2deg) rotateY(5deg) translateY(-3px);filter:drop-shadow(3px 15px 12px #0007)}
.training-badge-card:hover .ff-badge-glint{animation:ff-collectible-glint 1.1s ease-out both}
.training-badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.training-badge-card{display:flex;flex-direction:column;align-items:stretch;isolation:isolate;position:relative;min-width:0;min-height:0;padding:22px 24px 20px;border:0;background:linear-gradient(160deg,#303735,#1e2623 65%);border-radius:14px;overflow:hidden;box-shadow:inset 0 1px #ffffff0c,0 12px 25px #0003;transform:none;text-align:center}
.training-badge-card.earned{background:linear-gradient(155deg,#384740,#202e28 65%);border:0;box-shadow:inset 0 1px #e7f1db33,0 12px 25px #0003}
.training-badge-card:hover{transform:none}
.badge-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:22px;text-align:left}
.badge-edition{font:9px/1.5 var(--mono);letter-spacing:.05em;color:#b3c0b7;text-transform:uppercase}
.training-badge-card .badge-state{position:static;inset:auto;display:block;font:9px/1.5 var(--mono);letter-spacing:.04em;color:#a9bbb0;margin:0;white-space:nowrap}
.training-badge-card.earned .badge-state{color:#a1e9cd}
.training-badge-card .badge-showcase{display:grid;place-items:center;width:100%;height:248px;flex:none;overflow:hidden;position:relative;margin:7px 0 10px;background:radial-gradient(ellipse at 50% 56%,#dce5d311,transparent 66%)}
.training-badge-card .badge-showcase>.ff-badge-object{width:211px;max-width:100%;height:auto;aspect-ratio:240/260;margin:0}
.badge-card-copy{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;flex:1}
.training-badge-card .badge-card-copy h4{font-size:26px;line-height:1.14;letter-spacing:-.025em;font-weight:600;color:#f0f1e6;margin:0;min-height:60px;max-width:290px;display:grid;place-items:center;text-wrap:balance}
.badge-card-description{font:15px/1.6 var(--sans);color:#b4c1b6;display:block;min-height:48px;max-width:275px;text-wrap:balance}
.badge-card-footer{display:block;width:100%;margin-top:26px;text-align:left}
.badge-progress-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font:9px/1.5 var(--mono);letter-spacing:.055em;color:#a7b9ac}
.training-badge-card .badge-progress-label{font:12px/1.5 var(--mono);letter-spacing:0;color:#e0eade;margin:0}
.training-badge-card .badge-progress-track{margin:9px 0 15px;background:#111e17;height:5px;border-radius:4px;flex:none}
.training-badge-card .badge-progress-track>span{background:#87c4a4;border-radius:4px}
.training-badge-card.earned .badge-progress-track>span{background:#a0e4cd}
.training-badge-card .badge-material-label{display:block;font:10px/1.6 var(--sans);letter-spacing:.01em;color:#95a99b;margin:0;min-height:16px;text-align:center;text-transform:none}
.badge-detail>.ff-badge-object{display:block;width:230px;height:auto;aspect-ratio:240/260;margin:0 auto 22px}
.badge-detail{display:flex;flex-direction:column;align-items:center}
.badge-detail h3{max-width:420px;text-wrap:balance}
.badge-detail>.badge-progress-track{width:100%}
.next-training-badge>.ff-badge-object{display:block;width:86px;height:auto;aspect-ratio:240/260;flex:0 0 86px;margin:0}
.next-training-badge>span:nth-child(2){min-width:0}.next-training-badge strong{line-height:1.2}
.friend-earned-pieces{flex-wrap:wrap;min-height:116px;gap:10px}.friend-earned-pieces>.ff-badge-object{height:auto;aspect-ratio:240/260;width:82px;max-width:29%;margin:0}
.result-new-badge{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px}.result-new-badge .ff-badge-object{width:112px;height:auto;aspect-ratio:240/260;margin:0}.result-new-badge>span:not(.ff-badge-object),.result-new-badge>strong{flex-basis:100%;margin:0}
/* The numbered training pass uses a milled edge and a lacquered face. */
.ff-level-object{background:linear-gradient(130deg,#5c746a 0%,#203a2d 25%,#0f241a 56%,#2b4636 80%,#536c58 100%);border:2px solid #d9e5d4;box-shadow:inset 0 1px 1px #fff9,inset 0 0 0 3px #203c2d,inset 0 0 0 4px #d9ead54d,2px 3px 0 #b0bead,4px 7px 0 #354b3b,7px 15px 20px #0008}.ff-level-object>img{filter:brightness(0) invert(1) drop-shadow(0 1px 0 #a7ba9e) drop-shadow(0 3px 2px #0009)}.ff-level-number{color:#fff8dd;text-shadow:0 1px 0 #fff5,0 3px 2px #000b}.ff-level-number>small{color:#b3e7ce}.ff-level-edition{color:#dcebd6}.ff-player-pass .player-level h2{color:#f6f4e5}.ff-level-object:after{background:linear-gradient(110deg,transparent 39%,#fff8 49%,transparent 59%)}
/* A distinct membership card, with level and rank outside the portrait. */
.club-member-hero .your-player-pass.dimensional-player-card{width:350px;max-width:100%;padding:26px;color:#f1f2e5;background:linear-gradient(135deg,#435b50 0%,#1f352b 25%,#12271d 62%,#304d3b 100%);border:2px solid #bbcbbb;border-radius:17px;transform:perspective(1000px) rotateY(-5deg) rotateZ(1deg);box-shadow:inset 0 1px 1px #fff8,inset 0 -1px 1px #0008,2px 3px 0 #7b9280,5px 8px 0 #182c21,8px 21px 35px #0008;overflow:hidden}.dimensional-player-card:before{inset:6px;border:1px solid #d0e8ca26;border-radius:10px;z-index:0;pointer-events:none}.dimensional-player-card:after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,transparent 15%,#eef8e914 26%,transparent 37%);pointer-events:none;z-index:0}.dimensional-player-card>div,.dimensional-player-card>button{position:relative;z-index:1}.member-card-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid #c7e1bc25}.member-card-top>span{font:8px/1.7 var(--mono);letter-spacing:.08em;color:#bdcdb9}.member-card-top>img{width:42px;height:42px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 2px 1px #0006);opacity:.9}.member-card-identity{display:flex;gap:16px;align-items:center;margin:24px 0}.member-card-identity>.member-portrait{width:72px;height:80px;flex:0 0 72px;margin:0;border:2px solid #ccd8c0;border-radius:7px;box-shadow:0 3px 0 #203e29,0 7px 14px #0006}.member-card-identity>.member-portrait>img{width:100%;height:100%;object-fit:cover}.member-card-identity>div{min-width:0}.member-card-identity>div>span{display:block;font:8px var(--mono);color:#a3baa1;letter-spacing:.055em}.club-member-hero .member-card-identity h2{font-size:29px;line-height:1.06;letter-spacing:-.035em;color:#f4f2e5;margin:8px 0 0;overflow-wrap:anywhere;text-shadow:0 2px 1px #0006}.member-card-rank{display:grid;grid-template-columns:95px minmax(0,1fr);gap:19px;align-items:center;padding:22px 0;border-top:1px solid #c6e3ba22;border-bottom:1px solid #c6e3ba22}.member-card-level{border-right:1px solid #c6e3ba33;padding-right:15px}.member-card-level>span,.member-card-rank-title>span{display:block;font:9px var(--mono);letter-spacing:.1em;color:#c7dcc1;margin-bottom:10px}.member-card-level>strong{display:block;font:550 59px/1 var(--sans);letter-spacing:-.05em;color:#fff7df;text-shadow:0 1px #fff5,0 4px 3px #0009}.member-card-rank-title>strong{display:block;font:600 29px/1.06 var(--sans);letter-spacing:-.035em;color:#f1f2df;text-shadow:0 2px 2px #0008;overflow-wrap:normal}.member-card-xp{margin:21px 0 18px}.member-card-xp>div:first-child{display:flex;justify-content:space-between;gap:12px;font:7px var(--mono);color:#a8c4a3;line-height:1.5}.member-card-xp>div:last-child{height:6px;background:#0b2015;border-radius:3px;overflow:hidden;margin-top:10px;box-shadow:inset 0 1px 2px #0007}.member-card-xp i{height:100%;display:block;background:linear-gradient(90deg,#70c5a6,#d8f2bd)}.club-member-hero .dimensional-player-card .subtle-link{display:block;margin:0;padding:10px 0 0;border:0;min-height:35px;text-align:left;color:#d7ebcc;font-size:13px;line-height:1.4}
@media(max-width:1000px){.training-badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.club-member-hero .your-player-pass.dimensional-player-card{width:325px}.member-card-rank-title>strong{font-size:27px}}
@media(max-width:600px){.training-badge-grid{grid-template-columns:1fr;gap:18px}.training-badge-card{padding:23px}.training-badge-card .badge-showcase{height:240px;margin:8px 0 10px}.training-badge-card .badge-showcase>.ff-badge-object{width:208px}.training-badge-card h4{font-size:26px;min-height:0}.training-badge-card p{font-size:15px;min-height:0;margin-bottom:23px}.training-badge-card .badge-material-label{font-size:10px;min-height:0;margin-bottom:16px}.training-badge-card .badge-state{font-size:10px}.next-training-badge>.ff-badge-object{width:78px;flex-basis:78px;height:auto}.badge-detail>.ff-badge-object{width:220px;height:auto}.result-new-badge .ff-badge-object{width:110px;height:auto}.club-member-hero .your-player-pass.dimensional-player-card{width:100%;max-width:370px;align-self:center;padding:24px;transform:none;margin-top:0}.member-card-rank{grid-template-columns:90px minmax(0,1fr)}.member-card-rank-title>strong{font-size:28px}.member-card-level>strong{font-size:57px}.member-card-xp>div:first-child{font-size:7px;letter-spacing:0}}
@media(hover:none){.ff-badge-object,.training-badge-card:hover .ff-badge--earned,.training-badge-card:hover .ff-badge--locked{transform:none}.ff-badge-glint{animation:none!important}}
@media(prefers-reduced-motion:reduce){.ff-badge-object,.training-badge-card:hover .ff-badge--earned,.training-badge-card:hover .ff-badge--locked,.club-member-hero .your-player-pass.dimensional-player-card{transform:none;transition:none}.ff-badge-glint{animation:none!important;opacity:0}}