.xp{cursor:pointer;border-radius:14px;padding:4px 6px;transition:background .2s,transform .25s var(--pop)}
.xp:hover,.xp:focus-visible{background:var(--card2);outline:none}.xp:active{transform:scale(.98)}
.tour-launch{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--card2);font-weight:900;color:var(--ind);flex:none}
.tour-launch:hover,.tour-launch:focus-visible{border-color:var(--ind);outline:none;transform:rotate(-4deg) scale(1.04)}

.game-scrim{position:fixed;inset:0;z-index:900;background:rgba(8,7,4,.58);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.25s}
.game-scrim.open{opacity:1;visibility:visible}
.league{position:fixed;z-index:910;inset:50% auto auto 50%;width:min(700px,calc(100vw - 28px));max-height:min(800px,calc(100vh - 28px));overflow:auto;transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden;background:var(--card);border:1px solid color-mix(in srgb,var(--ind) 35%,var(--line));border-radius:26px;box-shadow:0 30px 90px rgba(0,0,0,.38);transition:.35s var(--pop)}
.league.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
.league-top{position:relative;overflow:hidden;padding:25px 26px 18px;background:linear-gradient(140deg,color-mix(in srgb,var(--ind) 20%,var(--card)),var(--card) 58%)}
.league-top::after{content:"";position:absolute;width:170px;height:170px;border:28px solid color-mix(in srgb,var(--ind2) 12%,transparent);border-radius:50%;right:-70px;top:-88px}
.league-kicker{font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--ind)}
.league h2{font-size:clamp(34px,7vw,54px);margin-top:6px}.league-sub{color:var(--dim);max-width:46ch;margin-top:6px}
.icon-close{position:absolute;right:18px;top:18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:22px;z-index:2}.icon-close:hover{transform:rotate(8deg);border-color:var(--ind)}
.season{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 26px;border-block:1px solid var(--line);background:var(--card2);font-size:13px;color:var(--dim)}
.season b{color:var(--ink)}.season-clock{font-variant-numeric:tabular-nums;color:var(--ind);font-weight:800}
.league-tier{padding:18px 26px 15px;background:#242239;color:#f8f0dd;border-top:1px solid rgba(255,255,255,.08)}.tier-track{display:flex;align-items:center;gap:17px;min-height:60px}.tier-crest{position:relative;width:74px;height:56px;display:grid;place-items:center;clip-path:polygon(17% 0,83% 0,100% 50%,83% 100%,17% 100%,0 50%);background:linear-gradient(145deg,#d59643,#8f5426);filter:drop-shadow(0 7px 0 #56351f);font:800 16px "Fraunces";letter-spacing:.05em}.tier-crest::before{content:"";position:absolute;inset:7px;clip-path:inherit;border:1px solid rgba(255,244,205,.46);background:linear-gradient(120deg,transparent,rgba(255,255,255,.13),transparent)}.tier-crest b{position:relative}.tier-crest i{position:absolute;bottom:6px;font:800 8px Figtree;letter-spacing:.16em}.tier-lock{width:48px;height:43px;display:grid;place-items:center;clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%);background:#36334f;color:#696581;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);font-size:18px}.tier-lock::after{content:"";width:8px;height:10px;border:3px solid currentColor;border-top-width:2px;border-radius:6px 6px 2px 2px;position:absolute}.tier-name{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-top:13px}.tier-name b,.tier-name small{display:block}.tier-name b{font:800 24px "Fraunces"}.tier-name small{color:#aaa5bf;font-size:11px;margin-top:2px;letter-spacing:.04em}.tier-name strong{color:#e9b94d;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.league-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px 22px 0;background:var(--card)}.league-tabs button{height:38px;border:1px solid var(--line);border-radius:11px;color:var(--dim);font-size:13px;font-weight:800;transition:.25s}.league-tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--bg);box-shadow:0 5px 13px rgba(0,0,0,.14)}
.league-champions{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;padding:18px 28px 11px;background:linear-gradient(180deg,color-mix(in srgb,var(--ind) 7%,var(--card)),var(--card))}.champ{position:relative;text-align:center;padding-top:23px;animation:champ-in .55s var(--pop) both}.champ.c1{order:2}.champ.c2{order:1}.champ.c3{order:3}.champ.c1{padding-bottom:18px}.champ.c2,.champ.c3{padding-bottom:3px}.champ .avatar{width:64px;height:64px;margin:auto;font-size:22px}.champ.c1 .avatar{width:82px;height:82px;font-size:28px;box-shadow:0 0 0 3px #d6a83e,0 8px 20px rgba(0,0,0,.2)}.champ-rank{position:absolute;z-index:4;left:calc(50% - 39px);top:10px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--bg);border:2px solid var(--card);font:800 13px "Fraunces"}.champ.c1 .champ-rank{left:calc(50% - 49px);top:4px;background:#d6a83e;color:#20190f}.champ b,.champ strong{display:block}.champ b{margin-top:9px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.champ strong{color:var(--ind);font-size:12px;margin-top:3px;font-variant-numeric:tabular-nums}
.league-columns{display:grid;grid-template-columns:1fr 112px 58px;gap:12px;padding:6px 31px;color:var(--dim);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.league-columns span:nth-child(2),.league-columns span:last-child{text-align:right}
.league-list{padding:0 18px 12px}.league-row{position:relative;display:grid;grid-template-columns:38px 54px minmax(125px,1fr) 112px 58px;gap:10px;align-items:center;min-height:72px;padding:8px 10px;border:1px solid transparent;border-bottom-color:var(--line);animation:rank-in .45s var(--pop) both}.league-row:nth-child(2){animation-delay:.04s}.league-row:nth-child(3){animation-delay:.08s}.league-row:nth-child(4){animation-delay:.12s}.league-row:nth-child(5){animation-delay:.16s}.league-row:nth-child(6){animation-delay:.2s}.league-row:hover{background:var(--card2);border-radius:15px;transform:translateX(3px)}
.league-row.you{background:color-mix(in srgb,var(--ind) 13%,var(--card));border-color:color-mix(in srgb,var(--ind) 42%,var(--line));border-radius:15px;margin:6px 0;box-shadow:0 7px 20px color-mix(in srgb,var(--ind) 12%,transparent)}.league-row.gold .rank,.league-row.silver .rank,.league-row.bronze .rank{color:#20190f;border-radius:50%;width:29px;height:29px;display:grid;place-items:center}.league-row.gold .rank{background:#f5b938;box-shadow:0 0 0 4px #f5b93822}.league-row.silver .rank{background:#c9d0d5}.league-row.bronze .rank{background:#cf8754}
.rank{font:800 20px "Fraunces";color:var(--dim);text-align:center}.avatar{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--card);box-shadow:0 0 0 2px var(--line),0 5px 12px rgba(0,0,0,.16);font:800 18px "Fraunces";overflow:visible}.avatar::before,.avatar::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.38)}.avatar::before{inset:6px}.avatar::after{width:12px;height:12px;right:5px;top:6px;background:rgba(255,255,255,.2)}.avatar span{position:relative;z-index:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));animation:avatar-wiggle 3s ease-in-out infinite}.avatar i{position:absolute;z-index:2;right:-8px;bottom:-5px;background:var(--ink);color:var(--bg);border:2px solid var(--card);border-radius:7px;padding:2px 4px;font:900 8px Figtree;white-space:nowrap}.avatar.amber{background:linear-gradient(145deg,#e3ad3e,#a96d22)}.avatar.coral{background:repeating-linear-gradient(145deg,#cf6d5b 0 7px,#e38b79 7px 12px)}.avatar.violet{background:linear-gradient(145deg,#74639e,#a28cc8)}.avatar.mint{background:repeating-linear-gradient(18deg,#3f876b 0 8px,#77b99b 8px 16px)}.avatar.sky{background:radial-gradient(circle at 30% 25%,#b9d9e9 0 15%,transparent 16%),linear-gradient(145deg,#4987a7,#7fb6cf)}.avatar.you{background:linear-gradient(145deg,var(--ind2),var(--ind))}
.player b,.player small{display:block}.player b{font-size:14px}.player b em{font:900 8px Figtree;letter-spacing:.09em;color:var(--onacc);background:var(--ind);padding:3px 5px;border-radius:5px;margin-left:5px;vertical-align:2px}.player small{color:var(--dim);font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xp-progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden}.xp-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ind),var(--ind2));animation:xp-fill .8s var(--snap) both;transform-origin:left}.row-xp{text-align:right;font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}.row-xp small{display:block;color:var(--dim);font-weight:800;font-size:9px;letter-spacing:.08em}.league-note{font-size:11px;color:var(--dim);padding:2px 26px 22px;text-align:center}
.promotion{display:grid;grid-template-columns:1fr auto 1fr;gap:11px;align-items:center;padding:8px 18px;color:var(--up);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.promotion i{height:1px;background:var(--up);opacity:.6}.promotion span::before{content:"◆";margin-right:7px;font-size:8px}
@keyframes champ-in{from{opacity:0;transform:translateY(20px) scale(.92)}}@keyframes rank-in{from{opacity:0;transform:translateX(-22px)}}@keyframes xp-fill{from{transform:scaleX(0)}}@keyframes avatar-wiggle{0%,88%,100%{transform:none}92%{transform:rotate(-5deg) scale(1.06)}96%{transform:rotate(5deg) scale(1.06)}}

.tour{position:fixed;inset:0;z-index:950;display:none;pointer-events:none}.tour.open{display:block}.tour-shade{position:absolute;inset:0;background:rgba(8,7,4,.76);transition:clip-path .35s var(--snap)}
.tour-focus{position:fixed;border:3px solid var(--ind2);border-radius:18px;box-shadow:0 0 0 6px color-mix(in srgb,var(--ind2) 22%,transparent),0 0 38px color-mix(in srgb,var(--ind2) 42%,transparent);transition:all .4s var(--snap);pointer-events:none;animation:focus-pulse 1.8s ease-in-out infinite}
.tour-arrow{position:fixed;width:62px;height:46px;color:var(--ind2);filter:drop-shadow(0 5px 10px rgba(0,0,0,.35));transition:all .4s var(--snap)}.tour-arrow svg{width:100%;height:100%;overflow:visible}.tour-arrow path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.tour-arrow.down{transform:rotate(90deg)}.tour-arrow.left{transform:rotate(180deg)}.tour-arrow.up{transform:rotate(-90deg)}
.tour-card{position:fixed;width:min(360px,calc(100vw - 28px));background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.42);pointer-events:auto;transition:top .4s var(--snap),left .4s var(--snap);animation:card-pop .4s var(--pop)}
.tour-mission{display:flex;justify-content:space-between;gap:12px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--ind)}.tour-card h3{font-size:29px;margin:10px 0 8px}.tour-card p{color:var(--body);line-height:1.48}.tour-reward{display:inline-flex;margin-top:13px;padding:5px 10px;border-radius:99px;background:color-mix(in srgb,var(--up) 16%,var(--card));color:var(--up);font-size:12px;font-weight:900}.tour-dots{display:flex;gap:5px;margin:18px 0 14px}.tour-dots i{height:5px;flex:1;border-radius:5px;background:var(--line);transition:.3s}.tour-dots i.done{background:var(--ind)}.tour-actions{display:flex;align-items:center;gap:8px}.tour-actions .skip{margin-right:auto;color:var(--dim);font-size:13px;text-decoration:underline}.tour-actions button:not(.skip){padding:9px 14px;border-radius:11px;font-weight:800;border:1px solid var(--line)}.tour-actions .next{background:var(--ind);color:var(--onacc);border-color:var(--ind)}
.tour-finish{text-align:center}.tour-finish .flag{font-size:44px;display:block;animation:flag-wave .7s var(--pop) 2}.tour-finish h3{font-size:34px}
@keyframes focus-pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--ind2) 12%,transparent),0 0 48px color-mix(in srgb,var(--ind2) 55%,transparent)}}@keyframes card-pop{from{opacity:0;transform:scale(.88) translateY(15px)}}@keyframes flag-wave{50%{transform:rotate(12deg) scale(1.15)}}
@media(max-width:650px){.league-top{padding:22px 20px 16px}.league-tier{padding-inline:16px}.tier-track{gap:9px}.tier-crest{width:64px}.tier-lock{width:39px}.league-tabs{padding-inline:12px}.season{padding-inline:20px}.league-champions{padding-inline:14px}.champ .avatar{width:54px;height:54px}.champ.c1 .avatar{width:68px;height:68px}.league-list{padding-inline:8px}.league-columns{display:none}.league-row{grid-template-columns:30px 48px minmax(90px,1fr) 52px;gap:8px}.league-row .xp-progress{display:none}.avatar{width:43px;height:43px}.row-xp{font-size:14px}.tour-card{padding:18px}.tour-arrow{width:48px}.tour-launch{display:none}}
@media(prefers-reduced-motion:reduce){.champ,.league-row,.avatar span,.xp-progress i,.tour-focus,.tour-card,.tour-finish .flag{animation:none!important}.league,.tour-focus,.tour-arrow,.tour-card{transition:none!important}}
