.roster-chart{--tank:#4f8fe8;--healer:#4fc98a;--dps:#d9534a;--offtank:#e0a43a;color:#e9e3d8;font-variant-numeric:tabular-nums;margin:36px 0 40px;font:400 14px/1.5 Inter,system-ui,sans-serif}.roster-chart ul{margin:0;padding:0;list-style:none}.roster-chart [data-role=Tank]{--role:var(--tank)}.roster-chart [data-role=Healer]{--role:var(--healer)}.roster-chart [data-role=DPS]{--role:var(--dps)}.roster-chart [data-role=OffTank]{--role:var(--offtank)}.roster-role-icon{border-radius:50%;flex:none}.roster-offtank-icon{flex:none;display:inline-block;position:relative}.roster-offtank-icon>img:last-child{box-shadow:0 0 0 2px var(--night);position:absolute;bottom:-4px;right:-4px}.roster-tip{cursor:pointer;outline:none}.roster-tip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.roster-tooltip{z-index:1000;color:#e9e3d8;pointer-events:none;background:#0b1824;border:1px solid #c6ad8866;min-width:210px;max-width:280px;padding:12px 14px;font:400 14px/1.4 Inter,system-ui,sans-serif;position:fixed;transform:translate(-50%,calc(-100% - 10px));box-shadow:0 10px 30px #000a}.roster-tooltip[data-below]{transform:translate(-50%,10px)}.roster-tooltip-head{align-items:center;gap:10px;display:flex}.roster-tooltip-head strong{color:#fff5e6;font:500 18px/1.1 Cormorant Garamond,Georgia,serif;display:block}.roster-tooltip-head span{color:#a49d92;font-size:13px;display:block}.roster-tooltip ul{border-top:1px solid #ffffff14;margin:10px 0 0;padding:10px 0 0;list-style:none}.roster-tooltip li{color:#c6bdaf;align-items:center;gap:8px;padding:3px 0;display:flex}.roster-tooltip-label{white-space:nowrap;flex:1}.roster-tooltip li b{color:#fff5e6;font-variant-numeric:lining-nums tabular-nums;font-family:Cormorant Garamond,Georgia,serif;font-size:17px;font-weight:600}.roster-tooltip li[data-active]{color:#fff5e6}.roster-tooltip li[data-active] .roster-tooltip-label{font-weight:500}.roster-tip-class{border:1px solid #00000080;flex:none}.roster-role-bar{gap:3px;height:56px;display:flex}.roster-role-bar>span{background:var(--role);flex-basis:0;justify-content:center;align-items:center;min-width:10px;transition:filter .15s;display:flex}.roster-role-bar>span:hover,.roster-role-bar>span:focus-visible{filter:brightness(1.2)}.roster-role-bar b{color:#06101a;font-variant-numeric:lining-nums tabular-nums;font-family:Cormorant Garamond,Georgia,serif;font-size:20px;font-weight:600;line-height:1}.roster-role-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid;margin-top:24px!important}.roster-role-tiles li{border-top:3px solid var(--role);grid-template-rows:auto auto;grid-template-columns:44px 1fr;align-items:center;column-gap:12px;padding-top:12px;display:grid}.roster-role-tiles li>:first-child{grid-row:span 2}.roster-role-count{color:#fff5e6;font-variant-numeric:lining-nums tabular-nums;font-family:Cormorant Garamond,Georgia,serif;font-size:40px;font-weight:600;line-height:1}.roster-role-label{color:#c6bdaf;font-size:14px}.roster-columns{height:440px;margin-left:28px;position:relative}.roster-grid{pointer-events:none;position:absolute;inset:32px 0 92px}.roster-grid span{border-top:1px solid #ffffff14;position:absolute;left:0;right:0}.roster-grid b{color:#a49d92;text-align:right;font-variant-numeric:lining-nums tabular-nums;width:20px;font-family:Cormorant Garamond,Georgia,serif;font-size:15px;font-weight:600;line-height:1;position:absolute;top:-8px;left:-28px}.roster-columns ul{grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;display:grid;position:absolute;inset:0}.roster-columns li{grid-template-rows:32px minmax(0,1fr) 92px;justify-items:center;min-width:0;height:100%;display:grid}.roster-column-wrap{grid-row:2;justify-content:center;align-items:flex-end;width:100%;height:100%;min-height:0;display:flex}.roster-column-total{color:#fff5e6;font-variant-numeric:lining-nums tabular-nums;font-family:Cormorant Garamond,Georgia,serif;font-size:22px;font-weight:600;line-height:1;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.roster-column{flex-direction:column-reverse;flex:none;gap:2px;width:min(60px,100%);display:flex;position:relative}.roster-segment{background:var(--role);flex-basis:0;min-height:8px;transition:filter .15s}.roster-segment:hover,.roster-segment:focus-visible{filter:brightness(1.2)}.roster-column-label{flex-direction:column;grid-row:3;align-items:center;gap:8px;padding-top:12px;display:flex}.roster-class-icon{border:1px solid #00000080}.roster-column-name{color:var(--class-color);font:500 16px/1.1 Cormorant Garamond,Georgia,serif}.roster-legend{color:#c6bdaf;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:14px;display:flex}.roster-legend span{align-items:center;gap:8px;display:inline-flex}.roster-legend i{background:var(--role);width:14px;height:14px;display:inline-block}@media (prefers-reduced-motion:reduce){.roster-role-bar>span,.roster-segment{transition:none}}@media (max-width:767px){.roster-role-bar{height:44px}.roster-role-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.roster-role-count{font-size:32px}.roster-columns{height:300px;margin-left:22px}.roster-grid{inset:32px 0 48px}.roster-grid b{left:-24px}.roster-columns ul{gap:4px}.roster-columns li{grid-template-rows:32px minmax(0,1fr) 48px}.roster-column-name{display:none}.roster-class-icon{width:28px;height:28px}}.roster-tooltip .roster-offtank-icon>img:last-child{width:11px;height:11px;bottom:-3px;right:-3px;box-shadow:0 0 0 1.5px #0b1824}
