.nations-counter { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.nations-counter__words { font-weight: 650; font-size: clamp(1.1rem,2vw,1.6rem); color: var(--ink); }
.nations-counter [data-nations-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nation-flip { position: relative; width: 72px; height: 88px; flex: 0 0 72px; perspective: 360px; font: 750 64px/88px var(--font-mono); color: var(--accent); }
.nation-flip__half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: #191d22; border: 1px solid #49515a; text-align: center; backface-visibility: hidden; }
.nation-flip__half > span { display: block; height: 88px; line-height: 88px; }
.nation-flip__top { top: 0; border-radius: 5px 5px 0 0; border-bottom-color: #080a0c; transform-origin: bottom; }
.nation-flip__bottom { bottom: 0; border-radius: 0 0 5px 5px; border-top-color: #080a0c; background: #121519; transform-origin: top; }
.nation-flip__bottom > span { transform: translateY(-44px); }
.nation-flip__moving-top { z-index: 3; }
.nation-flip__moving-bottom { z-index: 4; transform: rotateX(90deg); }
.nation-flip[data-flipping="true"] .nation-flip__moving-top { animation: nation-flip-top 280ms ease-in forwards; }
.nation-flip[data-flipping="true"] .nation-flip__moving-bottom { animation: nation-flip-bottom 280ms 280ms ease-out forwards; }
@keyframes nation-flip-top { to { transform: rotateX(-90deg); } }
@keyframes nation-flip-bottom { to { transform: rotateX(0); } }
@media(max-width:420px) { .nations-counter { gap: 12px; } .nations-counter__words { font-size: 1.15rem; } }
@media(prefers-reduced-motion:reduce) { .nation-flip__moving-top,.nation-flip__moving-bottom { animation: none !important; } }