*{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 4px)} body{background:var(--bg);color:var(--text);font-family:var(--font-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1.6;font-size:var(--fs-small)} a{color:var(--gold);text-decoration:none} .hero{text-align:center;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:var(--sp-3) var(--sp-5) var(--sp-2);background: radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--blue) 15%,transparent),transparent 55%),radial-gradient(ellipse at 20% 10%,var(--hero-glow),transparent 45%),linear-gradient(180deg,var(--hero-a) 0%,var(--hero-b) 50%,var(--bg) 100%);background-size:200% 200%;animation:heroShift var(--cycle-drift) var(--ease-out) infinite} .hero h1{font-family:var(--font-display);font-size:var(--fs-title-hero);line-height:1.02;font-weight:var(--fw-display);font-synthesis:none;color:var(--white);letter-spacing:-.01em;position:relative;padding-bottom:var(--sp-3);animation:titleGlow var(--cycle-pulse) var(--ease-in-out) infinite} .hero h1::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:var(--thick);background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;background-size:200% 100%;animation:underlineShift var(--cycle-pulse) var(--ease-out) infinite} .hero-shimmer{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden} .hero-shimmer span{position:absolute;width:var(--thick);height:var(--thick);border-radius:var(--radius-pill);background:var(--gold);opacity:0;animation:shimmerFloat var(--ease-linear) infinite} .hero p{color:var(--muted);margin-top:var(--sp-2)} .hero{position:relative} .hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none;z-index:1} .hero:before{display:block;height:58%;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,var(--mask-black) 55%);mask-image:linear-gradient(180deg,transparent,var(--mask-black) 55%)} @media (max-width:767px){.hero:before{height:46%}} .hero:after{clip-path:none;height:40px} @media (max-width:767px){.hero{min-height:auto;padding-top:calc(var(--nav-h) + 16px)}} @media (min-width:768px){.hero{padding-top:32px;padding-bottom:24px}.controls{margin-bottom:var(--sp-3)}.view-tabs{margin-bottom:var(--sp-3)}.stat-row,.top3-strip{margin-bottom:var(--sp-2)}.top3-strip{display:none}} .shell{max-width:var(--frame);margin:auto;padding:var(--sp-4) var(--gutter) var(--sp-7);display:flex;gap:var(--sp-4);align-items:start} .sidebar{width:250px;flex:none;background:linear-gradient(180deg,var(--panel),var(--well));border:var(--hairline) solid var(--line);border-radius:var(--radius-2);padding:var(--sp-3) var(--sp-3);position:sticky;top:calc(var(--nav-h) + 2px);max-height:calc(100vh - 100px);overflow-y:auto;padding-bottom:var(--sp-6)} .sidebar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(transparent,var(--well));pointer-events:none;opacity:0;transition:opacity var(--dur-settled)} .sidebar.scrollable::after{opacity:1} .side-label{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-dim);margin:var(--sp-4) var(--sp-2) var(--sp-1);padding-top:var(--sp-3);border-top:var(--hairline) solid color-mix(in srgb,var(--white) 4%,transparent)} .side-label:first-of-type{border:none;margin-top:0;padding-top:0} .side-chip{font-size:var(--fs-caption);background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--gold-dim);padding:0 var(--sp-2);border-radius:var(--radius-pill)} .side-chip--fav{background:color-mix(in srgb,var(--gold) 15%,transparent);color:var(--gold);font-weight:700} .skill-btn{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-width:0;background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-small);padding:var(--sp-2) var(--sp-2);border-radius:var(--radius-1);cursor:pointer;text-align:left;white-space:normal;overflow-wrap:anywhere;transition:background-color var(--dur-quick),color var(--dur-quick)} .skill-btn:hover{background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--gold)} .skill-btn.active{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 16%,transparent),transparent);color:var(--gold);box-shadow:inset 3px 0 var(--gold),0 0 8px color-mix(in srgb,var(--gold) 8%,transparent)} .skill-btn.focused{outline:var(--thick) solid color-mix(in srgb,var(--gold) 35%,transparent);outline-offset:var(--hairline)} .skill-btn::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:var(--bar);height:60%;background:var(--gold);border-radius:var(--radius-1);transition:transform var(--dur-settled) var(--ease-out)} .skill-btn:hover::before,.skill-btn.active::before{transform:translateY(-50%) scaleY(1)} .skill-icon{min-width:28px;padding:var(--sp-1) var(--sp-1);text-align:center;font-family:var(--font-body);letter-spacing:.06em;font-size:var(--fs-caption);color:var(--gold-dim);background:var(--bg-4);border-radius:var(--radius-1);flex:none} .fav-star{margin-left:auto;flex:none;background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-caption);cursor:pointer;padding:0;transition:opacity var(--dur-quick),color var(--dur-quick);opacity:0} .skill-btn:hover .fav-star,.fav-star:hover{opacity:1;color:var(--gold)} .fav-star:focus-visible{opacity:1;color:var(--gold)} .fav-star.faved{color:var(--gold);opacity:1} .sidebar .nav-group{transition:opacity var(--dur-settled)} .sidebar .nav-group.hidden{display:none} [data-tip]{position:relative} [data-tip]::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-4px);background:var(--tip);border:var(--hairline) solid var(--line-gold);color:var(--text);font:inherit;font-size:var(--fs-caption);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-1);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-quick),transform var(--dur-quick);z-index:var(--z-tooltip,300)} [data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(-8px)} .skill-btn[data-tip]::after{left:auto;right:calc(100% + 8px);top:50%;transform:translateY(-50%)} .skill-btn[data-tip]:hover::after{transform:translateY(-50%)} .main{flex:1;min-width:0} .stat-card{background:linear-gradient(180deg,var(--stat-a),var(--stat-b));border:var(--hairline) solid var(--line);border-radius:var(--radius-2);padding:var(--sp-2) var(--sp-3);border-left:var(--bar) solid var(--line);transition:border-left-color var(--dur-settled) var(--ease-out),border-color var(--dur-settled),box-shadow var(--dur-settled);will-change:opacity} .stat-card:hover{border-color:color-mix(in srgb,var(--gold) 20%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 6%,transparent)} .stat-label{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} .stat-value{font-size:var(--fs-h5);font-weight:700;margin-top:var(--sp-1)} .share-btn{position:absolute;top:var(--sp-3);right:var(--sp-3);background:color-mix(in srgb,var(--white) 4%,transparent);border:var(--hairline) solid var(--line);color:var(--muted);font:inherit;font-size:var(--fs-caption);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-1);cursor:pointer;min-height:44px;transition:color var(--dur-quick),border-color var(--dur-quick)} .share-btn:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%,transparent)} .share-btn.copied{color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent)} @keyframes shimmerFloat{0%{opacity:0;transform:translateY(20px)}20%{opacity:.6}80%{opacity:.4}100%{opacity:0;transform:translateY(-40px)}} @keyframes heroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes titleGlow{0%,100%{text-shadow:0 0 12px color-mix(in srgb,var(--gold) 10%,transparent)}50%{text-shadow:0 0 20px color-mix(in srgb,var(--gold) 25%,transparent),0 0 40px color-mix(in srgb,var(--gold) 8%,transparent)}} @keyframes underlineShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes compareSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}} @keyframes compareSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} @keyframes podiumBounce{0%{transform:scale(.92);opacity:0}50%{transform:scale(1.03)}70%{transform:scale(.98)}100%{transform:scale(1);opacity:1}} @keyframes chipSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}} @keyframes goldPulse{0%,100%{box-shadow:0 0 8px color-mix(in srgb,var(--gold-bright) 8%,transparent)}50%{box-shadow:0 0 18px color-mix(in srgb,var(--gold-bright) 20%,transparent),0 0 40px color-mix(in srgb,var(--gold-bright) 5%,transparent)}} @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} @keyframes shimmerSweep{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeInOv{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} @keyframes fadeInRow{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}} @keyframes titleChange{0%{opacity:0;transform:translateY(4px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes winnerPop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}} @keyframes compareRowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}} .top3-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:var(--sp-3);width:min(1180px,100%);margin:var(--sp-4) auto 0;padding-top:var(--sp-4);border-top:var(--hairline) solid color-mix(in srgb,var(--gold) 28%,transparent);min-height:76px;text-align:left} .top3-chip{position:relative;z-index:2;display:flex;align-items:center;text-align:left;gap:var(--sp-3);width:100%;color:inherit;font-family:inherit;text-transform:none;letter-spacing:normal;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 9%,var(--panel)),var(--panel));border:var(--hairline) solid var(--line);border-radius:var(--radius-2);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-caption);white-space:nowrap;cursor:pointer;transition:border-color var(--dur-quick) var(--ease-out),background-color var(--dur-instant) var(--ease-out);animation:chipSlideIn var(--dur-settled) var(--ease-out) both} .t3-mark{flex:none;font-size:var(--fs-caption);font-weight:700;letter-spacing:.08em;color:var(--gold);border:var(--hairline) solid color-mix(in srgb,var(--gold) 34%,transparent);border-radius:var(--radius-2);padding:var(--sp-1) var(--sp-2)} .t3-body{display:flex;flex-direction:column;min-width:0} .top3-chip .t3-body b{font-size:var(--fs-caption);line-height:var(--lh-tight);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400} .top3-chip .t3-body small{font-size:var(--fs-small);line-height:var(--lh-tight);color:var(--white);margin:var(--sp-1) 0 0;overflow:hidden;text-overflow:ellipsis} .top3-chip .t3-val{color:var(--gold);font-weight:700} .top3-chip:nth-child(1){animation-delay:var(--delay-1)}.top3-chip:nth-child(2){animation-delay:var(--delay-2)}.top3-chip:nth-child(3){animation-delay:var(--delay-3)}.top3-chip:nth-child(4){animation-delay:var(--delay-4)}.top3-chip:nth-child(5){animation-delay:var(--delay-5)} .top3-chip:hover{border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 15%,var(--panel)),var(--panel))} .top3-chip b{color:var(--gold)} .top3-strip .top3-chip{align-items:center;min-height:72px} .top3-chip small{font-size:var(--fs-caption);color:var(--muted);margin-left:var(--sp-1);overflow:hidden;text-overflow:ellipsis} .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)} .podium-card{background:linear-gradient(180deg,var(--raised),var(--well));border:var(--hairline) solid var(--line);border-radius:var(--radius-2);padding:var(--sp-3) var(--sp-3);text-align:center;position:relative;transition:transform var(--dur-settled),border-color var(--dur-settled),box-shadow var(--dur-settled);cursor:pointer;will-change:transform,opacity;animation-name:fadeIn;animation-duration:var(--dur-slow)} .podium-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:0 8px 24px color-mix(in srgb,var(--deep) 40%,transparent),0 0 20px color-mix(in srgb,var(--gold) 8%,transparent)} .podium-card:nth-child(1){background:linear-gradient(180deg,var(--pt-gold),var(--well));border-color:color-mix(in srgb,var(--gold-bright) 15%,transparent);animation:podiumBounce var(--dur-slow) var(--ease-out) both,goldPulse var(--cycle-pulse) var(--ease-in-out) infinite .6s;animation-delay:var(--delay-5)} .podium-card:nth-child(2){background:linear-gradient(180deg,var(--pt-silver),var(--well));border-color:color-mix(in srgb,var(--medal-silver) 10%,transparent);transform:scale(.97);box-shadow:inset 0 -3px color-mix(in srgb,var(--deep) 15%,transparent);animation:podiumBounce var(--dur-slow) var(--ease-out) both;animation-delay:var(--delay-6)} .podium-card:nth-child(3){background:linear-gradient(180deg,var(--pt-bronze),var(--well));border-color:color-mix(in srgb,var(--medal-bronze) 10%,transparent);transform:scale(.94);box-shadow:inset 0 -5px color-mix(in srgb,var(--deep) 20%,transparent);animation:podiumBounce var(--dur-slow) var(--ease-out) both;animation-delay:var(--delay-6)} .podium-card:nth-child(1):hover{border-color:color-mix(in srgb,var(--gold-bright) 35%,transparent)} .podium-card:first-child{position:relative;overflow:visible} .podium-card:first-child::before{content:'';position:absolute;top:100%;left:10%;right:10%;height:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--gold-bright) 8%,transparent),transparent);border-radius:0 0 50% 50%;pointer-events:none} .podium-card:first-child::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--gold-bright) 6%,transparent) 50%,transparent 70%);animation:shimmerSweep var(--cycle-pulse) var(--ease-in-out) infinite;pointer-events:none;border-radius:inherit} .podium-rank{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:var(--sp-1)} .podium-card:nth-child(1) .podium-rank{color:var(--medal-gold)} .podium-card:nth-child(2) .podium-rank{color:var(--medal-silver)} .podium-card:nth-child(3) .podium-rank{color:var(--medal-bronze)} .podium-name{font-size:var(--fs-body);font-weight:700;display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--sp-1);row-gap:var(--sp-1)} .podium-meta{font-size:var(--fs-caption);color:var(--muted);margin-top:var(--sp-1)} .podium-value{font-size:var(--fs-h3);font-weight:700;margin-top:var(--sp-2);color:var(--gold);transition:color var(--dur-settled)} .mobile-quicknav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--quicknav-bg);backdrop-filter:blur(10px);border-top:var(--hairline) solid var(--line);padding:var(--sp-2) var(--sp-3) var(--sp-1);overflow-x:auto} .mobile-quicknav-inner{display:flex;gap:var(--sp-2);min-width:max-content} .mq-btn{background:var(--ctl);border:var(--hairline) solid color-mix(in srgb,var(--white) 10%,transparent);color:var(--muted);font:inherit;font-size:var(--fs-caption);padding:var(--sp-2) var(--sp-3);min-height:44px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-quick),border-color var(--dur-quick),color var(--dur-quick)} .mq-btn.active{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--gold)} .overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start;column-gap:var(--sp-2);row-gap:var(--sp-2);content-visibility:auto;contain-intrinsic-size:auto 56px} .overview-grid>.ov-card:first-child{grid-column:1/-1} .overview-grid>.ov-card.cat-overview:nth-child(2){grid-column:auto} .overview-grid>.ov-card:first-child .ov-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-content:start} .overview-grid>.ov-card:first-child .ov-top{margin-top:var(--sp-3)} .ov-card{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:linear-gradient(180deg,color-mix(in srgb,var(--white) 3%,transparent),transparent 42%),linear-gradient(180deg,var(--raised),var(--well));border:var(--hairline) solid color-mix(in srgb,var(--gold) 20%,var(--line));border-radius:var(--radius-2);padding:var(--sp-3) var(--sp-3);padding-top:var(--sp-2);display:flex;flex-direction:column;text-align:center;cursor:pointer;box-shadow:0 1px 0 color-mix(in srgb,var(--deep) 45%,transparent),inset 0 1px 0 color-mix(in srgb,var(--white) 4%,transparent);transition:border-radius var(--dur-settled) var(--ease-out),transform var(--dur-settled) var(--ease-out),border-color var(--dur-settled) var(--ease-out),box-shadow var(--dur-settled) var(--ease-out);animation:fadeInOv var(--dur-settled) var(--ease-out) both} .ov-card:hover{border-radius:16px 4px 16px 4px;box-shadow:inset 0 0 30px color-mix(in srgb,var(--gold) 3%,transparent);transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 30%,transparent)} .ov-card:active{transform:scale(.97)} .ov-name{font-size:var(--fs-small);font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-2);transition:color var(--dur-settled)} .ov-card:hover .ov-name{letter-spacing:.08em;color:var(--gold)} .ov-card.cat-overview{border-top:var(--thick) solid var(--gold);border-left:var(--thick) solid var(--gold)} .ov-card.cat-professions{border-top:var(--thick) solid var(--green);border-left:var(--thick) solid var(--green)} .ov-card.cat-disciplines{border-top:var(--thick) solid var(--violet);border-left:var(--thick) solid var(--violet)} .ov-card.cat-modes{border-top:var(--thick) solid var(--red);border-left:var(--thick) solid var(--red)} .ov-card.cat-bosses{border-top:var(--thick) solid var(--medal-bronze);border-left:var(--thick) solid var(--medal-bronze)} .ov-card.cat-overview:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--gold) 15%,transparent),0 0 12px color-mix(in srgb,var(--gold) 8%,transparent)} .ov-card.cat-professions:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--green) 15%,transparent),0 0 12px color-mix(in srgb,var(--green) 8%,transparent)} .ov-card.cat-disciplines:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--violet) 15%,transparent),0 0 12px color-mix(in srgb,var(--violet) 8%,transparent)} .ov-card.cat-modes:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--red) 15%,transparent),0 0 12px color-mix(in srgb,var(--red) 8%,transparent)} .ov-card.cat-bosses:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--medal-bronze) 15%,transparent),0 0 12px color-mix(in srgb,var(--medal-bronze) 8%,transparent)} .ov-top{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-1);text-align:left;font-size:var(--fs-caption);color:color-mix(in srgb,var(--text) 72%,var(--muted));margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:var(--hairline) solid color-mix(in srgb,var(--white) 6%,transparent)} .ov-top b{color:var(--text)} .ov-preview{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-1);text-align:left} .ov-prev-row{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-caption);min-width:0} .ov-prev-rank{flex:none;width:1em;text-align:right;color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums} .ov-prev-name{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;color:var(--text)} .ov-prev-val{flex:none;margin-left:auto;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;padding-left:var(--sp-2)} .ov-count{font-variant-numeric:tabular-nums} .ov-preview{margin:var(--sp-1) 0;line-height:1.7;color:color-mix(in srgb,var(--text) 72%,var(--muted))} @media (max-width:767px){.ov-preview{line-height:1.45} .ov-top{margin-top:var(--sp-1);padding-top:var(--sp-1)}} @media (min-width:480px) and (max-width:767px){.ov-card{padding-block:var(--sp-4)}} .avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:700;color:var(--white);flex:none} .ov-card .avatar{transition:transform var(--dur-settled) var(--ease-out)} .ov-card:hover .avatar{transform:scale(1.2)} .ov-card:focus-visible .avatar{transform:scale(1.2)} .side-search{width:100%;background:var(--ctl);border:var(--hairline) solid color-mix(in srgb,var(--white) 10%,transparent);color:var(--text);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-1);font:inherit;font-size:var(--fs-caption);margin-bottom:var(--sp-2);outline:none} .side-search:focus{border-color:color-mix(in srgb,var(--gold) 35%,transparent)} .side-search::placeholder{color:var(--dim-1)} .recent-section{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--hairline) solid color-mix(in srgb,var(--white) 4%,transparent)} .recent-label{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-dim);margin:0 var(--sp-2) var(--sp-1)} .recent-btn{display:flex;align-items:center;gap:var(--sp-2);width:100%;background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-caption);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-1);cursor:pointer;text-align:left;transition:background-color var(--dur-quick),color var(--dur-quick)} .recent-btn:hover{background:color-mix(in srgb,var(--gold) 6%,transparent);color:var(--gold)} .recent-players{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3);padding:var(--sp-2) 0} .board-progress{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2);font-size:var(--fs-caption);color:var(--muted)} .board-progress-bar{flex:1;height:4px;background:color-mix(in srgb,var(--white) 6%,transparent);border-radius:var(--radius-1);overflow:hidden} .board-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:var(--radius-1)} .board-progress-text{font-weight:700;color:var(--gold);min-width:32px;text-align:right} :root{--lb-row-h:48px;--lb-boot-rows:20} .skeleton{background:linear-gradient(90deg,var(--raised) 25%,var(--tip) 50%,var(--raised) 75%);background-size:800px 100%;animation:shimmer var(--cycle-shimmer) infinite var(--ease-linear);height:var(--lb-row-h);margin:0;border-bottom:var(--hairline) solid var(--line)} .lb-boot-reserve{display:block;min-height:calc(var(--lb-row-h) * var(--lb-boot-rows));width:100%} .xp-ring-wrap{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) 0 var(--sp-3)} .xp-ring{position:relative;width:64px;height:64px;flex:none} .xp-ring svg{width:100%;height:100%;transform:rotate(-90deg)} .xp-ring .ring-bg{fill:none;stroke:var(--line);stroke-width:5} .xp-ring .ring-fill{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset var(--dur-slow) var(--ease-out)} .xp-ring-center{position:absolute;inset:0;display:grid;place-items:center} .xp-ring-center b{font-size:var(--fs-body);color:var(--gold)} .xp-ring-info small{font-size:var(--fs-caption);color:var(--muted);text-transform:uppercase;letter-spacing:var(--ls-caps);display:block;margin-bottom:var(--sp-1)} .xp-ring-info span{font-size:var(--fs-small);font-variant-numeric:tabular-nums} .sparkline-wrap{padding:var(--sp-2) 0 var(--sp-3)} .sparkline{width:100%;height:36px} .sparkline polyline{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--gold) 30%,transparent))} .sparkline .spark-area{fill:url(#sparkGrad);stroke:none;opacity:.15} .donut-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-2)} .donut-legend span{font-size:var(--fs-caption);display:flex;align-items:center;gap:var(--sp-1);color:var(--muted)} .donut-legend i{width:10px;height:10px;border-radius:var(--radius-1);display:inline-block} .donut-wrap{display:flex;justify-content:center;padding:var(--sp-3) 0 var(--sp-4)} .donut{position:relative;width:120px;height:120px;border-radius:var(--radius-pill)} .donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center} .donut-center b{font-size:var(--fs-h5);display:block} .donut-center small{font-size:var(--fs-caption);color:var(--muted);display:block;margin-top:var(--sp-1)} .compare-bar{display:none;position:sticky;bottom:0;z-index:50;background:linear-gradient(180deg,var(--ctl),var(--panel));border-top:var(--thick) solid var(--gold-dim);padding:var(--sp-3) var(--sp-4);gap:var(--sp-3);align-items:center;justify-content:center;flex-wrap:wrap} .compare-bar.active{display:flex;animation:compareSlideUp var(--dur-settled) var(--ease-out) both} .compare-bar.full{border-color:color-mix(in srgb,var(--gold) 30%,transparent);box-shadow:0 -4px 16px color-mix(in srgb,var(--gold) 6%,transparent)} .compare-hint{font-size:var(--fs-caption);color:var(--muted);margin-right:auto} .compare-slot{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);color:var(--text)} .compare-slot.filled{color:var(--gold)} .compare-slot.filled b{color:var(--gold)} .compare-vs{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);padding:0 var(--sp-1)} .compare-clear{background:var(--ctl-2);border:var(--hairline) solid color-mix(in srgb,var(--white) 10%,transparent);color:var(--muted);font:inherit;font-size:var(--fs-caption);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-1);cursor:pointer} .compare-clear:hover{color:var(--white);border-color:color-mix(in srgb,var(--white) 30%,transparent)} .compare-panel{display:none;max-width:var(--frame);margin:0 auto var(--sp-4);padding:0 var(--gutter)} .compare-panel.active{display:block;animation:compareSlideDown var(--dur-settled) var(--ease-out) both} .compare-panel-inner{background:linear-gradient(180deg,var(--raised),var(--well));border:var(--hairline) solid var(--line);border-radius:var(--radius-2);padding:var(--sp-4) var(--sp-4);backdrop-filter:blur(4px)} .compare-panel h3{font-family:var(--font-display);font-size:var(--fs-small);color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-3)} .compare-grid{display:grid;grid-template-columns:1fr auto 60px 1fr;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-small)} .compare-grid .cp-label{text-align:center;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:var(--sp-2) 0;border-bottom:var(--hairline) solid var(--line)} .compare-grid .cp-a{text-align:right;font-weight:600} .compare-grid .cp-b{font-weight:600} .compare-grid .cp-val{color:var(--text);font-variant-numeric:tabular-nums} .compare-grid .cp-win{color:var(--gold);text-shadow:0 0 6px color-mix(in srgb,var(--gold) 20%,transparent);animation:winnerPop var(--dur-slow) var(--ease-out) var(--delay-4) both} .compare-grid .cp-delta{text-align:center;font-size:var(--fs-caption);color:var(--muted);font-variant-numeric:tabular-nums;padding:var(--sp-1) 0} .compare-grid .cp-delta.pos{color:var(--green)} .compare-grid .cp-delta.neg{color:var(--red)} .compare-grid .cp-a,.compare-grid .cp-b,.compare-grid .cp-delta{animation:compareRowIn var(--dur-settled) var(--ease-out) both} .compare-grid .cp-a:nth-child(4n+1){animation-delay:var(--delay-1)} .compare-grid .cp-a:nth-child(4n+5){animation-delay:var(--delay-1)} .compare-grid .cp-a:nth-child(4n+9){animation-delay:var(--delay-2)} .random-btn{background:var(--ctl);border:var(--hairline) solid color-mix(in srgb,var(--white) 10%,transparent);color:var(--muted);font:inherit;font-size:var(--fs-small);padding:var(--sp-2) var(--sp-3);height:44px;border-radius:var(--radius-1);cursor:pointer;transition:border-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out)} .random-btn:hover{border-color:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--gold)} .back-top{position:fixed;bottom:var(--sp-8);right:var(--sp-5);z-index:60;width:38px;height:38px;min-width:40px;min-height:40px;border-radius:var(--radius-pill);background:linear-gradient(180deg,var(--tip),var(--panel));border:var(--hairline) solid var(--line-gold);color:var(--gold);font-size:var(--fs-body);cursor:pointer;display:none;align-items:center;justify-content:center;transition:border-color var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out),opacity var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out);opacity:0} .back-top.show{display:flex;opacity:1} .back-top:hover{border-color:color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 15%,transparent);transform:translateY(-2px)} .drawer-overlay{display:none;position:fixed;inset:0;z-index:100;background:var(--scrim-55);backdrop-filter:blur(3px);transition:background var(--dur-settled) var(--ease-out),backdrop-filter var(--dur-settled) var(--ease-out)} .drawer-overlay.open{display:block;animation:fadeIn var(--dur-settled) var(--ease-out) both;background:var(--scrim-65);backdrop-filter:blur(5px)} .drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,90vw);z-index:100;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-left:var(--hairline) solid var(--line);transform:translateX(100%) scale(.98);transition:transform var(--dur-settled) var(--ease-out),opacity var(--dur-settled) var(--ease-out);overflow-y:auto;padding:var(--sp-5) var(--sp-5);opacity:0} .drawer.open{transform:translateX(0) scale(1);opacity:1} .drawer-close{position:absolute;top:var(--sp-4);right:var(--sp-4);background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-small);cursor:pointer;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} .drawer-close:hover{color:var(--white)} .drawer h2{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--gold);position:relative;padding-bottom:var(--sp-2);margin-bottom:var(--sp-1)} .drawer h2::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:var(--thick);background:linear-gradient(90deg,var(--gold),transparent);border-radius:var(--radius-1)} .drawer-sub{font-size:var(--fs-caption);color:var(--muted);margin-bottom:var(--sp-4)} .drawer-profile-wrap{font-size:var(--fs-caption);color:var(--gold-dim);margin:-8px 0 var(--sp-4)} .drawer-profile-link{color:var(--gold-dim);text-decoration:underline dotted} .drawer-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-4)} .drawer-stat{background:color-mix(in srgb,var(--white) 3%,transparent);border:var(--hairline) solid var(--line);border-radius:var(--radius-1);padding:var(--sp-3) var(--sp-3)} .drawer-stat .stat-label{font-size:var(--fs-caption)} .drawer-stat .stat-value{font-size:var(--fs-body);margin-top:var(--sp-1)} .drawer-section{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.14em;color:var(--gold-dim);margin:var(--sp-4) 0 var(--sp-2);position:relative;padding-bottom:var(--sp-1)} .drawer-section::before{content:'';position:absolute;bottom:0;left:0;width:24px;height:var(--hairline);background:linear-gradient(90deg,var(--gold),transparent)} .drawer-row{display:flex;justify-content:space-between;font-size:var(--fs-small);padding:var(--sp-2) 0;border-bottom:var(--hairline) solid color-mix(in srgb,var(--white) 4%,transparent)} .controls{display:flex;gap:var(--sp-3);align-items:center;background:var(--panel);border:var(--hairline) solid var(--line);border-radius:var(--radius-2);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap} .view-tabs{display:flex;gap:var(--sp-1);border-bottom:var(--hairline) solid var(--line);margin-bottom:var(--sp-4);overflow-x:auto} @media (max-width:480px){.view-tabs{flex-wrap:wrap;row-gap:var(--sp-2)}} .view-tab{position:relative;background:none;border:none;color:var(--ink-1);font:inherit;font-size:var(--fs-small);height:44px;padding:0 var(--sp-4);cursor:pointer;white-space:nowrap;text-transform:uppercase;letter-spacing:var(--ls-caps);font-weight:700;border-bottom:var(--thick) solid transparent;transition:color var(--dur-quick) var(--ease-out),background-color var(--dur-instant) var(--ease-out),border-color var(--dur-quick) var(--ease-out)} .back-top{height:44px;padding:0 var(--sp-3)} a:not(nav a){transition-duration:var(--dur-quick)} .view-tab:hover:not(.active){color:var(--gold-2);border-bottom-color:color-mix(in srgb,var(--gold-2) 45%,transparent)} .view-tab:focus-visible:not(.active){color:var(--gold-2);border-bottom-color:color-mix(in srgb,var(--gold-2) 45%,transparent)} .view-tab.active{color:var(--ink-1);font-weight:700} .view-tab.active:hover{color:var(--gold-2)} .view-tab.active::after{content:'';position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:-1px;height:var(--thick);background:var(--gold-2)} .view-tab:focus-visible,.view-tab.active:focus-visible{outline:var(--thick) solid var(--gold-dim);outline-offset:-2px} #skill-picker{min-width:170px} #view-bosses,#view-medals{display:none} body[data-view="bosses"] #view-bosses,body[data-view="medals"] #view-medals{display:block} body[data-board-filter] .podium{display: none} body[data-view="overview"] .main>.board{display:none} body[data-view="bosses"] .top3-strip,body[data-view="medals"] .top3-strip,body[data-view="bosses"] .stat-row,body[data-view="medals"] .stat-row,body[data-view="bosses"] .podium,body[data-view="medals"] .podium,body[data-view="bosses"] .main>.board,body[data-view="medals"] .main>.board,body[data-view="bosses"] #ov-grid-wrap,body[data-view="medals"] #ov-grid-wrap{display:none} body[data-view="bosses"] .controls,body[data-view="medals"] .controls,body[data-view="bosses"] .board-stats,body[data-view="medals"] .board-stats,body[data-view="bosses"] .recent-players,body[data-view="medals"] .recent-players{display:none} .lb-search,.lb-select,.lb-jump,input[type=search],select,input[type=number]{font:inherit;min-height:44px;background:var(--bg-4);border:var(--hairline) solid var(--line-2);color:var(--ink-1);padding:0 var(--sp-3);border-radius:var(--radius-1);outline:none} .lb-search:hover,.lb-select:hover,.lb-jump:hover,input[type=search]:hover,select:hover,input[type=number]:hover{border-color:var(--line-gold)} .lb-search:focus,.lb-select:focus,.lb-jump:focus,input[type=search]:focus,select:focus,input[type=number]:focus{border-color:var(--gold-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 15%,transparent)} .lb-search,input[type=search]{flex:1;min-width:200px} .lb-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a948a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-3) center;padding-right:calc(var(--sp-3) + var(--sp-4))} .updated{font-size:var(--fs-caption)} .board{background:linear-gradient(180deg,var(--raised),var(--well));border:var(--hairline) solid var(--line);border-image:var(--game-frame) 1;border-radius:var(--radius-1);transition:opacity var(--dur-settled) var(--ease-out)} .board caption{text-align:left;font-size:var(--fs-caption);color:var(--muted);padding:var(--sp-2) var(--sp-4)} .board-head .random-btn{padding:var(--sp-1) var(--sp-2);margin-left:var(--sp-2)} @media (max-width:767px){.board thead{display:none}.board tbody tr{display:block;padding:var(--sp-2) var(--sp-3);border-bottom:var(--hairline) solid var(--line)}.board tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:var(--sp-1) 0;border:0;text-align:right}.board tbody td:not(.rank)::before{content:attr(data-l);flex:none;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}} .board-head{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-4) var(--sp-5);border-bottom:var(--hairline) solid var(--line);background:linear-gradient(180deg,var(--board-tint),transparent)} .board-title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-display);font-synthesis:none;color:var(--gold);letter-spacing:.03em;display:flex;align-items:center;gap:var(--sp-2);min-block-size:1lh} .board-title.changing{font-family:var(--font-display);animation:titleChange var(--dur-settled) var(--ease-out) both} .board-count{font-size:var(--fs-caption);color:var(--muted);min-block-size:1lh} .breadcrumb{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-caption);color:var(--muted);position:absolute;top:var(--sp-1);left:var(--sp-4)} .breadcrumb .sep{color:color-mix(in srgb,var(--white) 15%,transparent);margin:0 var(--sp-1)} .breadcrumb span:last-child{color:var(--text)} table{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-variant-numeric:tabular-nums;table-layout:auto} th{text-align:left;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);border-bottom:var(--hairline) solid var(--line);cursor:pointer;user-select:none;white-space:nowrap;background:var(--raised)} th.lb-num{text-align:right} th[data-sort=rank],td.rank{text-align:right;padding-right:var(--sp-5)} .board th:nth-child(3),.board td:nth-child(3){width:20%;white-space:nowrap} .board th:nth-child(4),.board td:nth-child(4){width:104px} .board th:nth-child(5),.board td:nth-child(5){width:176px} th.sorted,th[aria-sort]{color:var(--gold);border-bottom:var(--thick) solid var(--gold)} td{padding:var(--sp-3) var(--sp-4);border-top:var(--hairline) solid color-mix(in srgb,var(--white) 5%,transparent);vertical-align:middle;line-height:1.4} tbody tr{cursor:pointer;animation:fadeInRow var(--dur-slow) var(--ease-out) both;contain:layout style} tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--white) 1.5%,transparent)} tbody tr:hover td{background:color-mix(in srgb,var(--gold) 6%,transparent)} tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--gold) 45%,transparent)} .player-name{display:inline-block;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} .rank{width:72px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums} .rank-1{color:var(--medal-gold)} .rank-2{color:var(--medal-silver)} .rank-3{color:var(--medal-bronze)} td.lb-num,th.lb-num{white-space:nowrap} tbody tr:nth-child(5n) td{border-bottom:var(--hairline) solid color-mix(in srgb,var(--white) 5%,transparent)} .player-name{font-weight:600;transition:text-shadow var(--dur-settled)} tbody tr:hover .player-name{text-shadow:0 0 6px color-mix(in srgb,var(--gold) 30%,transparent)} tbody tr:focus-visible td{background:color-mix(in srgb,var(--gold) 6%,transparent)} tbody tr:focus-visible td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--gold) 45%,transparent)} tbody tr:focus-visible .player-name{text-shadow:0 0 6px color-mix(in srgb,var(--gold) 30%,transparent)} tbody td mark{background:color-mix(in srgb,var(--gold) 28%,transparent);color:inherit;border-radius:2px;padding:0 var(--sp-1)} .mode-badge{display:inline-block;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-1);background:color-mix(in srgb,var(--white) 6%,transparent);margin-left:var(--sp-2)} .lb-num{text-align:right;font-variant-numeric:tabular-nums} tbody tr td.col-hover{background:color-mix(in srgb,var(--gold) 6%,transparent)} .xp{color:var(--blue);font-family:var(--font-body);font-variant-numeric:tabular-nums} .empty{padding:var(--sp-7) var(--sp-6);text-align:center;color:var(--muted)} .empty-icon{font-size:var(--fs-display);margin-bottom:var(--sp-3);opacity:.3} .empty-title{font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-display);font-synthesis:none;color:var(--text);margin-bottom:var(--sp-2)} .empty-desc{font-size:var(--fs-small);max-width:300px;margin:0 auto} .pager{display:flex;justify-content:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-3);border-top:var(--hairline) solid var(--line)} .pager button,.pager-btn{background:var(--ctl);border:var(--hairline) solid color-mix(in srgb,var(--white) 10%,transparent);color:var(--text);font:inherit;font-size:var(--fs-caption);height:44px;padding:0 var(--sp-3);border-radius:var(--radius-1);cursor:pointer} .pager button:hover:not(:disabled),.pager-btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--gold) 35%,transparent);color:var(--gold)} .pager button:focus-visible:not(:disabled),.pager-btn:focus-visible:not(:disabled){border-color:color-mix(in srgb,var(--gold) 35%,transparent);color:var(--gold)} .pager button:disabled,.pager-btn:disabled{color:var(--muted);border-color:color-mix(in srgb,var(--white) 6%,transparent);cursor:not-allowed} .board-stats{display:flex;min-block-size:calc(1lh + var(--sp-1) * 2 + var(--hairline));flex-wrap:wrap;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:color-mix(in srgb,var(--gold) 3%,transparent);border-bottom:var(--hairline) solid var(--line);font-size:var(--fs-caption);color:var(--muted)} .footer{padding:var(--sp-5);border-top:none;position:relative;background:var(--deep);margin-top:auto;text-align:center;content-visibility:auto;contain-intrinsic-size:100px} .footer::before{content:"";position:absolute;top:0;left:20%;right:20%;height:var(--thick);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 40%,transparent),transparent)} body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;background:url("data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E")} .shell,.hero,.footer{position:relative;z-index:1} .scroll-progress{position:fixed;top:0;left:0;height:var(--thick);background:linear-gradient(90deg,var(--gold-dim),var(--gold));z-index:80;border-radius:0 2px 2px 0;will-change:width} .loading .shell{opacity:0} .shell{transition:opacity var(--dur-settled) var(--ease-out)} body:not(.loading) .shell{opacity:1} .hero,.stat-card,.podium-card{animation:fadeIn var(--dur-slow) var(--ease-out) both} .hero{animation-delay:var(--delay-1)} .stat-card:nth-child(2){animation-delay:var(--delay-2)} .stat-card:nth-child(3){animation-delay:var(--delay-3)} .stat-card:nth-child(4){animation-delay:var(--delay-4)} .stat-value{font-variant-numeric:tabular-nums} .board-type-badge{display:inline-block;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-radius:var(--radius-1);margin-left:var(--sp-2);vertical-align:middle} .board-type-badge.cat-overview{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)} .board-type-badge.cat-professions{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)} .board-type-badge.cat-combat{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue)} .board-type-badge.cat-disciplines{background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--violet)} .board-type-badge.cat-modes{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)} .board-type-badge.cat-bosses{background:color-mix(in srgb,var(--medal-bronze) 12%,transparent);color:var(--medal-bronze)} .context-menu{position:fixed;z-index:var(--z-popover,300);background:var(--ctl);border:var(--hairline) solid color-mix(in srgb,var(--gold) 20%,transparent);border-radius:var(--radius-2);padding:var(--sp-1) 0;min-width:140px;box-shadow:0 4px 16px var(--shadow);display:none} .context-menu.show{display:block} .context-menu button,.cm-btn{display:flex;align-items:center;width:100%;background:none;border:none;color:var(--text);font:inherit;font-size:var(--fs-caption);min-height:44px;padding:var(--sp-2) var(--sp-4);cursor:pointer;text-align:left;transition:background-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out)} .context-menu button:hover,.cm-btn:hover{background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--gold)} .context-menu .sep{height:var(--hairline);background:color-mix(in srgb,var(--white) 6%,transparent);margin:var(--sp-1) 0} .kbd-hints{display:flex;justify-content:flex-end;gap:var(--sp-2);font-size:var(--fs-caption);color:color-mix(in srgb,var(--white) 15%,transparent);padding:var(--sp-3) var(--sp-4) var(--sp-4)} .kbd-hints kbd{display:inline-block;padding:var(--sp-1) var(--sp-1);border:var(--hairline) solid color-mix(in srgb,var(--white) 10%,transparent);border-radius:var(--radius-1);font-family:var(--font-body);font-size:var(--fs-caption);background:var(--kbd-bg)} button,input,select,textarea,optgroup{font-family:var(--font-body)} @media (min-width:600px) and (max-width:767px){.overview-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:767px){.shell{flex-direction:column;align-items:stretch}.main{order:1}.sidebar{order:2;position:relative;width:100%;max-height:none;top:0}.podium{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(2,1fr)}table{font-size:var(--fs-caption)}th,td{padding:var(--sp-2) var(--sp-3)}th[data-sort=rank],td.rank{padding-right:var(--sp-3)}.rank{width:44px}.player-name{max-width:14ch}.board td:first-child,.board th:first-child{position:sticky;left:0;background:var(--panel);z-index:5}tbody tr:nth-child(even) td:first-child{background:var(--panel-2)}.kbd-hints{display:none}} @media (hover:none){.kbd-hints{display:none}} @media (max-width:600px){.mobile-quicknav{display:block}body{padding-bottom:var(--sp-7)}.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-1)}.podium-card{padding:var(--sp-2) var(--sp-1)}.podium-rank{font-size:var(--fs-caption);letter-spacing:.1em}.podium-name{font-size:var(--fs-caption)}.podium-meta{font-size:var(--fs-caption)}.podium-value{font-size:var(--fs-body)}.stat-row{grid-template-columns:1fr 1fr}.board td:nth-child(3),.board th:nth-child(3){width:auto;max-width:16ch;font-size:var(--fs-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xp-bar-wrap{display:none}.board th:nth-child(4),.board td:nth-child(4){width:60px}.board th:nth-child(5),.board td:nth-child(5){width:104px}.controls{gap:var(--sp-2);padding:var(--sp-2)}.lb-search,input[type=search]{flex:1 1 100%;min-width:140px}.view-tabs{-webkit-mask-image:linear-gradient(to right,var(--mask-black) calc(100% - 56px),var(--tab-fade) calc(100% - 24px),transparent);mask-image:linear-gradient(to right,var(--mask-black) calc(100% - 56px),var(--tab-fade) calc(100% - 24px),transparent)}} @media (max-width:480px){.overview-grid{grid-template-columns:1fr}.ov-card{padding:var(--sp-2);padding-top:var(--sp-2);padding-right:var(--sp-2);padding-bottom:var(--sp-2);padding-left:var(--sp-2)}.ov-name{font-size:var(--fs-caption)}.ov-top{font-size:var(--fs-caption)}.view-tabs{flex-wrap:wrap;row-gap:var(--sp-2);-webkit-mask-image:none;mask-image:none}} .sidebar{align-self:flex-start} .overview-grid>.ov-card:last-child:nth-child(5n+1){grid-column:auto} @media (min-width:768px){.overview-grid>.ov-card:last-child:nth-child(5n+1){justify-self:start;width:min(100%,640px)}} @media (max-width:480px){.overview-grid{grid-template-columns:1fr;grid-auto-flow:row}.overview-grid>.ov-card:first-child,.overview-grid>.ov-card.cat-overview:nth-child(2),.overview-grid>.ov-card:last-child:nth-child(5n+1){grid-column:auto}} .print-header{display:none} .print-header .ph-title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-display);font-synthesis:none;color:var(--print-ink);margin-bottom:var(--sp-1)} .print-header .ph-sub{font-size:var(--fs-caption);color:var(--print-muted)} @media print{.print-header{display:block;margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:var(--thick) solid var(--ctl-2)}body{background:var(--print-paper);color:var(--print-ink);font-size:var(--fs-caption);padding-bottom:0}body::after{display:none}.sidebar,.controls,body[data-board-filter] .podium,.podium,.compare-bar,.pager,.back-top,.mobile-quicknav,footer,#board-stats,.stat-row,.top3-strip,.kbd-hints{display:none}.hero{display:block;padding:var(--sp-3);background:none;min-height:auto}.hero h1{font-family:var(--font-display);color:var(--print-ink);text-shadow:none}.hero p{color:var(--print-muted)}.shell{padding:0;display:block}.main{width:100%}.board{border:var(--hairline) solid var(--print-line);background:var(--print-paper);box-shadow:none}.board-head{background:none;border-bottom:var(--thick) solid var(--ctl-2);padding:var(--sp-2)}.board-title{font-family:var(--font-display);color:var(--print-ink);font-size:var(--fs-body)}.breadcrumb{display:none}th{background:none;border-bottom:var(--hairline) solid var(--ctl-2);color:var(--ctl-2);font-size:var(--fs-caption);position:static}td{border-top:var(--hairline) solid var(--print-line-soft);color:var(--print-ink);padding:var(--sp-2) var(--sp-3)}.xp{color:var(--ctl-2)}.rank-1{color:var(--gold-4)}.rank-2{color:var(--dim-2)}.rank-3{color:var(--print-bronze)}.mode-badge{background:var(--print-badge);color:var(--dim-2);border:var(--hairline) solid var(--print-line)}.cls-dot{border:var(--hairline) solid var(--print-faint)}.xp-bar-wrap{display:none}.drawer,.drawer.open,.drawer-overlay,.drawer-overlay.open{display:none}} .top3-chip,.ov-card,.stat-card,tbody tr{animation:none} .podium-card{animation:fadeIn var(--dur-slow) var(--ease-out) both} .podium-card:nth-child(1){animation:fadeIn var(--dur-slow) var(--ease-out) var(--delay-5) both,goldPulse var(--cycle-pulse) var(--ease-in-out) infinite} .podium-card:nth-child(2),.podium-card:nth-child(3){animation:fadeIn var(--dur-slow) var(--ease-out) var(--delay-6) both} .lb-search,.lb-select,.lb-jump,input[type=search],select,input[type=number]{transition:color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out)} .lb-select.lb-select{transition:color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out)} .lb-search:focus-visible,.lb-select:focus-visible,.lb-jump:focus-visible,input[type=search]:focus-visible,select:focus-visible,input[type=number]:focus-visible{border-color:var(--gold-dim)} .lb-search:active,.lb-select:active,.lb-jump:active,input[type=search]:active,select:active,input[type=number]:active{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background-color:var(--raised)} .compare-clear{transition:color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out)} .drawer-close{transition:color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out)} .pager button,.pager-btn{transition:color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),background-color var(--dur-instant) var(--ease-out)} tbody tr td{transition:background-color var(--dur-instant) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out)} tbody tr:focus-visible td{background:color-mix(in srgb,var(--gold) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)} tbody tr:active td{background:color-mix(in srgb,var(--gold) 12%,transparent)} .random-btn:hover:not(:disabled),.drawer-close:hover:not(:disabled),.compare-clear:hover:not(:disabled){background-color:color-mix(in srgb,var(--gold) 10%,transparent)} .back-top:hover:not(:disabled){color:var(--gold-bright);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 15%,transparent),inset 0 0 0 999px color-mix(in srgb,var(--gold) 10%,transparent)} .random-btn:focus-visible,.back-top:focus-visible,.drawer-close:focus-visible,.compare-clear:focus-visible,.pager button:focus-visible,.pager-btn:focus-visible{outline:var(--thick) solid var(--gold-mid);outline-offset:2px} .skill-btn:focus-visible{background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--gold)} .skill-btn:focus-visible::before{transform:translateY(-50%) scaleY(1)} [data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(-8px)} .stat-card:focus-visible{border-color:color-mix(in srgb,var(--gold) 20%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 6%,transparent)} .share-btn:focus-visible{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%,transparent)} .top3-chip:focus-visible{border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 15%,var(--panel)),var(--panel))} .podium-card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:0 8px 24px color-mix(in srgb,var(--deep) 40%,transparent),0 0 20px color-mix(in srgb,var(--gold) 8%,transparent)} .ov-card:focus-visible{border-radius:16px 4px 16px 4px;box-shadow:inset 0 0 30px color-mix(in srgb,var(--gold) 3%,transparent);transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 30%,transparent)} .ov-card:focus-visible .ov-name{letter-spacing:.08em;color:var(--gold)} .recent-btn:focus-visible{background:color-mix(in srgb,var(--gold) 6%,transparent);color:var(--gold)} .random-btn:focus-visible{border-color:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--gold)} .back-top:focus-visible{border-color:color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 15%,transparent);transform:translateY(-2px)} .drawer-close:focus-visible{color:var(--white)} .compare-clear:focus-visible{color:var(--white);border-color:color-mix(in srgb,var(--white) 30%,transparent)} .view-tab:hover{color:var(--ink-1);background:color-mix(in srgb,var(--white) 4%,transparent)} .view-tab:focus-visible{color:var(--ink-1)} .context-menu button:focus-visible,.cm-btn:focus-visible{background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--gold)} .skill-btn:focus-visible .fav-star{opacity:1;color:var(--gold)} .skill-btn[data-tip]:focus-visible::after{transform:translateY(-50%)} .podium-card:nth-child(1):focus-visible{border-color:color-mix(in srgb,var(--gold-bright) 35%,transparent)} .ov-card.cat-overview:focus-visible{box-shadow:0 6px 16px color-mix(in srgb,var(--gold) 15%,transparent),0 0 12px color-mix(in srgb,var(--gold) 8%,transparent)} .ov-card.cat-professions:focus-visible{box-shadow:0 6px 16px color-mix(in srgb,var(--green) 15%,transparent),0 0 12px color-mix(in srgb,var(--green) 8%,transparent)} .ov-card.cat-disciplines:focus-visible{box-shadow:0 6px 16px color-mix(in srgb,var(--violet) 15%,transparent),0 0 12px color-mix(in srgb,var(--violet) 8%,transparent)} .ov-card.cat-modes:focus-visible{box-shadow:0 6px 16px color-mix(in srgb,var(--red) 15%,transparent),0 0 12px color-mix(in srgb,var(--red) 8%,transparent)} .ov-card.cat-bosses:focus-visible{box-shadow:0 6px 16px color-mix(in srgb,var(--medal-bronze) 15%,transparent),0 0 12px color-mix(in srgb,var(--medal-bronze) 8%,transparent)} .share-btn,.compare-clear,.recent-btn{padding-top:var(--sp-2);padding-bottom:var(--sp-2)} .board-head .random-btn{padding-top:var(--sp-2)} .pager-btn{padding:var(--sp-2) var(--sp-3);display:inline-flex;align-items:center;justify-content:center} .back-top{padding:var(--sp-2) var(--sp-3)} .drawer-close{padding:var(--sp-2)} .top3-chip{padding-top:var(--sp-2);padding-bottom:var(--sp-2)} .nav-toggle{padding:var(--sp-2) 0} .board--flush{padding:var(--sp-4)} .ov-prev-dot{--dot:var(--ink-3);display:inline-block;width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--dot);flex:none} .overview-grid>.ov-card--lead{grid-column:auto} .ov-card--lead .ov-name{font-size:var(--fs-h5)} @media (max-width:480px){.overview-grid>.ov-card--lead{grid-column:auto}} .random-btn:focus-visible:not(:disabled),.drawer-close:focus-visible:not(:disabled),.compare-clear:focus-visible:not(:disabled){background-color:color-mix(in srgb,var(--gold) 10%,transparent)} .back-top:focus-visible:not(:disabled){color:var(--gold-bright);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 15%,transparent),inset 0 0 0 999px color-mix(in srgb,var(--gold) 10%,transparent)} .rp-chip{cursor:pointer} .rp-chip:focus-visible{outline:var(--thick) solid var(--gold-mid);outline-offset:2px;color:var(--gold)} #ov-grid-wrap{grid-column:1/-1} @media (min-width:768px) and (max-width:900px){.overview-grid{grid-template-columns:repeat(2,1fr)}} .board-meta .bm-cell{flex:1 1 0} .bm-label{white-space:nowrap;color:var(--ink-2)} .updated,.bm-source .bm-value{color:var(--ink-2)} .random-btn:active:not(:disabled),.compare-clear:active,.pager button:active:not(:disabled),.pager-btn:active:not(:disabled){background-color:color-mix(in srgb,var(--gold) 18%,transparent);border-color:color-mix(in srgb,var(--gold) 45%,transparent)} .drawer-close:active{background-color:color-mix(in srgb,var(--gold) 18%,transparent)} .back-top:active{border-color:color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 15%,transparent),inset 0 0 0 999px color-mix(in srgb,var(--gold) 18%,transparent)} .random-btn,.pager button,.pager-btn{min-width:44px;min-height:44px} .compare-clear{min-width:44px;min-height:44px} .view-tab::after{content:'';position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:-1px;height:var(--thick);background:var(--gold-2);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-quick) var(--ease-out)} .view-tab.active::after{transform:scaleX(1)} .view-tab:active{color:var(--gold-dim);background-color:color-mix(in srgb,var(--gold) 8%,transparent)} .view-tab.active:active{color:var(--gold-dim);background-color:color-mix(in srgb,var(--gold) 8%,transparent)} .skill-btn:active{background-color:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)} .fav-star:active{color:var(--gold-dim)} .lb-select{cursor:pointer} .skeleton{background-image:linear-gradient(90deg,color-mix(in srgb,var(--parchment) 6%,var(--bg-deep)) 25%,color-mix(in srgb,var(--parchment) 15%,var(--bg-deep)) 50%,color-mix(in srgb,var(--parchment) 6%,var(--bg-deep)) 75%)} .skill-btn.active:hover{background-color:color-mix(in srgb,var(--gold) 8%,transparent)} .skill-btn.active:focus-visible{background-color:color-mix(in srgb,var(--gold) 8%,transparent)} .skill-btn.active:active{background-color:color-mix(in srgb,var(--gold) 16%,transparent)} .skill-btn{transition:background-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)} .stat-card{transition:border-left-color var(--dur-settled) var(--ease-out),border-color var(--dur-settled) var(--ease-out),box-shadow var(--dur-settled) var(--ease-out)} .sidebar::after{transition:opacity var(--dur-settled) var(--ease-out)} .fav-star{transition:opacity var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)} .sidebar .nav-group{transition:opacity var(--dur-settled) var(--ease-out)} [data-tip]::after{transition:opacity var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)} .share-btn{transition:color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out),background-color var(--dur-quick) var(--ease-out)} .podium-card{transition:transform var(--dur-settled) var(--ease-out),border-color var(--dur-settled) var(--ease-out),box-shadow var(--dur-settled) var(--ease-out)} .podium-value{transition:color var(--dur-settled) var(--ease-out)} .mq-btn{transition:background-color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)} .ov-name{transition:color var(--dur-settled) var(--ease-out)} .recent-btn{transition:background-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)} .player-name{transition:text-shadow var(--dur-settled) var(--ease-out)} .share-btn:active,.mq-btn:active,.recent-btn:active{background-color:color-mix(in srgb,var(--gold) 18%,transparent);border-color:color-mix(in srgb,var(--gold) 45%,transparent)} .site-brand{background:linear-gradient(var(--gold),var(--gold-bright) 42%,var(--gold-dark))} .lb-head{max-width:var(--frame);margin:0 auto;padding:calc(var(--nav-h) + var(--sp-2)) var(--gutter) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)} .lb-title{font-family:var(--ff-display),"Palatino Linotype",Georgia,serif;font-weight:var(--fw-display,400);font-synthesis:none;font-size:var(--fs-h3);line-height:1.02;letter-spacing:-.01em;color:var(--white)} .lb-hero .lb-title{font-family:var(--font-display);font-size:var(--fs-display)} .lb-kicker{font-size:var(--fs-small);font-weight:700;letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--gold-bright);margin:0} .lb-sub{font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-tight);max-width:448px} .lb-hero{gap:var(--sp-2) var(--sp-3)} .lb-hero .lb-sub{margin-top:var(--sp-1)} .lb-head{position:relative;z-index:0;border-bottom:var(--hairline) solid var(--line-gold)} .lb-head::before{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:-1;pointer-events:none;background: radial-gradient(115% 200% at 20% 115%,color-mix(in srgb,var(--gold) 74%,transparent),transparent 60%),radial-gradient(115% 200% at 80% 115%,color-mix(in srgb,var(--gold-dim) 80%,transparent),transparent 60%)} @media (max-width:767px){.lb-head{padding:calc(var(--nav-h) + var(--sp-4)) var(--gutter) 0;gap:var(--sp-1) var(--sp-3)}} .lb-select{transition:border-color .15s ease} .lb-select:hover{border-color:var(--gold-dim)} [data-board="Total Wealth"] .ov-prev-val::after{content:'g'} .ov-card:not(:first-child) .ov-top{display:none} .ov-card{position:relative} body .lb-head{background-image:none} body .lb-head{padding-bottom:var(--sp-3)} @media (min-width:768px){.podium{grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr))}} .lb-band{padding-block:var(--sp-7)} .view-tabs{margin-bottom:var(--sp-3)} @media (max-width:767px){.hero{padding-bottom:var(--sp-2)}.view-tabs{margin-bottom:var(--sp-3)}} @media (max-width:1023px){.lb-band{padding-block:var(--sp-6)}} .controls{padding:var(--sp-3) var(--sp-3);gap:var(--sp-3);margin-bottom:var(--sp-3)} .podium{gap:var(--sp-3)} @media (max-width:767px){.shell{padding:var(--sp-4) var(--gutter) var(--sp-6)}} .board-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);padding:var(--sp-3) var(--sp-4);border-bottom:var(--hairline) solid var(--line);font-size:var(--fs-caption);line-height:var(--lh-tight)} .bm-cell{display:inline-flex;align-items:baseline;gap:var(--sp-2);min-width:0} .bm-label{text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--ink-3);flex:none} .bm-value{color:var(--ink-1);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bm-num{font-variant-numeric:tabular-nums} .bm-source .bm-value{color:var(--muted);font-weight:400;font-style:italic} .bm-source{margin-left:auto} .board-meta{display:none} @media (max-width:600px){.board-meta{display:flex}.board-meta .bm-cell{display:none}.board-meta .bm-cell:nth-child(3){display:inline-flex}} @media (max-width:767px){.board-meta{gap:var(--sp-1) var(--sp-4);padding:var(--sp-2) var(--sp-3)}.bm-source{margin-left:0;flex-basis:100%}} .board-head{padding:var(--sp-4) var(--sp-4)} th{padding:var(--sp-3) var(--sp-4)} td{padding:var(--sp-2) var(--sp-4)} tbody td{height:var(--sp-7)} th[data-sort=rank],td.rank{padding-right:var(--sp-5)} .pager{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)} .player-name{font-size:var(--fs-body);font-weight:700;color:var(--ink-1);max-width:18ch;line-height:var(--lh-tight)} .board td:nth-child(2){white-space:nowrap} .board td:nth-child(4){font-size:var(--fs-body);font-weight:700;color:var(--white);font-variant-numeric:tabular-nums} .rank{font-size:var(--fs-small);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums} .board td:nth-child(3){font-size:var(--fs-caption);color:var(--muted)} .xp{font-size:var(--fs-caption);color:var(--gold-dim);font-variant-numeric:tabular-nums;line-height:var(--lh-tight)} th{color:var(--ink-3)} .lb-num,td.lb-num,th.lb-num{text-align:right;font-variant-numeric:tabular-nums} .board-title{font-family:var(--font-display);font-size:var(--fs-h4);line-height:var(--lh-heading);letter-spacing:var(--tr-heading)} @media (max-width:767px){.player-name{font-size:var(--fs-small);max-width:16ch}.board td:nth-child(4){font-size:var(--fs-small)}td{padding:var(--sp-2) var(--sp-3)}th{padding:var(--sp-2) var(--sp-3)}} .board-stats{gap:var(--sp-2) var(--sp-5);padding:var(--sp-3) var(--sp-4);line-height:var(--lh-tight)} @media (max-width:767px){.controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);align-items:stretch} .controls .lb-search,.controls #search{grid-column:1 / -1} .controls .updated{grid-column:1 / -1;text-align:right} .controls .lb-select,.controls .random-btn{width:100%;min-width:0}} @media (max-width:767px){.board-head{padding:var(--sp-3) var(--sp-3)}} @media (min-width:768px) and (max-width:1023px){.shell{flex-direction:column;align-items:stretch} .main{order:1;width:100%} .sidebar{order:2;position:relative;width:100%;max-height:none;top:0;margin-top:var(--sp-5)}} @media (max-width:600px){.board tbody td[data-l=Mode],.board thead th[data-sort=gameMode]{display:none} .player-name{max-width:12ch}} #board-desc{margin-left:var(--sp-3);padding-left:var(--sp-3);border-left:var(--hairline) solid var(--line-2)} @media (max-width:600px){.board-head{flex-wrap:wrap;gap:var(--sp-2);row-gap:var(--sp-2)} #board-desc{display:none} .rank{width:32px} th[data-sort=rank],td.rank{padding-right:var(--sp-2)} .board th:nth-child(5),.board td:nth-child(5){width:84px}} @media (max-width:600px){.pager{flex-wrap:wrap;justify-content:center;row-gap:var(--sp-2);padding-left:var(--sp-3);padding-right:var(--sp-3)} .board-head{padding-left:var(--sp-3);padding-right:var(--sp-3)}} @media (max-width:600px){.board th,.board td{padding-left:var(--sp-2);padding-right:var(--sp-2)} .player-name{max-width:14ch}} @media (max-width:600px){.board-title{font-family:var(--font-display);min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} @media (max-width:600px){.board-head .random-btn{flex:0 0 auto}} @media (max-width:600px){.board-head [data-tip]::after{display:none}} @media (max-width:600px){.controls{padding:var(--sp-2)} .board-meta{display:none}} .board-head{padding-top:var(--sp-4)} @media (max-width:600px){.board th:last-child,.board td:last-child{padding-right:var(--sp-3)} .board th:nth-child(5),.board td:nth-child(5){width:78px}} .board td:nth-child(2) .player-name{color:var(--white)} .board td:nth-child(4){color:var(--ink-2);font-weight:600} #board-desc{display:none} #clear-filters{color:var(--ink-2)} @media (max-width:600px){.board table{width:100%;max-width:100%}} @media (max-width:1023px){.view-tab{min-height:44px}} .view-tab:hover{color:var(--ink-1)} .lb-search:hover{border-color:var(--gold-dim)} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:var(--dur-none);animation-iteration-count:1;transition-duration:var(--dur-none)} .skill-btn::before,.avatar,.social-btn,[data-tip]::after,.podium-card,.drawer,.drawer-overlay,.view-tab::after,.ring-fill,.hero ::after,.hero ::before{transition:none} .hero,.hero h1,.hero-shimmer,.hero-shimmer span,.hero span,.podium-card,.podium-card:nth-child(1),.podium-card:nth-child(2),.podium-card:nth-child(3),.board-title.changing,.skeleton,.top3-chip,.ov-card,.stat-card,tbody tr,.compare-bar.active,.compare-panel.active,.cp-win,.cp-a,.compare-grid .cp-b,.compare-grid .cp-delta,.hero h1::after,.hero h1::before{animation:none} .hero-shimmer{display:none} .podium-card::before,.podium-card:first-child::after{display:none}} .skill-btn,.view-tab,.random-btn,.board-head .random-btn,.pager button,.pager-btn,.mq-btn,.recent-btn,.back-top,.drawer-close,.top3-chip,.compare-clear,.share-btn,.cm-btn,.context-menu button{padding-left:var(--sp-3);padding-right:var(--sp-3);transition-duration:var(--dur-quick)} .podium-card{display:grid;grid-template-rows:auto auto 1fr auto} .podium-card .podium-value{margin-top:auto} .overview-grid>.ov-card{flex-direction:row;align-items:center;gap:var(--sp-2);text-align:left} .overview-grid>.ov-card .ov-name{margin-bottom:0} .overview-grid>.ov-card:first-child{flex-direction:column;text-align:center} @media (max-width:767px){.board tbody tr{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;column-gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)} .board tbody td{display:block;width:auto;height:auto;padding:0;border:0;text-align:left} .board tbody td:not(.rank)::before{content:none} .board tbody td[data-l="Class"]{display:block;font-size:var(--fs-caption);max-width:16ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)} .board tbody td:first-child{position:static;background:none} .board tbody tr:nth-child(even){background:var(--panel-2)}} .podium-unit{display:block;font-size:var(--fs-caption);font-weight:400;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-1)} .overview-grid>.ov-card:first-child{align-items:stretch} @media (min-width:768px) and (max-width:900px){.overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:600px) and (max-width:767px){.overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:600px){.overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .overview-grid>.ov-card:first-child{grid-column:1/-1} .overview-grid>.ov-card:first-child .ov-preview{display:flex;flex-direction:column;grid-template-columns:none} .overview-grid .ov-name{overflow-wrap:anywhere} .overview-grid>.ov-card{flex-direction:column;text-align:center} .overview-grid>.ov-card .ov-name{font-size:var(--fs-small);letter-spacing:.04em} .overview-grid>.ov-card:not(:first-child) .ov-top{display:none} .sidebar .nav-group>div{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1)} .sidebar .skill-btn{padding:var(--sp-1) var(--sp-2)} .sidebar .skill-icon{display:none} .sidebar #recent-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-1)}} .lb-filters>summary{display:none} @media (max-width:767px){.main section[aria-label="Board results and tools"]{display:flex;flex-direction:column} .main section[aria-label="Board results and tools"]>.lb-filters{order:9} .lb-filters{margin-bottom:var(--sp-4)} .lb-filters>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:44px;padding:var(--sp-2) var(--sp-3);background:var(--panel);border:var(--hairline) solid var(--line);border-radius:var(--radius-2);color:var(--ink-1);font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);cursor:pointer;list-style:none} .lb-filters>summary::-webkit-details-marker{display:none} .lb-filters>summary::after{content:"\25BE";color:var(--gold);font-size:var(--fs-body)} .lb-filters[open]>summary::after{content:"\25B4"} .nav-group{display:grid;grid-template-columns:1fr;gap:var(--sp-1)} .nav-group .side-label{grid-column:1/-1} .sidebar .nav-group>div{grid-template-columns:repeat(2,1fr)} .skill-btn{white-space:normal;overflow-wrap:normal;word-break:keep-all;hyphens:none;font-size:var(--fs-caption)} .lb-filters .controls{margin-top:var(--sp-2);margin-bottom:0} .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1)} .podium-card{padding:var(--sp-2) var(--sp-1)} .podium-name{font-size:var(--fs-caption)} .podium-value{font-size:var(--fs-body);margin-top:var(--sp-1)}} .random-btn{white-space:nowrap} @media (max-width:480px){.view-tabs{flex-wrap:nowrap;-webkit-mask-image:linear-gradient(to right,var(--mask-black) calc(100% - 56px),var(--tab-fade) calc(100% - 24px),transparent);mask-image:linear-gradient(to right,var(--mask-black) calc(100% - 56px),var(--tab-fade) calc(100% - 24px),transparent)} .view-tab{padding-left:var(--sp-3);padding-right:var(--sp-3)} .breadcrumb{display:none} .board-type-badge{display:none!important} .board-head .random-btn{padding-left:var(--sp-2);padding-right:var(--sp-2);margin-left:var(--sp-1)}} @media (max-width:600px){.board-head .board-count{flex-basis:100%;order:9} .pager .pager-mid{flex-basis:100%;display:inline-flex;justify-content:center;align-items:center;gap:var(--sp-2);order:9}} .overview-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .overview-grid>.ov-card{border-top:none;border-radius:var(--radius-1);padding:var(--sp-2) var(--sp-3);border-left:2px solid color-mix(in srgb,var(--gold) 30%,var(--line))} .overview-grid>.ov-card.cat-professions{border-left-color:color-mix(in srgb,var(--green) 55%,transparent)} .overview-grid>.ov-card.cat-combat{border-left-color:color-mix(in srgb,var(--red) 55%,transparent)} .overview-grid>.ov-card.cat-disciplines{border-left-color:color-mix(in srgb,var(--violet) 55%,transparent)} .overview-grid>.ov-card.cat-modes{border-left-color:color-mix(in srgb,var(--blue) 55%,transparent)} .overview-grid>.ov-card.cat-bosses{border-left-color:color-mix(in srgb,var(--medal-bronze) 55%,transparent)} .overview-grid>.ov-card .ov-name{font-size:var(--fs-caption);color:var(--text);letter-spacing:.05em;overflow-wrap:normal;word-break:keep-all;hyphens:none} .overview-grid>.ov-card:hover .ov-name{color:var(--gold)} .overview-grid>.ov-card.ov-card--lead:not(:first-child),.overview-grid>.ov-card:first-child{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:var(--sp-3);justify-content:flex-start;text-align:left;background:none;border-left:var(--thick) solid var(--gold);border-radius:0} .overview-grid>.ov-card.ov-card--lead:not(:first-child) .ov-name,.overview-grid>.ov-card:first-child .ov-name{font-size:var(--fs-h3);color:var(--gold)} .overview-grid>.ov-card.ov-card--lead:not(:first-child) .ov-top,.overview-grid>.ov-card:first-child .ov-top{flex-direction:row;align-items:baseline;border-top:none;margin:0;padding:0} .overview-grid>.ov-card.ov-card--lead:not(:first-child) .ov-cat-badge{margin-left:auto} .lb-head.lb-hero{min-height:clamp(340px,44vh,460px);justify-content:center;padding-top:calc(var(--nav-h) + var(--sp-7));padding-bottom:var(--sp-8)} .lb-head.lb-hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-color:var(--bg-deep);background-image:linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 42%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),url("/assets/art/battleground-feature-v1.webp");background-size:auto,cover;background-position:0 0,right 32%;background-repeat:no-repeat;filter:saturate(1.1) contrast(1.06)} .lb-head.lb-hero .lb-kicker{font-size:var(--fs-small);letter-spacing:.22em;color:var(--gold-bright)} @media (max-width:767px){.lb-head.lb-hero{min-height:300px}.lb-head.lb-hero::after{background-position:0 0,62% 32%}} @media (max-width: 639px){.podium{grid-template-columns: 1fr;gap: var(--sp-3);} .podium-card{display: grid;grid-template-columns: auto 1fr;text-align: left;align-items: center;column-gap: var(--sp-3);} .podium-card:nth-child(2){transform: none;} .podium-card:nth-child(3){transform: none;} .podium-card,.podium-card:nth-child(1),.podium-card:nth-child(2),.podium-card:nth-child(3){background: linear-gradient(180deg,var(--raised),var(--well));} .podium-card:nth-child(1){border-left: 3px solid var(--gold-bright);} .podium-card:nth-child(2){border-left: 3px solid var(--medal-silver);} .podium-card:nth-child(3){border-left: 3px solid var(--medal-bronze);} .view-tabs{overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;padding-bottom: var(--sp-1);} .view-tabs::-webkit-scrollbar{display: none;} .view-tab{white-space: nowrap;} .view-tab{white-space: nowrap;}} .lb-head.lb-hero::after{background-image: repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,0.02) 7px 8px),linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 42%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),url("/assets/art/battleground-feature-v1-1024.webp");background-size: auto,auto,cover;background-position: 0 0,0 0,right 32%;} @media (max-width: 767px){.lb-head.lb-hero::after{background-position: 0 0,0 0,62% 32%;}} .podium-card .badge,.podium-card [class*=pill]{white-space: nowrap;} @media (max-width: 639px){.pager{flex-wrap: wrap;row-gap: var(--sp-2);justify-content: center;} .pager .pager-mid input,#per-page{min-width: 3.5em;}} @media (max-width: 639px){.podium-card::after{display: none;}} .view-tab:hover:not(.active){background:color-mix(in srgb,var(--white) 7%,transparent);color:var(--gold-bright);border-bottom-color:var(--gold-2)} @media (min-width: 768px){.lb-head.lb-hero{min-height: clamp(420px,58vh,560px);justify-content: flex-end;}} #ov-grid-wrap .board--flush{background: radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--gold-dark) 7%,transparent),transparent 70%),linear-gradient(180deg,var(--raised),var(--well));border: var(--hairline) solid var(--line);border-radius: var(--radius-2);box-shadow: inset 0 1px 0 color-mix(in srgb,var(--white) 4%,transparent),0 14px 34px -28px var(--bg-darker);} @media (min-width: 1024px){.lb-head.lb-hero{min-height: clamp(460px,62vh,620px);}} .stat-row b,.lb-band .stat-row span[class*=val]{color: var(--gold-bright);} .ov-prev-dot{width: 10px;height: 10px;border-radius: 50%;} .ov-card:first-child .ov-prev-row:nth-child(1) .ov-prev-dot{background: var(--gold-bright);box-shadow: 0 0 0 2px color-mix(in srgb,var(--gold-bright) 30%,transparent);} .ov-card:first-child .ov-prev-row:nth-child(2) .ov-prev-dot{background: var(--medal-silver);box-shadow: 0 0 0 2px color-mix(in srgb,var(--medal-silver) 30%,transparent);} .ov-card:first-child .ov-prev-row:nth-child(3) .ov-prev-dot{background: var(--medal-bronze);box-shadow: 0 0 0 2px color-mix(in srgb,var(--medal-bronze) 30%,transparent);} .lb-head.lb-hero .lb-title{text-shadow: var(--shadow-text-on-art);} .lb-head.lb-hero .lb-kicker,.lb-head.lb-hero .lb-sub{text-shadow: var(--shadow-text-on-art-heavy);} .lb-head.lb-hero .lb-sub{color: var(--ink-1);} .lb-head.lb-hero::after{box-shadow: var(--shadow-vignette-over-art);} @media (max-width: 767px){.lb-head.lb-hero{min-height: 196px;}} @media (min-width: 768px){.lb-head.lb-hero{min-height: clamp(236px,26vh,288px);}} @media (min-width: 1024px){.lb-head.lb-hero{min-height: clamp(252px,28vh,320px);}} .lb-head.lb-hero{padding-top: calc(var(--nav-h) + var(--sp-3));padding-bottom: var(--sp-5);} .lb-head.lb-hero .lb-sub{max-width: 62ch;} tbody tr:nth-child(even) td{background: color-mix(in srgb,var(--white) 4%,transparent);} td{border-top: var(--hairline) solid color-mix(in srgb,var(--white) 9%,transparent);} tbody tr:nth-child(5n) td{border-bottom: var(--hairline) solid color-mix(in srgb,var(--white) 14%,transparent);} thead th{color: var(--ink-2);border-bottom: var(--thick) solid var(--line-2);} th[data-sort]::after{content: "\2195";margin-left: var(--sp-2);opacity: .34;font-weight: 400;} th[data-sort]:hover{color: var(--gold-2);} th[data-sort]:hover::after{opacity: .8;} th.sorted::after,th[aria-sort]::after{content: none;} td.rank{font-size: var(--fs-body);} td.rank-1,td.rank-2,td.rank-3{font-size: var(--fs-lead);line-height: 1.1;} td.rank-1{background: linear-gradient(90deg,color-mix(in srgb,var(--medal-gold) 20%,transparent),transparent 76%);box-shadow: inset 3px 0 0 var(--medal-gold);} td.rank-2{background: linear-gradient(90deg,color-mix(in srgb,var(--medal-silver) 16%,transparent),transparent 76%);box-shadow: inset 3px 0 0 var(--medal-silver);} td.rank-3{background: linear-gradient(90deg,color-mix(in srgb,var(--medal-bronze) 18%,transparent),transparent 76%);box-shadow: inset 3px 0 0 var(--medal-bronze);} tbody tr:nth-child(even) td.rank-2{background: linear-gradient(90deg,color-mix(in srgb,var(--medal-silver) 16%,transparent),transparent 76%);} .xp{color: var(--ink-2);} td[data-l="Class"]{color: var(--ink-2);} .player-name{font-weight: 700;color: var(--ink-1);} .mode-badge{font-weight: 600;color: var(--ink-3);background: color-mix(in srgb,var(--white) 5%,transparent);} tbody tr:focus-visible{outline: var(--thick) solid var(--gold-2);outline-offset: -2px;} .empty{padding: var(--sp-8) var(--sp-6);} .empty-icon{font-size: var(--fs-h1);opacity: .38;color: var(--gold-dim);margin-bottom: var(--sp-3);line-height: 1;} .empty-title{font-size: var(--fs-lead);} .empty-desc{max-width: 42ch;color: var(--ink-3);} @media (max-width: 480px){.view-tabs{flex-wrap: wrap;row-gap: var(--sp-1);overflow-x: visible;-webkit-mask-image: none;mask-image: none;} .view-tab{flex: 1 1 auto;padding-left: var(--sp-2);padding-right: var(--sp-2);} .board-head{flex-wrap: wrap;row-gap: var(--sp-2);padding-right: var(--sp-3);} .board-head .random-btn{margin-right: 0;}} td.rank-1{color: var(--medal-gold);} td.rank-2{color: var(--medal-silver);} td.rank-3{color: var(--medal-bronze);} .podium-rank{font-size: var(--fs-small);letter-spacing: .18em;} .podium-card:nth-child(1) .podium-rank{color: var(--medal-gold);} .podium-card:nth-child(2) .podium-rank{color: var(--medal-silver);} .podium-card:nth-child(3) .podium-rank{color: var(--medal-bronze);} .podium-card{overflow: hidden;} .podium-card .mode-badge{max-width: 100%;overflow: hidden;text-overflow: ellipsis;} @media (max-width: 639px){.podium-card{padding-right: var(--sp-4);} .podium-card .cell-v,.podium-card .podium-name{min-width: 0;}} td[data-l="Level"]{color: var(--ink-1);} .xp{font-weight: 600;} .empty-icon{font-size: var(--fs-h2);opacity: .55;} .empty-query{display: block;margin-top: var(--sp-2);color: var(--ink-2);font-variant-numeric: tabular-nums;} .empty-action{margin-top: var(--sp-4);} .board.is-empty thead{visibility: hidden;} .pager.is-single{display: none;} :root{--medal-bronze-ink: color-mix(in srgb,var(--medal-bronze) 74%,var(--ink-1));} td.rank-3{color: var(--medal-bronze-ink);} .podium-card:nth-child(3) .podium-rank{color: var(--medal-bronze-ink);} .lb-head.lb-hero .lb-sub{max-width: 48ch;} thead th{color: var(--ink-1);} @media (min-width: 768px){.lb-head.lb-hero{min-height: clamp(196px,21vh,232px);}} @media (min-width: 1024px){.lb-head.lb-hero{min-height: clamp(200px,22vh,236px);}} .podium-card{padding-top: var(--sp-3);padding-bottom: var(--sp-3);} .podium-name{margin-top: var(--sp-1);} .podium-meta{margin-top: 0;} .podium-value{line-height: 1.15;} .board-head{padding-top: var(--sp-2);padding-bottom: var(--sp-2);} .board-meta{margin-top: 0;margin-bottom: var(--sp-2);} .controls{padding-top: var(--sp-2);padding-bottom: var(--sp-2);row-gap: var(--sp-2);} .board-stats{padding-top: var(--sp-1);padding-bottom: var(--sp-1);} .sidebar .skill-btn{color: var(--ink-1);} .sidebar .side-label{color: var(--ink-2);} .podium-value{color: var(--ink-1);} .podium-name{color: var(--white);} .board-stats{color: var(--ink-1);} td.rank{position: relative;padding-left: var(--sp-4);} td.rank-1,td.rank-2,td.rank-3{font-weight: 700;} td.rank-1::before,td.rank-2::before,td.rank-3::before{content:;position: absolute;left: 0;top: 0;bottom: 0;width: 6px;} td.rank-1::before{background: var(--medal-gold);} td.rank-2::before{background: var(--medal-silver-ink);} td.rank-3::before{background: var(--medal-bronze-ink);} :root{--medal-silver-ink: color-mix(in srgb,var(--medal-silver) 84%,var(--blue));} td.rank-2{color: var(--medal-silver-ink);} #podium .podium-rank{font-size: var(--fs-lead);letter-spacing: .1em;line-height: 1.1;} #podium .podium-card{overflow: hidden;text-align: left;padding-right: 42%;} #podium .podium-name{justify-content: flex-start;flex-wrap: wrap;min-width: 0;} #podium .podium-name .mode-badge{max-width: 100%;} #podium .podium-value{display: flex;align-items: baseline;gap: var(--sp-2);margin-top: var(--sp-1);} @media (max-width: 639px){#podium .podium-card{padding-right: 38%;}} th[data-sort]::after{content: "";display: inline-block;width: 0;height: 0;margin-left: var(--sp-2);vertical-align: middle;border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 5px solid currentColor;border-top: 0;opacity: .38;} th[data-sort]:hover::after{opacity: .85;} #podium .podium-card:nth-child(2) .podium-rank{color: var(--medal-silver-ink);} #podium{align-items: stretch;} #podium .podium-card{height: 100%;display: flex;flex-direction: column;} #podium .podium-value{margin-top: auto;} td[data-l="Level"]{color: var(--white);font-weight: 600;} th[data-sort]::after{opacity: .55;} :root{--medal-bronze-ink: #d89274;} #podium .podium-card{border-left-width: 2px;border-left-style: solid;} #podium .podium-card:nth-child(1){border-left-color: var(--medal-gold);} #podium .podium-card:nth-child(2){border-left-color: var(--medal-silver-ink);} #podium .podium-card:nth-child(3){border-left-color: var(--medal-bronze-ink);} #podium .podium-meta{color: var(--ink-2);} td.lb-num[data-l="Level"]{color: var(--white);} tbody tr:nth-child(even) td{background: color-mix(in srgb,var(--white) 6%,transparent);} tbody tr:nth-child(5n) td{border-bottom: 1px solid color-mix(in srgb,var(--white) 16%,transparent);} #podium.is-empty{display: grid;visibility: hidden;min-height: 186px;} @media (max-width: 767px){#podium.is-empty{min-height: 388px;}} @media (max-width: 520px){#podium.is-empty{min-height: 456px;}} @media print{tbody tr:nth-child(even) td{background: none;} tbody tr:nth-child(5n) td{border-bottom: var(--hairline) solid var(--ctl-2);} td.rank-1::before,td.rank-2::before,td.rank-3::before{width: 2px;} td.rank-2::before{background: var(--dim-2);} td.rank-3::before{background: var(--print-bronze);} .empty-action{display: none;}} .empty .empty-icon{display: none;} .empty{padding: var(--sp-6) var(--sp-6);} .mode-badge{background: color-mix(in srgb,var(--white) 12%,transparent);color: var(--ink-1);} td[data-l="XP"] .cell-v{display: flex;flex-direction: column;gap: var(--sp-1);} tbody tr:nth-child(5n) td{border-bottom: 1px solid color-mix(in srgb,var(--white) 32%,transparent);} #podium .podium-card{border-left-style: none;} #podium .podium-card::after{content: "";position: absolute;left: 0;top: 0;bottom: 0;width: 4px;z-index: 1;} #podium .podium-card:nth-child(1)::after{background: var(--medal-gold);} #podium .podium-card:nth-child(2)::after{background: var(--medal-silver-ink);} #podium .podium-card:nth-child(3)::after{background: var(--medal-bronze-ink);} @media (max-width: 767px){#podium{grid-auto-rows: 1fr;}} #podium .podium-meta{color: var(--ink-1);} tbody tr:nth-child(5n) td{border-bottom: 2px solid color-mix(in srgb,var(--white) 30%,transparent);} tbody tr:nth-child(even) td{background: color-mix(in srgb,var(--white) 8%,transparent);} .board.is-empty .share-btn{opacity: .4;pointer-events: none;} .board.is-empty .board-meta{margin-bottom: 0;} .board[data-state=error] .board-meta,.board[data-state=error] .pager{opacity:.4;pointer-events:none} .board[data-state=loading] .pager{opacity:.4;pointer-events:none} .lb-view-note{padding:var(--sp-5) var(--sp-3);text-align:center;color:var(--text-secondary);font-size:var(--fs-small)} .lb-error{padding:var(--sp-7) var(--sp-6);text-align:center;border-top:var(--hairline) solid var(--rule-error);background:var(--surface-error)} .lb-error-title{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:var(--fw-display);font-synthesis:none;color:var(--ink-1);margin-bottom:var(--sp-2)} .lb-error-desc{font-size:var(--fs-small);max-width:46ch;margin:0 auto;color:var(--ink-2)} .lb-error-action{margin-top:var(--sp-4)} #updated.is-stale{color:var(--text-stale)} #updated.is-stale::after{content:" · stale"} .board button:disabled,.board .lb-select:disabled{opacity:.42;cursor:not-allowed} @media (max-width:767px){.board thead{display:block} .board>table{display:grid;grid-template-columns:minmax(min-content,100%);overflow-x:auto;overscroll-behavior-x:contain} .board>table>thead,.board>table>tbody{display:block;min-width:100%} .board thead tr{display:grid;grid-template-columns:auto minmax(7ch,1fr);grid-auto-flow:column;grid-auto-columns:minmax(min-content,auto);align-items:baseline;column-gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border-bottom:var(--hairline) solid var(--line)} .board thead th{display:block;width:auto;min-width:0;height:auto;padding:0;border:0;text-align:left;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);overflow-wrap:break-word} .board thead th.lb-num{text-align:right} .board thead th#th-cls{display:block;font-size:var(--fs-caption);max-width:16ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .board tbody tr{grid-template-columns:auto minmax(7ch,1fr);grid-auto-flow:column;grid-auto-columns:minmax(min-content,auto);align-items:center;min-height:var(--sp-7)} .board tbody td.rank,.board thead th[data-sort=rank]{min-width:3ch} .board tbody td[data-l=Level],.board thead th[data-sort=lvl]{min-width:3.5ch} .board tbody td[data-l=XP],.board tbody td[data-l=Wealth],.board tbody td[data-l=Kills],.board thead th[data-sort=xp]{min-width:7ch} .board tbody td.lb-num,.board tbody td[data-l=Level],.board tbody td[data-l=XP],.board tbody td[data-l=Wealth],.board tbody td[data-l=Kills],.board thead th.lb-num{text-align:right} .board tbody tr:nth-child(5n) td{border-bottom:0} .board tbody tr:nth-child(5n){border-bottom:var(--hairline) solid color-mix(in srgb,var(--white) 9%,transparent)} .board tbody tr:nth-child(even) td,.board tbody td.rank:not(.rank-1):not(.rank-2):not(.rank-3){background:none} .board tbody td.rank-1,.board tbody td.rank-2,.board tbody td.rank-3{box-shadow:none;background:none} .board tbody tr:has(td.rank-1){background:linear-gradient(90deg,var(--medal-gold) 0 3px,transparent 3px),linear-gradient(90deg,color-mix(in srgb,var(--medal-gold) 14%,transparent),transparent 62%)} .board tbody tr:has(td.rank-2){background:linear-gradient(90deg,var(--medal-silver) 0 3px,transparent 3px),linear-gradient(90deg,color-mix(in srgb,var(--medal-silver) 12%,transparent),transparent 62%)} .board tbody tr:has(td.rank-3){background:linear-gradient(90deg,var(--medal-bronze) 0 3px,transparent 3px),linear-gradient(90deg,color-mix(in srgb,var(--medal-bronze) 13%,transparent),transparent 62%)} .board tbody tr:nth-child(even){background:var(--row-band)}} .board tbody tr:nth-child(-n+3) td.rank{position:relative} .board tbody tr:nth-child(-n+3) td.rank::before{content:"";position:absolute;left:auto;right:var(--sp-4);top:50%;width:24px;height:24px;transform:translateY(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--medal-gold) 26%,transparent),transparent);opacity:.5;pointer-events:none} @media (max-width:767px){.board tbody tr:nth-child(-n+3) td.rank::before{display:none}} @supports (background-image: image-set(url("data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=") 1x)){.lb-head.lb-hero::after{background-image: repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,0.02) 7px 8px),linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 42%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),image-set(url("/assets/art/battleground-feature-v1-640.webp") 1x,url("/assets/art/battleground-feature-v1-1280.webp") 2x);} @media (min-width: 601px){.lb-head.lb-hero::after{background-image: repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,0.02) 7px 8px),linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 42%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),image-set(url("/assets/art/battleground-feature-v1-768.webp") 1x,url("/assets/art/battleground-feature-v1.webp") 2x);}} @media (min-width: 768px){.lb-head.lb-hero::after{background-image: repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,0.02) 7px 8px),linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 42%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),image-set(url("/assets/art/battleground-feature-v1-1024.webp") 1x,url("/assets/art/battleground-feature-v1.webp") 2x);}} @media (min-width: 1024px){.lb-head.lb-hero::after{background-image: repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,0.02) 7px 8px),linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 42%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),image-set(url("/assets/art/battleground-feature-v1-1280.webp") 1x,url("/assets/art/battleground-feature-v1.webp") 2x);}}} #podium .podium-card{--pt-base: var(--raised);} #podium .podium-card:nth-child(1){--pt-base: var(--pt-gold);} #podium .podium-card:nth-child(2){--pt-base: var(--pt-silver);} #podium .podium-card:nth-child(3){--pt-base: var(--pt-bronze);} #podium .podium-card{background-image: linear-gradient(270deg,var(--well) 0%,color-mix(in srgb,var(--well) 55%,transparent) 7%,transparent 16%),linear-gradient(0deg,var(--well) 0%,color-mix(in srgb,var(--well) 50%,transparent) 8%,transparent 20%),linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-base),var(--well));background-size: 100% 100%,100% 100%,100% 100%,auto 150%,100% 100%;background-position: 0 0,0 0,0 0,right top,0 0;background-repeat: no-repeat;border-top: 2px solid color-mix(in srgb,var(--gold-dark) 72%,var(--line));box-shadow: inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 16%,transparent),0 18px 34px -30px var(--deep);} .board,.controls{background: repeating-linear-gradient(135deg,color-mix(in srgb,var(--gold-dark) 4%,transparent) 0 2px,transparent 2px 9px),linear-gradient(180deg,var(--raised),var(--well));border-top: 2px solid color-mix(in srgb,var(--gold-dark) 70%,var(--line));box-shadow: inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 12%,transparent);} .drawer .share-btn{right: calc(var(--sp-3) + 56px);} .drawer-close{border: var(--hairline) solid var(--line);border-radius: var(--radius-1);background: color-mix(in srgb,var(--deep) 82%,transparent);color: var(--ink-1);line-height: 1;} .drawer-close:hover{border-color: color-mix(in srgb,var(--gold) 45%,transparent);color: var(--gold);} .drawer-close:focus-visible{border-color: color-mix(in srgb,var(--gold) 45%,transparent);color: var(--gold);} .drawer{padding-bottom: var(--sp-8);} .drawer h2,.drawer .drawer-sub{padding-right: 120px;} .hero h1,.drawer h2,.board-title{font-synthesis: none;} .drawer-section{margin-top: var(--sp-5);padding-bottom: var(--sp-2);border-bottom: var(--hairline) solid var(--line);font-size: var(--fs-caption);letter-spacing: var(--ls-caps);text-transform: uppercase;color: var(--gold-mid);} @media (max-width: 639px){#podium .podium-card{background-size: 100% 100%,100% 100%,100% 100%,auto 190%,100% 100%;background-position: 0 0,0 0,0 0,right -12px top,0 0;} .drawer h2,.drawer .drawer-sub{padding-right: 108px;}} #podium .podium-card{background-image: linear-gradient(270deg,var(--pt-base) 0%,color-mix(in srgb,var(--pt-base) 62%,transparent) 12%,transparent 34%),linear-gradient(0deg,var(--pt-base) 0%,color-mix(in srgb,var(--pt-base) 55%,transparent) 9%,transparent 26%),linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-base),var(--well));background-size: 100% 100%,100% 100%,100% 100%,auto 150%,100% 100%;background-position: 0 0,0 0,0 0,right top,0 0;background-repeat: no-repeat;} #podium .podium-name{align-items: baseline;} #podium .podium-meta{min-height: calc(var(--fs-caption) * 1.6);} .drawer{background: repeating-linear-gradient(135deg,color-mix(in srgb,var(--gold-dark) 4%,transparent) 0 2px,transparent 2px 9px),linear-gradient(180deg,var(--raised),var(--well) 40%,var(--panel-2));border-left: var(--hairline) solid color-mix(in srgb,var(--gold-dark) 62%,var(--line));} #drawer-donut,#drawer-xp-ring,.sparkline-wrap{padding: var(--sp-3);border: var(--hairline) solid var(--line);border-radius: var(--radius-2);background: color-mix(in srgb,var(--deep) 55%,transparent);} .drawer-section + div{margin-top: var(--sp-2);} .rank-history-caption{text-align:left;font-size:var(--fs-caption);color:var(--text-secondary);margin-bottom:var(--sp-1)} .rank-history-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-variant-numeric:tabular-nums} .rank-history-table th,.rank-history-table td{padding:var(--sp-1) var(--sp-2);text-align:left;border-bottom:var(--hairline) solid var(--line)} .rank-history-table th{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--text-secondary)} .rank-history-table td:last-child,.rank-history-table th:last-child{text-align:right} .rank-history-rank{font-weight:700;color:var(--gold)} .rank-history-note{margin:0;font-size:var(--fs-small);color:var(--text-quiet)} @media (max-width: 639px){#podium .podium-card{background-size: 100% 100%,100% 100%,100% 100%,auto 190%,100% 100%;background-position: 0 0,0 0,0 0,right -12px top,0 0;}} #podium .podium-card{position: relative;background-image: linear-gradient(180deg,var(--pt-base),var(--well));background-size: 100% 100%;background-position: 0 0;background-repeat: no-repeat;} #podium .podium-card::before{content: "";position: absolute;inset: 0;z-index: 0;pointer-events: none;top: auto;left: auto;right: 0;bottom: 0;width: 100%;height: 100%;border-radius: inherit;background-image: url("/assets/art/tile-guardian.webp");background-size: auto 104%;background-position: right bottom;background-repeat: no-repeat;opacity: .34;-webkit-mask-image: linear-gradient(270deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 24%),linear-gradient(90deg,transparent 68%,#000 96%);mask-image: linear-gradient(270deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 24%),linear-gradient(90deg,transparent 68%,#000 96%);-webkit-mask-composite: source-in;mask-composite: intersect;} #podium .podium-card > *{position: relative;z-index: 1;} @media (max-width: 639px){#podium .podium-card::before{background-size: auto 190%;-webkit-mask-image: linear-gradient(270deg,transparent 0%,#000 22%),linear-gradient(0deg,transparent 0%,#000 20%),linear-gradient(90deg,transparent 56%,#000 88%);mask-image: linear-gradient(270deg,transparent 0%,#000 22%),linear-gradient(0deg,transparent 0%,#000 20%),linear-gradient(90deg,transparent 56%,#000 88%);}} .overview-grid{gap: var(--sp-4);} .overview-grid .ov-name{line-height: 1.2;min-height: 2.4em;} .lb-head{padding-bottom: var(--sp-6);} .lb-head{background-image: linear-gradient(90deg,color-mix(in srgb,var(--well) 96%,transparent) 0%,color-mix(in srgb,var(--well) 88%,transparent) 46%,color-mix(in srgb,var(--well) 55%,transparent) 72%,color-mix(in srgb,var(--well) 18%,transparent) 100%),radial-gradient(ellipse 50% 50% at 50% 50%,transparent 52%,color-mix(in srgb,var(--well) 40%,transparent) 100%),url("/assets/art/tile-guardian.webp");background-size: auto,auto 88%,auto 88%;background-position: 0 0,right var(--sp-6) center,right var(--sp-6) center;background-repeat: no-repeat;} .podium-card{background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--raised),var(--well));background-size: 100% 100%,auto 150%,100% 100%;background-position: 0 0,right top,0 0;background-repeat: no-repeat;} .podium-card:nth-child(1){background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-gold),var(--well));} .podium-card:nth-child(2){background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-silver),var(--well));} .podium-card:nth-child(3){background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-bronze),var(--well));} .ov-icon,.skill-icon{flex: none;display: inline-flex;align-items: center;justify-content: center;align-self: flex-start;width: 28px;height: 28px;padding: 0;min-width: 0;border-radius: 8px;font-family: var(--font-body);font-size: var(--fs-caption);font-weight: 700;letter-spacing: .02em;line-height: 1;color: var(--gold-mid);background: radial-gradient(circle at 50% 42%,var(--panel-lift) 0%,var(--pit) 82%);border: 1px solid color-mix(in srgb,var(--gold-mid) 58%,transparent);box-shadow: inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 22%,transparent),inset 0 -6px 10px color-mix(in srgb,var(--bg-deep) 70%,transparent),0 2px 5px var(--black-a60);transition: transform var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out);} .ov-card:hover .ov-icon,.skill-btn:hover .skill-icon{transform: scale(1.06);border-color: var(--gold-bright);color: var(--gold);} .ov-card:focus-visible .ov-icon,.skill-btn.active .skill-icon,.skill-btn:focus-visible .skill-icon{transform: scale(1.06);border-color: var(--gold-bright);color: var(--gold);} .fav-star{position: relative;width: 16px;height: 16px;overflow: hidden;color: transparent;text-indent: -99em;} .fav-star::before{content: "";position: absolute;inset: 1px;background: currentColor;color: var(--dim-1);-webkit-mask: var(--fav-mark) center / contain no-repeat;mask: var(--fav-mark) center / contain no-repeat;transition: color var(--dur-quick) var(--ease-out);} .skill-btn:hover .fav-star::before,.fav-star:hover::before{color: var(--gold-2);} .fav-star:focus-visible::before{color: var(--gold-2);} .fav-star.faved::before{color: var(--gold);} :root{--fav-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45 6.2 20.5l1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");} body[data-view="skills"] #ov-grid-wrap,body[data-view="skills"] #view-bosses,body[data-view="skills"] #view-medals,body[data-view="overview"] #panel-skills,body[data-view="overview"] #view-bosses,body[data-view="overview"] #view-medals,body[data-view="bosses"] #panel-skills,body[data-view="bosses"] #ov-grid-wrap,body[data-view="bosses"] #view-medals,body[data-view="medals"] #panel-skills,body[data-view="medals"] #ov-grid-wrap,body[data-view="medals"] #view-bosses{display: none;} .overview-grid > .ov-sep{grid-column: 1 / -1;margin: var(--sp-3) 0 0;padding: 0 0 var(--sp-1);border-bottom: var(--hairline) solid color-mix(in srgb,var(--gold) 22%,transparent);font-family: var(--font-body);font-size: var(--fs-caption);font-weight: 700;text-transform: uppercase;letter-spacing: .18em;color: var(--gold);text-align: left;} .overview-grid > .ov-sep:first-child{margin-top: 0;} .ov-icon,.skill-icon{background: color-mix(in srgb,var(--gold) 10%,var(--panel-lift));} .overview-grid > .ov-card .ov-name{overflow-wrap: anywhere;word-break: normal;min-width: 0;} .board-progress[hidden],.recent-section[hidden]{display: none;} @media (max-width: 767px){body[data-view="overview"] .sidebar .nav-group{display: none;} body[data-view="overview"] .sidebar{order: 0;margin-top: 0;padding-bottom: var(--sp-3);}} .overview-grid > .ov-card .ov-name{overflow-wrap: break-word;letter-spacing: .02em;-webkit-hyphens: auto;hyphens: auto;} .nav-group[hidden]{display:none} .lb-absent{color:var(--text-secondary);font-size:var(--fs-caption);font-style:italic;letter-spacing:.01em} .lb-boot-row td{padding:var(--sp-5) var(--sp-3);text-align:center} .lb-boot-title{display:block;color:var(--gold-dim);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--tr-label)} .lb-boot-desc{display:block;margin-top:var(--sp-2);color:var(--text-secondary);max-width:52ch;margin-left:auto;margin-right:auto} .lb-stale-banner{margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);color:var(--text-body);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--border);border-left:3px solid var(--game-accent);border-radius:var(--radius-1);box-shadow:var(--shadow-press);font-size:var(--fs-caption);} .updated.is-stale{color:var(--game-accent)} .podium-caption{margin:0 0 var(--sp-2);color:var(--gold-dim);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--tr-label);} .podium-empty{grid-column:1/-1;padding:var(--sp-3);text-align:center;color:var(--text-secondary)} .podium-value--rank{font-size:var(--fs-h4)} .podium-value--absent{font-size:var(--fs-h6)} .podium-note{margin-top:var(--sp-1);color:var(--text-secondary);font-size:var(--fs-micro);line-height:var(--lh-tight);} .bs-strong{color:var(--text-bright)} .bs-metric{color:var(--gold-bright)} .bs-guild{color:var(--gold-dim)} .skill-icon{min-width:var(--sp-5);height:var(--sp-5);display:grid;place-items:center;padding:0;color:var(--gold-dim);background:var(--game-well);border:1px solid var(--game-hairline);border-radius:var(--radius-1);box-shadow:var(--shadow-slot-bevel);} .skill-btn.active .skill-icon{color:var(--gold-bright);border-color:var(--border-bright)} .lb-search,.lb-select,.lb-jump,.side-search,#lookup-name{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-1);color:var(--text-body);box-shadow:var(--shadow-slot-bevel);} .lb-search:focus-visible,.lb-select:focus-visible,.lb-jump:focus-visible,.side-search:focus-visible,#lookup-name:focus-visible{border-color:var(--border-bright);outline:2px solid var(--gold-mid);outline-offset:var(--focus-offset);} .random-btn,.pager-btn{background:linear-gradient(180deg,var(--bg-4),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-1);color:var(--text-body);box-shadow:var(--shadow-slot-bevel);} .random-btn:hover,.pager-btn:hover:not(:disabled){border-image:var(--game-frame-selected) 1;color:var(--gold-bright);} .random-btn:active,.pager-btn:active:not(:disabled){box-shadow:var(--shadow-press)} .board table thead th{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));color:var(--text-body);font-size:var(--fs-caption);font-weight:400;text-transform:uppercase;letter-spacing:var(--tr-label);border-bottom:1px solid var(--border-bright);white-space:nowrap;} @media (max-width:767px){.board table thead th{white-space:normal}} .board table tbody td{font-variant-numeric:tabular-nums} .board table tbody tr:hover>*{background-color:var(--gold-earth-a4)} .board table tbody tr:hover>:first-child{box-shadow:var(--shadow-row-marker)} .lb-lookup{margin-top:var(--sp-4);padding:var(--sp-3);background:linear-gradient(180deg,var(--bg-3),var(--bg-2) 60%,var(--bg-deep));border:1px solid var(--border);border-image:var(--game-frame) 1;border-radius:var(--radius-1);outline:1px solid var(--gold-earth-a8);outline-offset:3px;box-shadow:var(--shadow-panel-rim),var(--shadow-1);} .lb-lookup-label{display:block;color:var(--gold-dim);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--tr-label);margin-bottom:var(--sp-2);} .lb-lookup-row{display:flex;gap:var(--sp-2);flex-wrap:wrap} .lb-lookup-input{flex:1 1 220px;min-height:44px;padding:0 var(--sp-3);font:inherit;font-size:var(--fs-small)} .lb-lookup-go{min-height:44px;padding:0 var(--sp-4);font:inherit;font-size:var(--fs-small);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--bg-deep);background:linear-gradient(180deg,var(--gold-bright),var(--gold-mid));border:1px solid var(--gold-dark);border-radius:var(--radius-1);cursor:pointer;} .lb-lookup-go:hover{background:linear-gradient(180deg,var(--gold-2),var(--gold-bright))} .lb-lookup-go:active{box-shadow:var(--shadow-press)} .lb-lookup-go:focus-visible{outline:2px solid var(--gold-bright);outline-offset:var(--focus-offset)} .lb-lookup-help{margin-top:var(--sp-2);color:var(--text-secondary);font-size:var(--fs-caption)} .lb-lookup-result{margin-top:var(--sp-3)} .lookup-msg{color:var(--text-body);font-size:var(--fs-small)} .lookup-msg--sub{margin-top:var(--sp-1);color:var(--text-secondary);font-size:var(--fs-caption)} .lookup-msg--error{color:var(--game-accent)} .lookup-head{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)} .lookup-name{color:var(--text-bright);font-size:var(--fs-h6)} .lookup-count{color:var(--text-secondary);font-size:var(--fs-caption)} .lookup-armory{color:var(--gold-bright);text-decoration:underline} .lookup-table{width:100%;border-collapse:collapse} .lookup-table th{text-align:left;padding:var(--sp-1) var(--sp-2);color:var(--text-body);font-size:var(--fs-caption);font-weight:400;text-transform:uppercase;letter-spacing:var(--tr-label);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border-bottom:1px solid var(--border-bright);} .lookup-table td{padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--border-subtle);font-variant-numeric:tabular-nums;} .lookup-table tr:hover>*{background-color:var(--gold-earth-a4)} .lookup-board{background:none;border:none;padding:0;font:inherit;font-size:var(--fs-small);color:var(--gold-bright);cursor:pointer;text-align:left;text-decoration:underline;} .lookup-board:focus-visible{outline:2px solid var(--gold-bright);outline-offset:var(--focus-offset)} .lookup-rank{color:var(--text-bright);font-weight:700} .dr-of{color:var(--text-secondary);font-size:var(--fs-caption)} .dr-val{color:var(--gold-dim);font-size:var(--fs-caption)} .dr-rank{white-space:nowrap} .drawer-row--none{color:var(--text-secondary);font-size:var(--fs-caption)} @media (min-width:768px){.lb-head.lb-hero{min-height:clamp(160px,17vh,188px);padding-bottom:var(--sp-3)}} @media (min-width:1024px){.lb-head.lb-hero{min-height:clamp(164px,17vh,192px)}} @media (max-width:767px){.lb-head.lb-hero{min-height:150px;padding-bottom:var(--sp-3)}} .main>.lb-band{padding-block:0 var(--sp-4)} .main>.lb-band+.lb-band{padding-block-start:0} body[data-view="skills"] .podium,body[data-view="skills"] #podium-caption{display:none} @media (min-width:768px){.sidebar{width:288px}} .sidebar .lb-lookup{margin-top:0;margin-bottom:var(--sp-3)} .sidebar .lb-lookup-row{flex-wrap:nowrap;gap:var(--sp-1)} .sidebar .lb-lookup-input{flex:1 1 auto;min-width:0} .sidebar .lb-lookup-go{flex:none;padding:0 var(--sp-2)} .sidebar .lb-lookup-help{margin-top:var(--sp-1)} .sidebar .lookup-head{margin-bottom:var(--sp-1)} .sidebar .lookup-table th,.sidebar .lookup-table td{padding:var(--sp-1);font-size:var(--fs-caption)} .sidebar .lookup-board{overflow-wrap:anywhere} .side-label--boards{margin-bottom:var(--sp-1)} @media (max-width:767px){.sidebar .lb-lookup{padding:var(--sp-2);margin-bottom:var(--sp-2)} .sidebar .lb-lookup-label{margin-bottom:var(--sp-1)} body[data-view="overview"] .side-label--boards{display:none} .sidebar .lb-lookup-help{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}} @media (max-width:767px){.board>table{display:block;overflow:visible;width:100%} .board>table>thead,.board>table>tbody{display:block;width:100%;min-width:0} .board>table>caption{display:block;width:100%} .board thead{position:sticky;top:var(--nav-h);z-index:10;background:var(--panel)} .board thead tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);padding:var(--sp-2) var(--sp-3);border-bottom:var(--hairline) solid var(--line)} .board thead th,.board thead th.lb-num,.board thead th#th-cls,.board th:nth-child(3),.board th:nth-child(4),.board th:nth-child(5){position:static;flex:0 0 auto;display:block;width:auto;max-width:none;min-width:0;height:auto;padding:0;text-align:left;overflow:visible} .board thead th[data-sort=rank]{min-width:0;padding-right:0} .board thead tr::after{content:"";order:1;flex:0 0 100%;height:0} .board thead th:nth-child(2){flex:1 1 auto} .board thead th:nth-child(n+3):not(:last-child){order:2} .board thead th:nth-child(n+3):last-child{order:0;margin-left:auto;text-align:right} .board tbody tr{--lb-rank-w:40px;position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) 0;min-height:0;padding:var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + var(--lb-rank-w))} .board tbody td,.board td:nth-child(3),.board td:nth-child(4),.board td:nth-child(5){display:block;flex:0 0 auto;width:auto;max-width:none;min-width:0;height:auto;padding:0;border:0;text-align:left;background:none;box-shadow:none} .board tbody td.rank,td.rank{flex:0 0 var(--lb-rank-w);margin-left:calc(-1 * var(--lb-rank-w));padding:0 var(--sp-2) 0 0;text-align:left;position:static;min-width:0} .board tbody td:nth-child(2){flex:1 1 auto;min-width:0;white-space:normal} .board tbody tr::after{content:"";order:1;flex:0 0 100%;height:0} .board tbody td:nth-child(n+3):not(:last-child){order:2} .board tbody td:nth-child(n+3):last-child{order:0;margin-left:auto;text-align:right;justify-content:flex-end} .board td:nth-child(2) .player-name{display:inline;max-width:none;white-space:normal;overflow:visible;overflow-wrap:anywhere;vertical-align:baseline} .board tbody td:nth-child(n+3){display:inline-flex;align-items:baseline;gap:var(--sp-1);margin-right:var(--sp-3);font-size:var(--fs-caption);white-space:nowrap} .board tbody td:nth-child(n+3):last-child{margin-right:0} .board tbody td:not(.rank)::before{content:attr(data-l);flex:none;font-size:var(--fs-caption);font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)} .board tbody td:nth-child(2)::before{content:none} .board tbody td:nth-child(n+3) .cell-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .board tbody td[data-l="Class"]{max-width:none} .board tbody td[data-l="Class"] .cell-v{max-width:16ch} .board tbody td[data-l="XP"] .cell-v{display:block} .board tbody tr:hover>td,.board tbody tr:focus-visible>td,.board tbody tr:active>td,.board tbody tr:nth-child(even)>td{background:none;box-shadow:none} .board tbody tr:hover,.board tbody tr:focus-visible{background-color:color-mix(in srgb,var(--gold) 8%,transparent)} .board tbody tr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .board tbody tr:has(td.rank-1){--lb-rail:var(--medal-gold);background-image:linear-gradient(90deg,color-mix(in srgb,var(--medal-gold) 14%,transparent),transparent 62%)} .board tbody tr:has(td.rank-2){--lb-rail:var(--medal-silver);background-image:linear-gradient(90deg,color-mix(in srgb,var(--medal-silver) 12%,transparent),transparent 62%)} .board tbody tr:has(td.rank-3){--lb-rail:var(--medal-bronze);background-image:linear-gradient(90deg,color-mix(in srgb,var(--medal-bronze) 13%,transparent),transparent 62%)} .board tbody tr:has(td.rank-1)::before,.board tbody tr:has(td.rank-2)::before,.board tbody tr:has(td.rank-3)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lb-rail);pointer-events:none} .board tbody tr:nth-child(5n)>td{border-bottom:0}} @media (max-width:600px){.board tbody td[data-l=Mode],.board thead th[data-sort=gameMode]{display:none}} .mode-badge{white-space:nowrap} .board td[data-l="Mode"]{white-space:nowrap} .mode-badge--abbr{position:relative} .mode-badge-short{display:none} @media (max-width:1023px){.mode-badge--abbr .mode-badge-long{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .mode-badge--abbr .mode-badge-short{display:inline}} @media (min-width:768px){.board th:last-child,.board td:last-child{padding-right:var(--sp-5)}} @media (min-width:768px) and (max-width:1023px){.board th,.board td{padding-left:var(--sp-3);padding-right:var(--sp-3)} .board th:last-child,.board td:last-child{padding-right:var(--sp-4)} .board th:nth-child(5),.board td:nth-child(5){width:120px} .board td[data-l="Class"] .cell-v{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} .board tbody td[data-l="Class"]{color:var(--text)} .lb-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b9b2a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-3) center;background-size:10px 6px;padding-right:calc(var(--sp-3) + var(--sp-4))} .controls .updated.is-sample{flex:1 1 100%;grid-column:1 / -1;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin:0;padding:var(--sp-2) var(--sp-3);border:1px solid color-mix(in srgb,var(--gold-mid) 52%,var(--border));border-left-width:2px;border-radius:var(--radius-1);background:linear-gradient(180deg,color-mix(in srgb,var(--oxblood) 16%,var(--bg-deep)),var(--bg-deep));color:var(--text-body);font-size:var(--fs-small);line-height:1.5;text-align:left} .controls .updated.is-sample b{font-size:var(--fs-micro);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--gold-bright);white-space:nowrap} @media (max-width:767px){.board thead th:nth-child(n+3):last-child,.board tbody td:nth-child(n+3):last-child{padding-right:0} .board tbody td:nth-child(n+3):not(:last-child){flex:1 1 0;min-width:0;margin-right:0;padding-right:var(--sp-2)} .board tbody td:nth-child(n+3):not(:last-child)::before{flex:0 0 4.5em;min-width:4.5em} .board tbody td:nth-child(n+3):not(:last-child) .cell-v{flex:1 1 auto;min-width:0} .board tbody td:nth-child(n+3):not(:last-child){flex:1 1 auto;min-width:max-content} .board tbody td:nth-child(n+3):not(:last-child)::before{flex:0 0 auto}} .lb-head.lb-hero .lb-sub{text-wrap:balance} @media (max-width:600px){.board-head .board-title{flex:1 1 100%;min-width:0} .board-head .random-btn{flex:1 1 0;margin-left:0;min-width:0}} @media (min-width:768px){.board-head{justify-content:flex-start;gap:var(--sp-2)} .board-head .random-btn{margin-left:0} .board-head .random-btn:first-of-type{margin-left:auto} .board-head .board-count{margin-left:var(--sp-1)}}