/* ——— Ranking (rk-*) ———
   Pódio para os três primeiros, linhas compactas para o resto e um único
   seletor de abas. Mesma linguagem visual da home e do pós-jogo. */

:is(#rank-screen, #duel-screen) .rk-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(560px, 100%);
    margin: 0 auto;
    padding: 16px 12px 120px;
}

/* Cabeçalho */
:is(#rank-screen, #duel-screen) .rk-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 0;
}

:is(#rank-screen, #duel-screen) .rk-title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 6px 12px;
    border-radius: 14px;
    line-height: 1.15;
    background: rgba(93, 242, 160, 0.12);
    border: 1px solid rgba(93, 242, 160, 0.4);
}

:is(#rank-screen, #duel-screen) .rk-score.hidden {
    display: none;
}

:is(#rank-screen, #duel-screen) .rk-score span {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fe8c2;
}

:is(#rank-screen, #duel-screen) .rk-score strong {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    font-variant-numeric: tabular-nums;
}

/* Abas: controle segmentado, sempre em uma linha */
:is(#rank-screen, #duel-screen) .rk-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 4px;
    border-radius: 16px;
    background: rgba(10, 22, 48, 0.75);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 8), 255) clamp(0, calc(g - 14), 255) clamp(0, calc(b - 24), 255) / 0.75); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.16);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.16); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-tab {
    min-height: 40px;
    padding: 6px 4px;
    border: 0;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 800;
    color: #9fbce6;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 28), 255) clamp(0, calc(g + 4), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
    background: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

:is(#rank-screen, #duel-screen) .rk-tab.active {
    color: #04213f;
    background: linear-gradient(180deg, #8fd3ff 0%, #5db8ff 100%);
    background: linear-gradient(180deg, rgb(from var(--wb-accent-bg, var(--wb-accent, rgb(131 184 255))) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b) 0%, rgb(from var(--wb-accent-bg, var(--wb-accent, rgb(131 184 255))) clamp(0, calc(r - 38), 255) g b) 100%); /* wb-theme */
    box-shadow: 0 6px 16px -8px rgba(93, 184, 255, 0.9);
    box-shadow: 0 6px 16px -8px rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 38), 255) g b / 0.9); /* wb-theme */
}

/* Filtro de modo */
:is(#rank-screen, #duel-screen) .rk-filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

:is(#rank-screen, #duel-screen) .rk-filter-wrap.hidden {
    display: none;
}

:is(#rank-screen, #duel-screen) .rk-filter-wrap > i {
    position: absolute;
    pointer-events: none;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-filter-wrap > .bi-controller {
    left: 14px;
    font-size: 1rem;
}

:is(#rank-screen, #duel-screen) .rk-filter-wrap > .bi-chevron-down {
    right: 14px;
    font-size: 0.85rem;
}

:is(#rank-screen, #duel-screen) .rk-filter {
    width: 100%;
    min-height: 46px;
    padding: 8px 38px 8px 40px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    background: rgba(18, 36, 72, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.2);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.2); /* wb-theme */
    appearance: none;
    -webkit-appearance: none;
}

:is(#rank-screen, #duel-screen) .rk-filter:focus {
    outline: 2px solid #5db8ff;
    outline: 2px solid rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 38), 255) g b); /* wb-theme */
    outline-offset: 1px;
}

:is(#rank-screen, #duel-screen) .rk-filter option {
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    background: #10214a;
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 2), 255) clamp(0, calc(g - 3), 255) clamp(0, calc(b + 2), 255)); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-list-title {
    margin: 4px 4px 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-list-wrap {
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:is(#rank-screen, #duel-screen) .rk-list-wrap.hidden {
    display: none;
}

:is(#rank-screen, #duel-screen) .rk-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Pódio */
:is(#rank-screen, #duel-screen) .rk-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    margin-bottom: 6px;
    padding: 14px 10px 0;
    border-radius: 22px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(64, 140, 255, 0.26), transparent 70%),
        linear-gradient(180deg, rgba(24, 44, 88, 0.9), rgba(12, 24, 52, 0.9));
    background: radial-gradient(120% 90% at 50% 0%, rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 67), 255) clamp(0, calc(g - 44), 255) b / 0.26), transparent 70%), linear-gradient(180deg, rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r + 6), 255) clamp(0, calc(g + 8), 255) clamp(0, calc(b + 16), 255) / 0.9), rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 6), 255) clamp(0, calc(g - 12), 255) clamp(0, calc(b - 20), 255) / 0.9)); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.22);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.22); /* wb-theme */
    overflow: hidden;
}

:is(#rank-screen, #duel-screen) .rk-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    color: inherit;
    text-align: center;
}

:is(#rank-screen, #duel-screen) .rk-pod--1 {
    order: 2;
}

:is(#rank-screen, #duel-screen) .rk-pod--2 {
    order: 1;
}

:is(#rank-screen, #duel-screen) .rk-pod--3 {
    order: 3;
}

:is(#rank-screen, #duel-screen) .rk-pod-avatar {
    position: relative;
    margin-bottom: 6px;
}

:is(#rank-screen, #duel-screen) .rk-pod-avatar .rk-avatar {
    width: 54px;
    height: 54px;
    font-size: 1.3rem;
    border-width: 3px;
}

:is(#rank-screen, #duel-screen) .rk-pod--1 .rk-pod-avatar .rk-avatar {
    width: 68px;
    height: 68px;
    font-size: 1.6rem;
}

:is(#rank-screen, #duel-screen) .rk-pod--1 .rk-avatar {
    border-color: #ffd166;
    box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.18);
}

:is(#rank-screen, #duel-screen) .rk-pod--2 .rk-avatar {
    border-color: #cfd8e6;
    border-color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 28), 255) clamp(0, calc(g - 28), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-pod--3 .rk-avatar {
    border-color: #e0a071;
}

:is(#rank-screen, #duel-screen) .rk-pod-crown {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-pod-name {
    max-width: 100%;
    font-size: 0.84rem;
    font-weight: 800;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#rank-screen, #duel-screen) .rk-pod-score {
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    font-variant-numeric: tabular-nums;
}

:is(#rank-screen, #duel-screen) .rk-pod--1 .rk-pod-score {
    font-size: 1.15rem;
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-pod-sub {
    font-size: 0.66rem;
    font-weight: 700;
    color: #9fbce6;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 28), 255) clamp(0, calc(g + 4), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-pod-step {
    display: grid;
    place-items: start center;
    width: 100%;
    margin-top: 8px;
    padding-top: 6px;
    border-radius: 12px 12px 0 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b / 0.92); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-pod--1 .rk-pod-step {
    height: 62px;
    color: #3a2800;
    background: linear-gradient(180deg, #ffd166, #e89a2b);
}

:is(#rank-screen, #duel-screen) .rk-pod--2 .rk-pod-step {
    height: 44px;
    color: #1f2a3a;
    background: linear-gradient(180deg, #dfe6f1, #a3b1c6);
    background: linear-gradient(180deg, rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 12), 255) clamp(0, calc(g - 14), 255) clamp(0, calc(b - 14), 255)), #a3b1c6); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-pod--3 .rk-pod-step {
    height: 32px;
    color: #3a1d08;
    background: linear-gradient(180deg, #e9ad80, #b8713f);
}

/* Avatar */
:is(#rank-screen, #duel-screen) .rk-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    object-fit: cover;
    background: linear-gradient(160deg, #3d8bff, #1a4fb0);
    background: linear-gradient(160deg, rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 70), 255) clamp(0, calc(g - 45), 255) b), rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r + 8), 255) clamp(0, calc(g + 43), 255) clamp(0, calc(b + 104), 255))); /* wb-theme */
    border: 2px solid rgba(131, 184, 255, 0.4);
    border: 2px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.4); /* wb-theme */
}

/* Linhas */
:is(#rank-screen, #duel-screen) .rk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 8px 12px 8px 8px;
    border-radius: 16px;
    background: rgba(18, 36, 72, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.14);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.14); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-clickable {
    cursor: pointer;
}

:is(#rank-screen, #duel-screen) .rk-clickable:active {
    background: rgba(31, 79, 142, 0.6);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r + 13), 255) clamp(0, calc(g + 43), 255) clamp(0, calc(b + 70), 255) / 0.6); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-pod.rk-clickable:active {
    background: none;
    opacity: 0.8;
}

:is(#rank-screen, #duel-screen) .rk-clickable:focus-visible {
    outline: 2px solid #5db8ff;
    outline: 2px solid rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 38), 255) g b); /* wb-theme */
    outline-offset: 2px;
}

:is(#rank-screen, #duel-screen) .rk-pos {
    flex: none;
    width: 28px;
    font-size: 0.9rem;
    font-weight: 900;
    text-align: center;
    color: #9fbce6;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 28), 255) clamp(0, calc(g + 4), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
    font-variant-numeric: tabular-nums;
}

:is(#rank-screen, #duel-screen) .rk-row-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

:is(#rank-screen, #duel-screen) .rk-row-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-row-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#rank-screen, #duel-screen) .rk-row-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9fbce6;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 28), 255) clamp(0, calc(g + 4), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#rank-screen, #duel-screen) .rk-row-score {
    flex: none;
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    font-variant-numeric: tabular-nums;
}

:is(#rank-screen, #duel-screen) .rk-me-tag {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #04210f;
    background: #5df2a0;
}

:is(#rank-screen, #duel-screen) .rk-row--me {
    background: rgba(93, 242, 160, 0.12);
    border-color: rgba(93, 242, 160, 0.5);
}

:is(#rank-screen, #duel-screen) .rk-row--me .rk-pos {
    color: #5df2a0;
    color: rgb(from var(--wb-mint, rgb(93 242 160)) r g b); /* wb-theme */
}

/* Vazio, carregando e erro */
:is(#rank-screen, #duel-screen) .rank-empty,
:is(#rank-screen, #duel-screen) .rk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px !important;
    border-radius: 18px;
    font-size: 0.9rem;
    text-align: center;
    color: #b9d6ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 54), 255) clamp(0, calc(g + 30), 255) b); /* wb-theme */
    background: rgba(18, 36, 72, 0.5);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.5); /* wb-theme */
    border: 1px dashed rgba(131, 184, 255, 0.28);
    border: 1px dashed rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.28); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-empty i {
    font-size: 1.8rem;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-empty strong {
    font-size: 1rem;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
}

/* Painéis de amigos e duelos */
:is(#rank-screen, #duel-screen) .rk-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    background: rgba(18, 36, 72, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.18);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.18); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-panel.hidden {
    display: none;
}

:is(#rank-screen, #duel-screen) .rk-panel-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:is(#rank-screen, #duel-screen) .rk-panel-head strong {
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-panel-head small {
    font-size: 0.78rem;
    line-height: 1.3;
    color: #b9d6ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 54), 255) clamp(0, calc(g + 30), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
}

:is(#rank-screen, #duel-screen) .rk-input {
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    background: rgba(10, 22, 48, 0.8);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 8), 255) clamp(0, calc(g - 14), 255) clamp(0, calc(b - 24), 255) / 0.8); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.25);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.25); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-input::placeholder {
    color: #7f9cc8;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 4), 255) clamp(0, calc(g - 28), 255) clamp(0, calc(b - 55), 255)); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-input:focus {
    outline: 2px solid #5db8ff;
    outline: 2px solid rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 38), 255) g b); /* wb-theme */
    outline-offset: 1px;
}

:is(#rank-screen, #duel-screen) .rk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 800;
    color: #04213f;
    background: linear-gradient(180deg, #8fd3ff 0%, #5db8ff 100%);
    background: linear-gradient(180deg, rgb(from var(--wb-accent-bg, var(--wb-accent, rgb(131 184 255))) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b) 0%, rgb(from var(--wb-accent-bg, var(--wb-accent, rgb(131 184 255))) clamp(0, calc(r - 38), 255) g b) 100%); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-btn--ghost {
    color: #cfe2ff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 28), 255) clamp(0, calc(g - 18), 255) b); /* wb-theme */
    background: rgba(10, 22, 48, 0.6);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 8), 255) clamp(0, calc(g - 14), 255) clamp(0, calc(b - 24), 255) / 0.6); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.25);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.25); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-btn--danger {
    min-height: 36px;
    padding: 4px 10px;
    font-size: 0.74rem;
    color: #ffc9c9;
    background: none;
    border: 1px solid rgba(255, 120, 120, 0.4);
}

:is(#rank-screen, #duel-screen) .rk-btn--go {
    color: #04210f;
    background: linear-gradient(180deg, #5df2a0 0%, #1fc978 100%);
}

:is(#rank-screen, #duel-screen) .rk-btn--wide {
    width: 100%;
}

:is(#rank-screen, #duel-screen) .rk-friends,
:is(#rank-screen, #duel-screen) .rk-duels {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

:is(#rank-screen, #duel-screen) .rk-friend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 14px;
    background: rgba(10, 22, 48, 0.55);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 8), 255) clamp(0, calc(g - 14), 255) clamp(0, calc(b - 24), 255) / 0.55); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-friend .rk-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
}

:is(#rank-screen, #duel-screen) .rk-panel-msg:empty {
    display: none;
}

:is(#rank-screen, #duel-screen) .rk-panel-msg {
    font-size: 0.8rem;
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

/* Aba Duelos: desafios abertos + placar de duelistas */
:is(#rank-screen, #duel-screen) .rk-duel-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

:is(#rank-screen, #duel-screen) .rk-duel-section + .rk-duel-section {
    margin-top: 10px;
}

:is(#rank-screen, #duel-screen) .rk-duel-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 2px 2px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-duel-heading .bi-trophy-fill {
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-challenge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(31, 201, 120, 0.16), rgba(18, 36, 72, 0.72));
    background: linear-gradient(135deg, rgba(31, 201, 120, 0.16), rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72)); /* wb-theme */
    border: 1px solid rgba(93, 242, 160, 0.3);
}

:is(#rank-screen, #duel-screen) .rk-challenge .rk-row-sub b {
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-challenge .rk-btn {
    flex-shrink: 0;
    min-height: 38px;
    padding: 6px 14px;
}

:is(#rank-screen, #duel-screen) .rk-medal {
    font-size: 1.05rem;
}

:is(#rank-screen, #duel-screen) .rk-medal--1 {
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-medal--2 {
    color: #cfd8e6;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 28), 255) clamp(0, calc(g - 28), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-medal--3 {
    color: #e0a173;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) clamp(0, calc(r - 31), 255) clamp(0, calc(g - 48), 255) clamp(0, calc(b + 13), 255)); /* wb-theme */
}

:is(#rank-screen, #duel-screen) .rk-duelist-rate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    width: 64px;
}

:is(#rank-screen, #duel-screen) .rk-duelist-rate strong {
    font-size: 1rem;
    font-weight: 900;
    color: #eaf2ff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 1), 255) clamp(0, calc(g - 2), 255) b); /* wb-theme */
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

:is(#rank-screen, #duel-screen) .rk-rate-bar {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(131, 184, 255, 0.18);
    background: rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.18); /* wb-theme */
    overflow: hidden;
}

:is(#rank-screen, #duel-screen) .rk-rate-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5df2a0, #1fc978);
}

:is(#rank-screen, #duel-screen) .rk-play {
    margin-top: 6px;
    animation: none;
}

/* Nomes longos encolhem com reticências em vez de alargar a página */
:is(#rank-screen, #duel-screen) .rk-row-name > span:first-child,
:is(#rank-screen, #duel-screen) .rk-row,
:is(#rank-screen, #duel-screen) .rk-list,
:is(#rank-screen, #duel-screen) .rk-page > * {
    min-width: 0;
}

:is(#rank-screen, #duel-screen) .rk-page {
    padding-top: 4px;
    overflow-x: hidden;
}

:is(#rank-screen, #duel-screen) #duels-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(#rank-screen, #duel-screen) .rk-list-title.hidden {
    display: none;
}

:is(#rank-screen, #duel-screen) .rk-input::placeholder {
    text-transform: none;
}

/* A tela nunca passa da largura do aparelho, por mais largo que seja o conteúdo */
:is(#rank-screen, #duel-screen) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

:is(#rank-screen, #duel-screen) .rk-page {
    max-width: 100%;
    min-width: 0;
}

:is(#rank-screen, #duel-screen) .rk-duelist .rk-pos.rk-pos--medal {
    background: none;
    box-shadow: none;
    border: 0;
}