/* Rankings under the game */
.wgr { margin: 1.6rem 0 0; padding: 1.3rem; border-radius: 20px; color: #e9ebfa;
	background: linear-gradient(180deg, rgba(22, 25, 54, .82), rgba(9, 10, 24, .92)); box-shadow: inset 0 0 0 1px rgba(148, 163, 255, .18), 0 24px 60px -30px rgba(139, 92, 246, .5); }
.wgr-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.wgr-head h2 { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.01em; }
.wgr-live { display: inline-flex; align-items: center; gap: .4rem; font: 800 .68rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: #f87171; }
.wgr-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #f87171; box-shadow: 0 0 10px #f87171; animation: wgr-blink 2s ease-in-out infinite; }
@keyframes wgr-blink { 50% { opacity: .3; } }
.wgr-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wgr-tab { border: 0; border-radius: 999px; padding: .5rem .95rem; cursor: pointer; color: #aab0d6; font: 800 .85rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: rgba(7, 7, 15, .6); box-shadow: inset 0 0 0 1px rgba(148, 163, 255, .22); }
.wgr-tab[aria-pressed="true"] { color: #0b0c1a; background: linear-gradient(90deg, #22d3ee, #a78bfa); box-shadow: none; }
.wgr-you { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.wgr-you:empty { display: none; }
.wgr-stat { flex: 1 1 8.5rem; display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(7, 7, 15, .55); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .25); }
.wgr-stat__l { font: 700 .66rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8f96c2; }
.wgr-stat strong { font: 900 1.5rem/1.1 ui-monospace, Menlo, Consolas, monospace; background: linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wgr-stat .wgr-stat__s { font-size: 1.1rem; }
.wgr-stat small { color: #8f96c2; font-size: .78rem; }
.wgr-note { margin: 0; color: #aab0d6; font-size: .92rem; flex: 1 1 100%; }
.wgr-cta { flex: 0 0 auto; }
.wgr-setc { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wgr-setc .wgp-country { flex: 1 1 12rem; width: auto; padding: .55rem .7rem; }
.wgr-cols, .wgr-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto 7.5rem; gap: .6rem; align-items: center; }
.wgr-cols { padding: 0 .8rem .4rem; font: 700 .64rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: #6b7199; }
.wgr-cols span:nth-child(3), .wgr-cols span:nth-child(4) { text-align: right; }
.wgr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.wgr-row { padding: .55rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.wgr-row.is-top1 { background: linear-gradient(90deg, rgba(251, 191, 36, .16), rgba(255, 255, 255, .02)); }
.wgr-row.is-top2 { background: linear-gradient(90deg, rgba(203, 213, 225, .13), rgba(255, 255, 255, .02)); }
.wgr-row.is-top3 { background: linear-gradient(90deg, rgba(217, 119, 6, .14), rgba(255, 255, 255, .02)); }
.wgr-row.is-me { box-shadow: inset 0 0 0 2px #22d3ee, 0 0 18px rgba(34, 211, 238, .25); }
.wgr-pos { font: 900 .95rem/1 ui-monospace, Menlo, Consolas, monospace; color: #aab0d6; }
.wgr-row.is-top .wgr-pos { font-size: 1.25rem; }
.wgr-who { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.wgr-flag { flex: 0 0 auto; font-size: 1.05rem; }
.wgr-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgr-score { font: 900 1rem/1 ui-monospace, Menlo, Consolas, monospace; color: #fff; text-align: right; white-space: nowrap; }
.wgr-date { font-size: .8rem; color: #8f96c2; text-align: right; white-space: nowrap; }
.wgr-gap { text-align: center; color: #6b7199; line-height: 1; }
.wgr-empty { padding: 1rem; text-align: center; color: #aab0d6; border-radius: 12px; background: rgba(255, 255, 255, .03); }
@media (max-width: 600px) {
	.wgr { padding: 1rem .8rem; border-radius: 16px; }
	.wgr-cols, .wgr-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
	.wgr-cols span:nth-child(4) { display: none; }
	/* The date goes under the name. */
	.wgr-row { padding: .5rem .6rem; row-gap: .15rem; }
	.wgr-pos { grid-row: 1 / 3; }
	.wgr-score { grid-column: 3; grid-row: 1 / 3; }
	.wgr-date { grid-column: 2; grid-row: 2; text-align: left; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .wgr-live::before { animation: none; } }