.rank-page { min-height: 100vh; display: flex; flex-direction: column; }
.rank-page main { flex: 1; }
.rank-cover { display: grid; grid-template-columns: minmax(0, 1fr) 34%; background: #214537; color: #fff9e8; }
.rank-cover > div { align-self: center; padding: clamp(24px, 5vw, 42px) clamp(20px, 4.5vw, 36px); }
.rank-cover h1 { margin: 0 0 12px; font-size: clamp(31px, 5.4vw, 48px); }
.rank-cover p { max-width: 34em; margin: 0; color: #e3ecdf; font-size: 15px; line-height: 1.65; }
.rank-cover img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.rank-board { padding: 28px clamp(18px, 4.5vw, 36px); }
.rank-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rank-toolbar h2 { font-size: clamp(23px, 4vw, 29px); }
#rank-refresh { min-height: 40px; padding: 7px 14px; border: 1px solid #a7bcaa; border-radius: 6px; background: #f3f6ef; color: #284a37; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
#rank-refresh:hover { background: #e3ecdd; }
#rank-refresh:focus-visible { outline: 3px solid #ad582d; outline-offset: 2px; }
#rank-refresh:disabled { cursor: progress; color: #566457; }
#rank-status { margin: 10px 0 14px; color: #475b4d; font-size: 14px; line-height: 1.65; }
#rank-status[data-state="empty"], #rank-status[data-state="error"] { margin: 17px 0; padding: 20px; border-radius: 6px; background: #eef2e8; }
#rank-table { width: 100%; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
#rank-table th, #rank-table td { padding: 12px 10px; }
#rank-table thead th { background: #e5ecdf; color: #415747; text-align: left; font-size: 13px; }
#rank-table thead th:first-child { width: 22%; border-radius: 5px 0 0 5px; }
#rank-table thead th:last-child { width: 25%; border-radius: 0 5px 5px 0; }
#rank-table td, #rank-table tbody th { border-bottom: 1px solid #d6decf; text-align: left; }
#rank-table tbody th { font-size: 16px; overflow-wrap: anywhere; }
#rank-table tbody th, #rank-table tbody td { padding-block: 7px; height: 66px; }
.rank-identity { display: flex; align-items: center; gap: 10px; }
.rank-nickname { min-width: 0; }
.rank-portrait { display: inline-block; flex: 0 0 47px; height: 52px; overflow: hidden; position: relative; background: #e8ecdf; border-radius: 8px; }
#rank-table [data-first] .rank-portrait { background: #e8dec4; }
.rank-portrait img { display: block; width: 95px; height: auto; max-width: none; position: absolute; left: 50%; top: -1px; transform: translateX(-50%); }
.rank-portrait-empty::before, .rank-portrait-empty::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); background: #acb6a8; border-radius: 50%; }
.rank-portrait-empty::before { width: 14px; height: 14px; top: 9px; }
.rank-portrait-empty::after { width: 27px; height: 24px; top: 26px; }
#rank-table tbody td:first-child { font-size: 14px; color: #37523e; }
#rank-table [data-first] { background: #f5efda; }
#rank-table td:last-child, #rank-table thead th:last-child { text-align: right; }
#rank-table td:last-child { font-weight: 750; }
.rank-rules { margin: 16px 0 0; color: #586759; font-size: 13px; line-height: 1.65; }
.rank-entry { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 23px clamp(18px, 4.5vw, 36px); background: #e8ede2; }
.rank-entry h2 { font-size: 21px; }
.rank-entry p { margin-top: 7px; max-width: 46ch; font-size: 14px; line-height: 1.7; }
@media(max-width: 580px) {
  .rank-cover { grid-template-columns: 1fr; }
  .rank-cover img { height: clamp(88px, 25vw, 135px); object-position: center 40%; }
  .rank-cover > div { padding-block: 22px 18px; }
  .rank-entry { flex-wrap: wrap; }
  #rank-table th, #rank-table td { padding-inline: 6px; }
  #rank-table thead th:first-child { width: 24%; }
  #rank-table tbody th { font-size: 15px; }
}