/* numbers: each one carries an icon and a row of marks that light up when the strip is reached (.is-in) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(182,222,200,.2);border-block:1px solid rgba(182,222,200,.2);position:relative;z-index:1}
.stat{background:var(--bg);padding:clamp(22px,4vh,40px) clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-content:start;transition:background .4s}
.stat:hover{background:#0a1711}
.stat>.ic{grid-area:1/2;font-size:clamp(1.5rem,2.3vw,2.1rem);color:var(--em);transition:transform .5s var(--ease)}
.stat:hover>.ic{transform:translateY(-3px) rotate(-8deg) scale(1.12)}
.stat strong{grid-area:1/1;font-size:clamp(2.2rem,5.4vw,4.6rem);font-weight:300;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.stat strong sup{font-size:.4em;color:var(--em);vertical-align:.9em;margin-left:.1em}
.stat p{grid-column:1/-1;margin:.9em 0 0;font-size:1rem}

.marks{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:5px;min-height:28px;margin-top:1.1em}
.marks i{display:block;background:var(--line);transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.marks--bars,.marks--cups{flex-wrap:nowrap}
.marks--bars i{flex:0 1 7px;min-width:3px;height:calc(10px + var(--d)*1.2px);border-radius:3px;transform-origin:bottom;transform:scaleY(.3)}
.marks--line i{width:100%;height:5px;border-radius:3px;transform-origin:left;transform:scaleX(.1)}
.marks--cups i{flex:0 1 26px;aspect-ratio:1;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;transform:translateY(6px)}
.marks--flags{gap:10px}
.marks--flags b{display:inline-flex;font-size:1.5rem;opacity:0;transform:translateY(8px) scale(.7);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
.is-in .marks i{background:var(--em);box-shadow:0 0 10px rgba(16,201,139,.45);transform:none}
.is-in .marks--cups i{background:var(--gold);box-shadow:none}
.is-in .marks--flags b{opacity:1;transform:none}

@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}