#rankingPage{max-width:800px;margin:0 auto}.ranking-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.ranking-heading h1{margin:7px 0}.ranking-heading p{font-size:13px;color:#98a9bc;line-height:1.8}.ranking-heading .eyebrow{color:#91c9c5}.ranking-count{font-size:26px;white-space:nowrap;color:#c9e6df}.ranking-searchbar{display:flex;gap:10px;margin:22px 0 12px}.ranking-searchbar .search{flex:1;max-width:540px}.ranking-searchbar input{width:100%}.ranking-status{color:#94a5bb;font-size:12px;line-height:1.7;margin:12px 0}.ranking-table-wrap{border:1px solid #2d3d50;border-radius:12px;overflow:hidden;background:#101b2b}.ranking-table{width:100%;border-collapse:collapse;table-layout:fixed}.ranking-table th{background:#172536;font-size:11px;font-weight:500;color:#9fb2c8;text-align:left;padding:12px}.ranking-table td{border-top:1px solid #253448;padding:12px;vertical-align:middle}.ranking-table th:first-child{width:65px}.ranking-table th:nth-child(3){width:145px}.ranking-table th:nth-child(4){width:95px}.ranking-table th:last-child{width:150px;text-align:right}.ranking-table tr[data-ranking-index]{cursor:pointer;touch-action:manipulation}.ranking-table tr[data-ranking-index]:hover,.ranking-table tr[data-ranking-index]:focus-visible{background:#192d40;outline:1px solid #7badae;outline-offset:-1px}.ranking-rank{color:#8da1ba;font-variant-numeric:tabular-nums}.ranking-identity b{font-size:14px;color:#e5ebf4;font-weight:600;overflow-wrap:anywhere}.ranking-identity small{display:block;font-size:11px;color:#8c9db2;margin-top:5px}.ranking-mobile-guild{display:none}.ranking-guild span{color:#e5ebf4;font-size:12px}.ranking-job{font-size:12px;color:#aab7c9}.ranking-power{text-align:right;font-variant-numeric:tabular-nums}.ranking-power strong{display:block;color:#e5ebf4;font-size:17px;font-weight:600}.ranking-power button{display:inline-block;background:transparent;border:0;font-size:11px;color:#a9c9d1;padding:3px 0;margin-top:5px;cursor:pointer}.needs-review .ranking-identity small,.needs-review .ranking-power button{color:#e2bc7b}.ranking-pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin:20px 0;color:#abbdd0;font-size:12px}.ranking-dialog{box-sizing:border-box;width:min(850px,calc(100vw - 28px));max-width:none;max-height:90dvh;padding:24px;background:#111d2d;color:#e6ebf4;border:1px solid #41546d;border-radius:15px;overflow:auto}.ranking-dialog::backdrop{background:#030912b8}.ranking-dialog-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ranking-dialog-heading h2{margin:5px 0;font-size:24px}.ranking-dialog-heading p{color:#96a8bd;font-size:12px;margin:5px 0 16px}.ranking-dialog-note{font-size:12px;color:#92a6bd;line-height:1.8}.ranking-dialog .history-stat{margin:0}.ranking-dialog .chart-stage{touch-action:pan-y}.ranking-dialog .chart-legend{margin-top:8px}
@media(max-width:700px){.ranking-heading{align-items:flex-start}.ranking-heading h1{font-size:23px}.ranking-heading p{font-size:12px;margin:7px 0}.ranking-count{font-size:20px;margin-top:24px}.ranking-searchbar{margin-top:14px}.ranking-searchbar .search{max-width:none}.ranking-table th,.ranking-table td{padding:10px 8px}.ranking-table th:first-child{width:38px}.ranking-table th:last-child{width:110px}.ranking-table th:nth-child(3),.ranking-table th:nth-child(4),.ranking-guild,.ranking-job{display:none}.ranking-mobile-guild{display:block;color:#e5ebf4;font-size:11px;margin-top:5px}.ranking-identity b{font-size:13px}.ranking-identity small{font-size:10px}.ranking-power strong{font-size:16px}.ranking-dialog{padding:16px;width:calc(100vw - 20px);max-height:92dvh}.ranking-dialog-heading h2{font-size:21px}.ranking-dialog .chart-tools{gap:3px}.mobile-tabs{grid-template-columns:repeat(5,minmax(0,1fr));padding-left:3px;padding-right:3px;gap:1px;overflow:hidden}.mobile-tabs button{white-space:nowrap}}

.ranking-more{display:flex;justify-content:center;align-items:center;gap:14px;min-height:64px;color:#9db1c7;font-size:12px}.ranking-table .ranking-alliance .ranking-identity b,.ranking-table .ranking-alliance .ranking-guild span,.ranking-table .ranking-alliance .ranking-job,.ranking-table .ranking-alliance .ranking-mobile-guild,.ranking-table .ranking-alliance .ranking-power strong{color:#8cff7a}.ranking-table .ranking-alliance .ranking-identity b{text-shadow:0 0 10px #8cff7a24}.ranking-table .ranking-job{color:#e5ebf4}
@media(min-width:701px){.ranking-table th:nth-child(2){width:220px}.ranking-table th:nth-child(3){width:145px}.ranking-table th:nth-child(4){width:100px}.ranking-table th:last-child{width:160px}}

#rosterBody tr[data-member-trend]{cursor:pointer;touch-action:manipulation}
#rosterBody tr[data-member-trend]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#rosterPage .page-heading{align-items:flex-start}
#rosterPage .page-heading>.pill{flex-shrink:0;white-space:nowrap}

/* Keep the character, value, controls and graph together on phone screens. */
@media(max-width:700px){
 .ranking-dialog{padding:12px;max-height:calc(100dvh - 24px);overscroll-behavior:contain}
 .ranking-dialog-heading{align-items:center;gap:10px;margin-bottom:10px}
 .ranking-dialog-heading>div{min-width:0;overflow-wrap:anywhere}
 .ranking-dialog-heading .eyebrow{display:none}
 .ranking-dialog-heading h2{font-size:19px;line-height:1.25;margin:0}
 .ranking-dialog-heading p{font-size:11px;line-height:1.4;margin:4px 0 0}
 .ranking-dialog-heading form{flex-shrink:0;margin:0}
 .ranking-dialog-heading .button{min-height:36px}
 .ranking-dialog .history-stat{padding:10px;border-radius:12px}
 .ranking-dialog .chart-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 .ranking-dialog .chart-heading>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
 .ranking-dialog .chart-title{margin:0}
 .ranking-dialog .chart-title h2{font-size:12px}
 .ranking-dialog .chart-heading strong{font-size:23px;line-height:1.2;margin:0;text-align:right}
 .ranking-dialog .chart-heading>div>span{grid-column:1/-1;text-align:right;line-height:1.5;margin-top:3px}
 .ranking-dialog .chart-tools{width:100%;max-width:none;gap:6px;justify-content:space-between}
 .ranking-dialog .chart-tools button{flex:1;min-width:0;min-height:38px;padding:0 6px}
 .ranking-dialog .chart-tools button[data-chart-action=all]{min-width:44px}
 .ranking-dialog .chart-legend:has(>button:only-child){display:none}
 .ranking-dialog .chart-stage{margin-top:6px}
 .ranking-dialog .history-line{height:clamp(150px,calc(100dvh - 330px),210px)}
 .ranking-dialog .chart-footer{justify-content:center;gap:0}
 .ranking-dialog .chart-footer small{display:none}
 .ranking-dialog-note{font-size:11px;line-height:1.5;margin:8px 2px 0}
}