:root{
    --darker-blue : #0b1a37;
    --dark-blue : #0B1E36;
    --light-blue : #0e243e;
    --champagne-gold : #c9a84c;
    --accent-rgb : 201, 168, 76;
    --error-rgb : 192, 57, 43;
    --text-rgb : 255, 255, 255;
}

.ranking_main_style{
    background-color: var(--darker-blue);
    min-height: 100vh;

    display: flex;
    justify-content: center;

    padding-bottom: 4rem;
}

.ranking_first_section{
    width: 100%;
}

.ranking_container{
    max-width: 46rem;
    margin: 3rem auto 0;
    padding: 0 1.2rem;
}

.ranking_header{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2.2rem;
}
/* ===== 【重新設計】網站總瀏覽次數 =====
   從「標題正上方、置中、獨立一行」改成右上角一顆低調的小徽章，
   讓它從「跟標題搶第一眼視線」的隊伍裡脫鉤，變成隨時看得到、
   但不會干擾主標題視覺焦點的背景資訊。align-self: flex-end
   讓它靠右對齊，不佔用置中欄的視覺重量。 */
.ranking_total_views{
    position: fixed;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    background-color: rgba(var(--text-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 999px;

    padding: 0.3rem 0.85rem;
    margin: 0 0 1.6rem;

    color: rgba(var(--text-rgb), 0.5);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    top: 6rem;
    right: 2rem;
}
.ranking_title{
    color: rgba(var(--text-rgb), 0.92);
    font-size: 2.4rem;
    letter-spacing: 4px;
    margin-bottom: 0.7rem;
    font-weight: 400;
}
.ranking_subtitle{
    color: var(--champagne-gold);
    font-size: 1rem;
    letter-spacing: 2px;
}

.ranking_subtitle2{
    display: inline-block;

    margin-top: 1.1rem;
    padding: 0.4rem 0.6rem;

    background-color: rgba(var(--text-rgb), 0.03);
    border: 1px solid rgba(var(--text-rgb), 0.08);
    border-radius: 4px;
    
    color: rgba(var(--text-rgb), 0.55);
    font-size: 0.72rem;
    letter-spacing: 1px;
    line-height: 1.6;
}

.ranking_mode_tabs{
    display: flex;
    justify-content: center;
    gap: 0.6rem;

    margin-bottom: 1.4rem;
}
.ranking_mode_tab{
    background-color: transparent;
    color: rgba(var(--text-rgb), 0.68);

    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 5px;

    padding: 0.5rem 1.4rem;

    font-size: 1.15rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    letter-spacing: 2px;

    cursor: pointer;
    transition: all 200ms ease;
}

.ranking_mode_tab.ranking_mode_tab_active{
    background-color: var(--champagne-gold);
    color: var(--darker-blue);
    border-color: var(--champagne-gold);
    font-weight: 500;
}

/* ===== 【新增】玩家總榜的指標切換按鈕（平均WPM／平均正確率／在線時長）選中狀態 =====
   配色跟 .ranking_mode_tab_active 一致，但這裡套用在 <button class="ranking_select"> 上，
   所以另外開一個 class，不直接沿用 .ranking_mode_tab_active
   （那個選擇器寫死要同時有 .ranking_mode_tab，這裡的按鈕沒有那個 class，套不到）*/
.ranking_select.ranking_select_active{
    background-color: var(--champagne-gold);
    color: var(--darker-blue);
    border-color: var(--champagne-gold);
    font-weight: 500;
}

.ranking_selector_row{
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;

    margin-bottom: 2rem;
}
.ranking_select{
    background-color: var(--dark-blue);
    color: rgba(var(--text-rgb), 0.92);

    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 5px;

    padding: 0.6rem 0.9rem;

    font-size: 0.9rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    letter-spacing: 1px;

    cursor: pointer;
    max-width: 16rem;
}
.ranking_select:focus{
    outline: none;
    border-color: var(--champagne-gold);
}

/* ===== 【重新設計】玩家總榜的 7 顆指標按鈕 =====
   原本 7 顆按鈕直接平鋪在同一個 flex-wrap 列裡，長短不一
   （「積分」vs「平均正確率最高」），折行位置每次都不一樣，看起來很亂。
   改成依語意分兩組：「表現」（跟單次測驗表現有關）、「活躍度」（跟
   使用網站的頻率/時長有關），每組前面掛一個小標籤當視覺錨點，
   按鈕文字也同步精簡（詳細採計標準本來就會另外顯示在副標2），
   讓每顆按鈕長度更接近、排起來更整齊。 */
.ranking_player_metric_row{
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}
.ranking_metric_group{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.ranking_metric_group_label{
    color: rgba(var(--text-rgb), 0.38);
    font-size: 0.72rem;
    letter-spacing: 3px;
    margin-right: 0.4rem;
    white-space: nowrap;
}
.ranking_metric_group .ranking_select{
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
}

.ranking_list_wrap{
    background-color: var(--dark-blue);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;


    overflow: hidden;
}

.ranking_list_header,
.ranking_row{
    display: grid;
    grid-template-columns: 4.5rem 1fr 10rem 6rem;
    align-items: center;

    padding: 0.8rem 1.2rem;
}

.ranking_list_header{
    background-color: rgba(var(--accent-rgb), 0.08);
    color: rgba(var(--text-rgb), 1);

    font-size: 0.8rem;
    letter-spacing: 2px;
}

.ranking_row{
    color: rgba(var(--text-rgb), 0.92);
    font-size: 0.95rem;

    border-top: 1px solid rgba(var(--accent-rgb), 0.12);

    transition: background-color 150ms ease;
}
.ranking_row:hover{
    background-color: rgba(var(--accent-rgb), 0.06);
}
.ranking_row_top3{
    color: var(--champagne-gold);
    font-weight: 500;
}

/* ===== 【新增】標記「這一列是我自己」，金色外框 + 淡金色底，跟 top3 的純文字變色做出區隔 ===== */
.ranking_row_self{
    background-color: rgba(var(--accent-rgb), 0.12);
    box-shadow: inset 0 0 0 1px var(--champagne-gold);
}
.ranking_row_self:hover{
    background-color: rgba(var(--accent-rgb), 0.18);
}
.ranking_self_tag{
    display: inline-block;
    background-color: var(--champagne-gold);
    color: var(--darker-blue);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;

    padding: 0.05rem 0.4rem;
    border-radius: 3px;

    margin-left: 0.4rem;
    vertical-align: middle;
}

.rank_col_rank{
    text-align: center;
    font-size: 1.1rem;
}
.rank_col_name{
    padding-left: 0.5rem;
    word-break: break-all;
}

/* ===== 【新增】點名字查看該玩家個人資料頁 =====
   只包住名字本身（不含 LV 標籤／「你」標籤），用底線 + hover 變金色
   表達「這是可以點的連結」，跟全站其他可點擊文字（例如 footer 連結）
   的視覺語言一致，不用額外做按鈕感的樣式，畢竟這裡只是排行榜列表裡
   的一小段文字，不該搶走整列的視覺重量。 */
.rank_player_name_link{
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(var(--accent-rgb), 0.35);
    text-underline-offset: 2px;
}
.rank_player_name_link:hover{
    color: var(--champagne-gold);
    text-decoration-color: var(--champagne-gold);
}

/* ===== 【新增】玩家名字旁邊的 LV 小標籤 =====
   跟 .ranking_self_tag（「你」標籤）刻意做出區隔：那個是實心金底、搶眼，
   這個只是「背景資訊」，用空心金邊框 + 金字，份量比「你」標籤輕，
   兩者同時出現時（自己又剛好有等級）不會互相搶視覺焦點。
   目前只有「玩家總榜」的資料會帶這個標籤，見 ranking.js 的
   Get_Level_Badge_HTML() 註解說明。 */
.rank_level_badge{
    display: inline-block;
    vertical-align: middle;

    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;

    color: var(--champagne-gold);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;

    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 3px;
}
.rank_col_wpm,
.rank_col_acc{
    text-align: center;
}

.ranking_empty_msg,
.ranking_loading_msg{
    text-align: center;
    color: rgba(var(--text-rgb), 0.68);

    padding: 2.5rem 1rem;
    font-size: 0.95rem;
    letter-spacing: 1px;
}

.is_hidden{
    display: none !important;
}


.ranking_self_rank_bar{
    position: fixed;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;

    display: flex;
    align-items: center;
    gap: 0.8rem;

    max-width: 90vw;

    background-color: var(--dark-blue);
    border: 1px solid var(--champagne-gold);
    border-radius: 8%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(var(--accent-rgb), 0.12);

    padding: 0.65rem 1.3rem;

    color: rgba(var(--text-rgb), 0.92);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.ranking_self_bar_label{
    color: var(--champagne-gold);
    font-size: 0.72rem;
    letter-spacing: 2px;
    flex-shrink: 0;
}
.ranking_self_bar_rank{
    color: var(--champagne-gold);
    font-weight: 700;
    margin-right: 0.5rem;
}
.ranking_self_bar_name{
    margin-right: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ranking_self_bar_value{
    color: rgba(var(--text-rgb), 0.6);
}

@media (max-width: 30rem){
    .ranking_self_rank_bar{
        max-width: 94vw;
        font-size: 0.78rem;
        padding: 0.55rem 1rem;
    }
    .ranking_self_bar_name{
        max-width: 7rem;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}