/**
 * VOID GACHA · 全站統一自訂滾軸
 * 紫→橙漸層 · 圓角軌道 · 無箭頭（請於各 HTML 最後載入本檔）
 */
:root {
    --void-scroll-thumb-top: rgba(192, 132, 252, 0.88);
    --void-scroll-thumb-mid: rgba(140, 60, 220, 0.72);
    --void-scroll-thumb-bot: rgba(255, 120, 70, 0.55);
    --void-scroll-track-top: rgba(120, 40, 200, 0.16);
    --void-scroll-track-bot: rgba(255, 100, 60, 0.06);
    --void-scroll-track-border: rgba(192, 132, 252, 0.2);
    --void-scroll-thumb-border: rgba(224, 180, 255, 0.35);
    --void-scroll-firefox: rgba(192, 132, 252, 0.58) rgba(120, 40, 200, 0.14);
}

/* ── 全站預設（所有可捲動區域） ── */
html {
    scrollbar-gutter: stable;
}

html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--void-scroll-firefox);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    margin: 4px 0;
    background: linear-gradient(180deg, var(--void-scroll-track-top), var(--void-scroll-track-bot));
    border-radius: 999px;
    border: 1px solid var(--void-scroll-track-border);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.38);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--void-scroll-thumb-top) 0%,
        var(--void-scroll-thumb-mid) 50%,
        var(--void-scroll-thumb-bot) 100%
    );
    border-radius: 999px;
    border: 1px solid var(--void-scroll-thumb-border);
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.32);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(214, 170, 255, 0.92) 0%,
        rgba(168, 96, 240, 0.78) 50%,
        rgba(255, 150, 100, 0.62) 100%
    );
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* 刻意隱藏滾軸的 UI */
.side-nav,
.side-nav *,
.void-scroll-hidden,
#card-modal:not(.hidden),
.modal-inner.modal-inner--zoom,
.modal-inner--zoom #modal-meta,
.auth-rainbow-text--tag,
.auth-sub--single-line {
    scrollbar-width: none !important;
}

.side-nav::-webkit-scrollbar,
.side-nav *::-webkit-scrollbar,
.void-scroll-hidden::-webkit-scrollbar,
#card-modal:not(.hidden)::-webkit-scrollbar,
.modal-inner.modal-inner--zoom::-webkit-scrollbar,
.modal-inner--zoom #modal-meta::-webkit-scrollbar,
.auth-rainbow-text--tag::-webkit-scrollbar,
.auth-sub--single-line::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* .void-scrollbar 與全站預設相同，保留供語意標記 */
.void-scrollbar {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--void-scroll-firefox);
}

/* ── 卡牌格 / 大面板（8px）── */
.void-battle-scroll,
.abyss-roster__scroll,
.side-mode-roster,
.apex-roster__scroll,
.sgb-picker__grid-wrap,
.abyss-rank-table-wrap {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--void-scroll-firefox);
}

.void-battle-scroll::-webkit-scrollbar,
.abyss-roster__scroll::-webkit-scrollbar,
.side-mode-roster::-webkit-scrollbar,
.apex-roster__scroll::-webkit-scrollbar,
.sgb-picker__grid-wrap::-webkit-scrollbar,
.abyss-rank-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.void-battle-scroll::-webkit-scrollbar-button,
.abyss-roster__scroll::-webkit-scrollbar-button,
.side-mode-roster::-webkit-scrollbar-button,
.apex-roster__scroll::-webkit-scrollbar-button,
.sgb-picker__grid-wrap::-webkit-scrollbar-button,
.abyss-rank-table-wrap::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.void-battle-scroll::-webkit-scrollbar-track,
.abyss-roster__scroll::-webkit-scrollbar-track,
.side-mode-roster::-webkit-scrollbar-track,
.apex-roster__scroll::-webkit-scrollbar-track,
.sgb-picker__grid-wrap::-webkit-scrollbar-track,
.abyss-rank-table-wrap::-webkit-scrollbar-track {
    margin: 6px 0;
    background: linear-gradient(180deg, var(--void-scroll-track-top), var(--void-scroll-track-bot));
    border-radius: 999px;
    border: 1px solid var(--void-scroll-track-border);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.42);
}

.void-battle-scroll::-webkit-scrollbar-thumb,
.abyss-roster__scroll::-webkit-scrollbar-thumb,
.side-mode-roster::-webkit-scrollbar-thumb,
.apex-roster__scroll::-webkit-scrollbar-thumb,
.sgb-picker__grid-wrap::-webkit-scrollbar-thumb,
.abyss-rank-table-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--void-scroll-thumb-top) 0%,
        var(--void-scroll-thumb-mid) 48%,
        var(--void-scroll-thumb-bot) 100%
    );
    border-radius: 999px;
    border: 1px solid var(--void-scroll-thumb-border);
    box-shadow:
        0 0 12px rgba(192, 132, 252, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.void-battle-scroll::-webkit-scrollbar-thumb:hover,
.abyss-roster__scroll::-webkit-scrollbar-thumb:hover,
.side-mode-roster::-webkit-scrollbar-thumb:hover,
.apex-roster__scroll::-webkit-scrollbar-thumb:hover,
.sgb-picker__grid-wrap::-webkit-scrollbar-thumb:hover,
.abyss-rank-table-wrap::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(214, 170, 255, 0.95) 0%,
        rgba(168, 96, 240, 0.82) 48%,
        rgba(255, 150, 100, 0.68) 100%
    );
    box-shadow:
        0 0 16px rgba(192, 132, 252, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.void-battle-scroll::-webkit-scrollbar-corner,
.abyss-roster__scroll::-webkit-scrollbar-corner,
.side-mode-roster::-webkit-scrollbar-corner,
.apex-roster__scroll::-webkit-scrollbar-corner,
.sgb-picker__grid-wrap::-webkit-scrollbar-corner,
.abyss-rank-table-wrap::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── 說明 / 排行 / 側欄（7px）── */
.void-battle-scroll--panel,
.battle-rules__panel,
.apex-guide,
.sgb-rank-list,
.sgb-guide-panel,
.abyss-body,
.side-mode-body {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--void-scroll-firefox);
}

.void-battle-scroll--panel::-webkit-scrollbar,
.battle-rules__panel::-webkit-scrollbar,
.apex-guide::-webkit-scrollbar,
.sgb-rank-list::-webkit-scrollbar,
.sgb-guide-panel::-webkit-scrollbar,
.abyss-body::-webkit-scrollbar,
.side-mode-body::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.void-battle-scroll--panel::-webkit-scrollbar-button,
.battle-rules__panel::-webkit-scrollbar-button,
.apex-guide::-webkit-scrollbar-button,
.sgb-rank-list::-webkit-scrollbar-button,
.sgb-guide-panel::-webkit-scrollbar-button,
.abyss-body::-webkit-scrollbar-button,
.side-mode-body::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.void-battle-scroll--panel::-webkit-scrollbar-track,
.battle-rules__panel::-webkit-scrollbar-track,
.apex-guide::-webkit-scrollbar-track,
.sgb-rank-list::-webkit-scrollbar-track,
.sgb-guide-panel::-webkit-scrollbar-track,
.abyss-body::-webkit-scrollbar-track,
.side-mode-body::-webkit-scrollbar-track {
    margin: 4px 0;
    background: linear-gradient(180deg, var(--void-scroll-track-top), var(--void-scroll-track-bot));
    border-radius: 999px;
    border: 1px solid var(--void-scroll-track-border);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.38);
}

.void-battle-scroll--panel::-webkit-scrollbar-thumb,
.battle-rules__panel::-webkit-scrollbar-thumb,
.apex-guide::-webkit-scrollbar-thumb,
.sgb-rank-list::-webkit-scrollbar-thumb,
.sgb-guide-panel::-webkit-scrollbar-thumb,
.abyss-body::-webkit-scrollbar-thumb,
.side-mode-body::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--void-scroll-thumb-top) 0%,
        var(--void-scroll-thumb-mid) 50%,
        var(--void-scroll-thumb-bot) 100%
    );
    border-radius: 999px;
    border: 1px solid var(--void-scroll-thumb-border);
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.32);
}

.void-battle-scroll--panel::-webkit-scrollbar-thumb:hover,
.battle-rules__panel::-webkit-scrollbar-thumb:hover,
.apex-guide::-webkit-scrollbar-thumb:hover,
.sgb-rank-list::-webkit-scrollbar-thumb:hover,
.sgb-guide-panel::-webkit-scrollbar-thumb:hover,
.abyss-body::-webkit-scrollbar-thumb:hover,
.side-mode-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(214, 170, 255, 0.92) 0%,
        rgba(168, 96, 240, 0.78) 50%,
        rgba(255, 150, 100, 0.62) 100%
    );
}

/* ── 戰鬥日誌（6px）── */
.void-battle-scroll--log,
.battle-log,
.abyss-battle__log,
.side-mode-log,
.apex-battle__log,
.sgb-battle-log,
.sgb-battle-feed__team {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--void-scroll-firefox);
}

.void-battle-scroll--log::-webkit-scrollbar,
.battle-log::-webkit-scrollbar,
.abyss-battle__log::-webkit-scrollbar,
.side-mode-log::-webkit-scrollbar,
.apex-battle__log::-webkit-scrollbar,
.sgb-battle-log::-webkit-scrollbar,
.sgb-battle-feed__team::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.void-battle-scroll--log::-webkit-scrollbar-button,
.battle-log::-webkit-scrollbar-button,
.abyss-battle__log::-webkit-scrollbar-button,
.side-mode-log::-webkit-scrollbar-button,
.apex-battle__log::-webkit-scrollbar-button,
.sgb-battle-log::-webkit-scrollbar-button,
.sgb-battle-feed__team::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.void-battle-scroll--log::-webkit-scrollbar-track,
.battle-log::-webkit-scrollbar-track,
.abyss-battle__log::-webkit-scrollbar-track,
.side-mode-log::-webkit-scrollbar-track,
.apex-battle__log::-webkit-scrollbar-track,
.sgb-battle-log::-webkit-scrollbar-track,
.sgb-battle-feed__team::-webkit-scrollbar-track {
    margin: 4px 0;
    background: linear-gradient(180deg, rgba(120, 40, 200, 0.14), rgba(255, 100, 60, 0.05));
    border-radius: 999px;
    border: 1px solid rgba(192, 132, 252, 0.16);
}

.void-battle-scroll--log::-webkit-scrollbar-thumb,
.battle-log::-webkit-scrollbar-thumb,
.abyss-battle__log::-webkit-scrollbar-thumb,
.side-mode-log::-webkit-scrollbar-thumb,
.apex-battle__log::-webkit-scrollbar-thumb,
.sgb-battle-log::-webkit-scrollbar-thumb,
.sgb-battle-feed__team::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(192, 132, 252, 0.82) 0%,
        rgba(140, 60, 220, 0.68) 45%,
        rgba(255, 120, 70, 0.52) 100%
    );
    border-radius: 999px;
    border: 1px solid rgba(224, 180, 255, 0.3);
    box-shadow:
        0 0 8px rgba(192, 132, 252, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.void-battle-scroll--log::-webkit-scrollbar-thumb:hover,
.battle-log::-webkit-scrollbar-thumb:hover,
.abyss-battle__log::-webkit-scrollbar-thumb:hover,
.side-mode-log::-webkit-scrollbar-thumb:hover,
.apex-battle__log::-webkit-scrollbar-thumb:hover,
.sgb-battle-log::-webkit-scrollbar-thumb:hover,
.sgb-battle-feed__team::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(214, 170, 255, 0.9) 0%,
        rgba(168, 96, 240, 0.75) 45%,
        rgba(255, 150, 100, 0.65) 100%
    );
}

/* ── 遊戲模式 · 標題類字眼置中 ── */
.battle-hub-hero h2,
.battle-hub-hero__sub,
.battle-hero__title,
.battle-hero__sub,
.battle-lobby__title,
.battle-mode-card__title,
.battle-mode-card__desc,
.battle-mode-card__meta,
.battle-log__title,
.battle-flank__title,
.battle-mode-meta__row dt,
.battle-round-tag,
.abyss-head__title,
.abyss-head__floor,
.abyss-section-title,
.abyss-rank-panel__head h3,
.abyss-result__title,
.side-mode-head__title,
.side-mode-head__sub,
.side-mode-panel__title,
.side-mode-panel__sub,
.side-mode-info-block h4,
.side-mode-result__title,
.playground-hero h2,
.playground-hero__sub,
.playground-card__title,
.playground-guide__head h2,
.playground-quiz-panel__head h2,
.runner-sidebar__title,
.scratch-console__title,
.lb-head-title,
.lb-head-sub,
.lb-title,
.lb-modal-title,
.apex-title,
.apex-guide__title,
.apex-formation__title,
.apex-roster__title,
.apex-squad__name,
.apex-round__title,
.apex-result__title,
.apex-result__ladder-title,
.apex-settle__title,
.sgb-hero__title,
.sgb-hero__boss,
.sgb-rank-panel__title,
.sgb-rank-panel__sub,
.sgb-guide-panel__title,
.sgb-guide-panel__sub,
.sgb-guide-rewards__title,
.sgb-team-preview__title,
.sgb-picker__title,
.sgb-picker__sub,
.sgb-modal__title {
    text-align: center;
}

.battle-mode-card__title,
.battle-mode-card__desc,
.battle-mode-card__meta,
.playground-card__title {
    display: block;
    width: 100%;
}

.abyss-guide summary,
.battle-rules__title {
    text-align: center;
}