body,
    html {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #101010;
        color: #ffffff;
        overflow: hidden;
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 12px;
        overflow-y: scroll;
        -ms-overflow-style: none;
        /* 適用於 IE 和 Edge */
        scrollbar-width: none;
        /* 適用於 Firefox */
    }

    @media (max-width: 768px) {

        body,
        html {
            font-size: 12px;
        }
    }

    .scrollable-content::-webkit-scrollbar {
        display: none;
        /* 適用於 WebKit 瀏覽器 */
    }





    /* ---------- 側邊選單 ----------*/
    .sidenav {
        position: fixed;
        height: calc(100% - 50px);
        top: 50px;
        background-color: #303030;
        overflow-x: hidden;
        transition: 0.5s;
        z-index: 1090;
    }

    /* ---------- 側邊選單 ----------*/





    /* ---------- 選單區塊 ----------*/
    .togglenav {
        height: 50px;
        width: 50px;
        background-color: #101010;
        position: absolute;
        top: 0px;
        left: 0px;
        cursor: pointer;
    }

    .opennav-icon {
        display: inline-block;
        position: absolute;
        left: 12px;
        font-size: 30px;
        transition: transform 1s ease, opacity 0.5s ease;
        transform: rotate(90deg);
        opacity: 0;
    }

    .closenav-icon {
        display: inline-block;
        position: absolute;
        top: 7px;
        left: 12px;
        font-size: 2rem;
        transition: transform 1s ease, opacity 0.5s ease;
        transform: rotate(0deg);
        opacity: 0;
    }

    .opennav-icon.active {
        transform: rotate(0deg);
        opacity: 1;
    }

    .closenav-icon.active {
        transform: rotate(90deg);
        opacity: 1;
    }

    /* ---------- 選單區塊 ----------*/





    /* ---------- 頂端橫條 ----------*/
    #topbar {
        display: flex;
        position: fixed;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 100%;
        background-color: #101010;
        border-bottom: 1px solid rgba(255, 217, 0, 0.3);
        box-shadow: 0 0px 10px rgba(255, 217, 0, 0.3);
        font-size: 1.4rem;
        z-index: 1100;
    }

    /* ---------- 頂端橫條 ----------*/





    /* ---------- 橫幅 ----------*/
    .banner-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .banner-full {
        display: block;
        width: 100%;
        background-size: contain;
        background-position: 50% 0%;
        aspect-ratio: 986/349;
        top: 0px;
        margin: 0;
        margin-top: 50px;
        z-index: 1010;
    }

    .banner {
        display: block;
        width: 700px;
        height: 300px;
        padding-top: 0%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        transition: height 0.5s ease, padding-top 0.5s ease;
        border: 3px solid rgba(255, 217, 0, 0.3);
        margin-top: 50px;
    }

    @media (max-width:1000px) {
        .banner {
            height: 200px;
        }
    }

    .expand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
    }

    .expand-icon {
        font-size: 24px;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        transition: bottom 0.5s ease;
        cursor: pointer;
    }

    /* ---------- 橫幅 ----------*/





    /* ---------- 遮罩 ----------*/
    .overlay-active::before {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.3);
        content: '';
        z-index: 1090;
    }

    /* ---------- 遮罩 ----------*/





    /* ---------- 主要區塊 ----------*/
    .container {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px;
        font-size: 1.4rem;
        text-align: center;
        z-index: 0;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        width: 700px;
        margin: 20px;
        margin-top: 0px;
        padding: 20px;

        background-color: #303030;
        border: 0px solid #FFFFFF;
        border-radius: 50px;

        line-height: 2.4rem;
    }

    @media (max-width: 768px) or (max-height:600px) {
        .content {
            width: 90%;
            margin: 0px auto;
            padding: 0px;
        }
    }

    .content h2 {
        text-align: center;
        margin: 6px;
    }

    .important {
        color: #ff6464;
        font-weight: bold;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content hr {
        width: 80%;
    }

    .highlight-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 160px;
        height: 40px;

        background: #202020;

        border-radius: 30px;
        border: 1px solid rgba(255, 217, 0, 0.3);
        box-shadow: 0 0px 10px rgba(255, 217, 0, 0.3);
    }

    .highlight-container p {
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 1.6rem;
    }

    @media (max-width: 768px) {
        .content h2 {
            font-size: 1.6rem;
            padding-top: 10px;
        }
    }

    /* ---------- 主要區塊 ----------*/





    /* ---------- 選單設計 ---------- */
    .sidenav::-webkit-scrollbar {
        width: 0px;
    }

    .sidenav::-webkit-scrollbar-track {
        background: #303030;
    }

    .sidenav::-webkit-scrollbar-thumb {
        background-color: #303030;
        border-radius: 10px;
        border: 0px solid #303030;
    }

    .sidenav a,
    .sidenav .nav-item,
    .sidenav .nav-sub-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;

        color: #ffffff;

        font-size: 1.4rem;
        text-align: left;
        text-decoration: none;
        transition: 0.3s;
    }

    .sidenav a:hover,
    .sidenav .nav-toggle a:hover {
        color: #a0a0a0;
        font-weight: bold;
        transition: background-color 0.1S ease-in-out;
    }

    .sidenav .nav-item i,
    .sidenav .nav-sub-item i {
        vertical-align: middle;
        margin-right: 4px;
        font-size: 1.4rem;
    }

    .sidenav .nav-toggle {
        display: none;
        padding-left: 0px;

        background-color: #303030;

        line-height: 1;
    }

    .sidenav .nav-toggle a {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        padding-left: 32px;

        color: #ffffff;

        font-size: 1.4rem;
        text-align: left;
        text-decoration: none;

        transition: 0.3s;
    }

    .sidenav a:not(.nav-item):not(.nav-sub-item):not([href="/"]) {
        padding-left: 53px;
    }

    .sidenav .nav-sub-toggle {
        padding-left: 17px;
    }

    /* ---------- 選單設計 ---------- */





    /* ---------- 收合功能 ---------- */
    .collapsible {
        max-width: 100%;
        width: 60vh;
        margin: 10px auto;

        border-radius: 30px;
        border: 3px solid rgba(255, 217, 0, 0.3);
        box-shadow: 0 0px 10px rgba(255, 217, 0, 0.3);
        overflow: hidden;
    }

    .collapsible-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;

        background-color: #101010;
        color: #FFFFFF;

        font-size: 1.5rem;
        font-weight: bold;
        word-break: break-word;

        cursor: pointer;
    }

    .collapsible-header .material-icons {
        margin-right: 4px;
        background: linear-gradient(to bottom, rgba(255, 255, 255), gold);
        background-clip: text;
        color: transparent;
        transition: transform 0.3s;
        filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5));
    }

    .material-icons.rotated {
        transform: rotate(-180deg);
    }

    .collapsible-content {
        max-height: 0;

        background-color: #101010;
        color: #FFFFFF;

        font-size: 1.4rem;
        text-align: center;
        line-height: 2.4rem;
        word-break: break-word;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .collapsible-content p {
        width: 90%;
        margin: 0 auto;
    }

    .collapsible.collapsed .collapsible-content {
        display: none;
    }

    .collapsible.expanded .collapsible-content {
        display: block;
        transition: max-height 1.5s ease-in;
    }

    /* ----------  ---------- */





    /* ----------  ---------- */
    .content p {
        width: 70%;
        margin: 0 auto;
        text-align: left;
    }

    ul {
        max-width: 70%;
        display: inline-block;
        list-style-position: inside;
        margin: 0px;
        padding-right: 0px;
        padding-left: 15px;
        list-style: none;
        list-style-type: disc;
    }

    li {
        text-align: left;
        line-height: 1.5;
        text-indent: -5px
    }

    @media (max-width: 600px) {

        .collapsible.collapsed,
        .collapsible.expanded {
            width: 70vw;
        }
    }

    @media (max-height:600px) {

        .collapsible.collapsed,
        .collapsible.expanded {
            width: 50vw;
        }
    }

    @media (max-width:768px) {
        .content p {
            width: 90%;
        }
    }

    /* ----------  ---------- */

    .tabs {
        display: flex;
        cursor: pointer;
        padding: 10px;
        background-color: #303030;
        border-radius: 10px;
    }

    .tab {
        margin-right: 10px;
        padding-left: 6px;
        padding-right: 6px;
        border: 0px solid #ffffff;
        border-radius: 5px;
        background-color: #303030;
    }

    .tab.active {
        background-color: #202020;
        font-weight: bold;
    }

    .table-container {
        display: none;
    }

    .table-container.active {
        display: block;
    }

    @media (max-width:768px) {
        .tabs {
            font-size: 1rem;
        }
    }


    .normal-tag {
        font-size: 1rem;
        background-color: #fffb84;
        color: #000000;
        border-radius: 4px;
        padding: 4px;
        margin-right: 4px;
    }

    .active-tag {
        font-size: 1rem;
        background-color: #198964;
        border-radius: 4px;
        padding: 4px;
        margin-right: 4px;
    }

    .buff-tag {
        font-size: 1rem;
        background-color: #ff8964;
        border-radius: 4px;
        padding: 4px;
        margin-right: 4px;
    }

    .enhanced-attack-tag {
        font-size: 1rem;
        background-color: #6489ff;
        border-radius: 4px;
        padding: 4px;
        margin-right: 4px;
    }

    .passive-tag {
        font-size: 1rem;
        background-color: #646464;
        border-radius: 4px;
        padding: 4px;
        margin-right: 4px;
    }