/* Each rank and its rewards form one jade panel, separated from the next rank. */
:root body .rank-showcase .rank-showcase-panel {
  padding: 0; min-width: 0; overflow: hidden; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
:root body .rank-showcase-panel::before, :root body .rank-showcase-panel::after { display: none; }
:root body .rank-showcase .table-wrap { min-width: 0; width: 100%; overflow: visible; }
:root body .rank-showcase .bx-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: transparent; }
:root body .rank-showcase .bx-table thead { background: #07312ce6; }
:root body .rank-showcase .bx-table th {
  padding: 13px 16px; color: #ffe1a0; font-family: var(--f-read); font-size: var(--fs-xs);
  letter-spacing: .04em; background: transparent !important; border-block: 1px solid #d6b66d70;
  white-space: normal; text-shadow: 0 0 14px #dbb55624;
}
:root body .rank-showcase .bx-table th:first-child { width: 106px; border-left: 1px solid #d6b66d70; border-radius: 12px 0 0 12px; }
:root body .rank-showcase .bx-table th:nth-child(3) { width: 24%; }
:root body .rank-showcase .bx-table th:last-child { width: 150px; border-right: 1px solid #d6b66d70; border-radius: 0 12px 12px 0; }
:root body .rank-showcase .bx-table thead + .bx-entry::before { content: ''; display: table-row; height: 14px; }
:root body .rank-showcase .bx-entry { background: #07362ee0; }
:root body .rank-showcase .bx-table tbody > tr[data-rank] { background: linear-gradient(100deg, #265c4845, #0a332d80) !important; }
:root body .rank-showcase .bx-table tbody > tr[data-rank='1'] { background: linear-gradient(100deg, #b895373a, #15514578 36%, #0b332d88) !important; }
:root body .rank-showcase .bx-table tbody > tr[data-rank] > td {
  padding: 15px 16px; background: transparent !important; border-top: 1px solid #d6b66d90;
  border-bottom: 1px solid #dbbf712c !important; color: #e7f4eb; font-family: var(--f-read);
  font-size: var(--fs-base); overflow-wrap: anywhere;
}
:root body .rank-showcase .bx-table tr[data-rank] > td:first-child { border-left: 1px solid #d6b66d90; border-radius: 14px 0 0 0; }
:root body .rank-showcase .bx-table tr[data-rank] > td:last-child { border-right: 1px solid #d6b66d90; border-radius: 0 14px 0 0; }
:root body .rank-showcase .bx-table tr.bx-me > td:first-child { box-shadow: inset 3px 0 0 #69d7b8; }
:root body .rank-showcase .bx-rank-label { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; }
:root body .rank-showcase .bx-rank-1 .bx-rank-label { color: #ffe5a7; text-shadow: 0 0 13px #ffc25466; }
:root body .rank-showcase .bx-rank-crown { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 0 7px #ffbf5360); }
:root body .rank-showcase .bx-table .bx-empty { color: #aecbc2; font-size: var(--fs-sm); }
:root body .rank-showcase .bx-character { display: block; font-weight: 650; }
:root body .rank-showcase .bx-character-server { display: block; color: #a4d6c5; font-size: var(--fs-xs); margin-top: 4px; }
:root body .rank-showcase .bx-table td.num { font-variant-numeric: tabular-nums; font-weight: 650; }
:root body .rank-showcase .bx-table tr[data-rank] + tr > .bx-gift-cell {
  width: auto; max-width: 0; padding: 2px 16px 16px !important;
  border: 1px solid #d6b66d90 !important; border-top: 0 !important; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #072d2980, #062c27d6) !important;
}
:root body .rank-showcase .bx-separator, :root body .rank-showcase .bx-separator tr, :root body .rank-showcase .bx-separator td { background: transparent !important; border: 0 !important; box-shadow: none !important; }
:root body .rank-showcase .bx-separator td { height: 18px; padding: 0 !important; }
:root body .rank-showcase .rank-rewards { color: #e3f1e8; }
:root body .rank-showcase .rank-rewards > summary { min-height: 43px; padding: 10px 0; gap: 8px; color: #ffe3a5; font-size: var(--fs-sm); }
:root body .rank-showcase .rank-rewards > summary::before { width: 12px; font-size: 1.1rem; }
:root body .rank-showcase .rank-rewards > summary .badge { padding: 2px 8px; color: #b6d6c8; border-color: #b9c69040; background: #56836924; font-size: var(--fs-2xs); }
:root body .rank-showcase .rank-rewards > summary:focus-visible { outline: 2px solid #ffe3a5; outline-offset: 2px; border-radius: 5px; }
:root body .rank-showcase .bx-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 7px; padding: 4px 0; }
:root body .rank-showcase .bx-gifts .tn-reward { display: flex; flex-direction: column; width: auto; min-width: 0; gap: 5px; padding: 4px 0; align-items: center; text-align: center; border: 0; background: transparent; }
:root body .rank-showcase .tn-reward > .slot { width: 44px; height: 44px; margin: 0; border-radius: 9px; background: #082c29; border-color: #d6b66d60; box-shadow: inset 0 0 12px #52b69217; }
:root body .rank-showcase .tn-reward > .slot.rarity-epic, :root body .rank-showcase .tn-reward > .slot.rarity-legendary { border-color: #b399f380; background: #20243a90; }
:root body .rank-showcase .tn-reward .nm { width: 100%; min-height: 2.8em; height: auto; font-size: var(--fs-2xs); line-height: 1.4; color: #dcefe5; white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
:root body .rank-showcase .tn-reward .ct { margin-top: auto; grid-column: auto; align-self: auto; font-family: var(--f-read); color: #ffe29a; font-size: .75rem; line-height: 1.4; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root body .rank-showcase .rank-rewards > .hint { margin: 12px 0 0; color: #abcdbf; font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 600px) {
  :root body .rank-showcase .bx-table, :root body .rank-showcase .bx-table tbody { display: block; }
  :root body .rank-showcase .bx-table thead { display: none; }
  :root body .rank-showcase .bx-entry { border: 1px solid #d6b66d90; border-radius: 13px; overflow: hidden; margin-bottom: 14px; }
  :root body .rank-showcase .bx-table tbody > tr[data-rank] { display: grid; padding: 12px 9px; grid-template-columns: 43px minmax(0, 1fr) auto; gap: 5px 6px; border-bottom: 1px solid #dbbf7140; }
  :root body .rank-showcase .bx-table tbody > tr[data-rank] > td { padding: 2px 0; border: 0 !important; box-shadow: none !important; font-size: var(--fs-sm); border-radius: 0; }
  :root body .rank-showcase .bx-rank-label { flex-direction: column; gap: 2px; }
  :root body .rank-showcase .bx-rank-crown { width: 23px; height: 23px; }
  :root body .rank-showcase .bx-table .btn--sm { padding: 6px 7px; min-height: 38px; font-size: var(--fs-2xs); }
  :root body .rank-showcase .bx-table tr[data-rank] + tr { display: block; }
  :root body .rank-showcase .bx-table tr[data-rank] + tr > .bx-gift-cell { display: block; width: auto; max-width: none; padding: 0 10px 12px !important; border: 0 !important; }
  :root body .rank-showcase .bx-separator { display: none !important; }
  :root body .rank-showcase .bx-gifts { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px 6px; }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { :root body .rank-showcase .bx-entry { background: #07362e !important; } }
@media (forced-colors: active) { :root body .rank-showcase .bx-table td, :root body .rank-showcase .bx-table th, :root body .rank-showcase .bx-entry { background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; } }