:root {
    --c-red:    #e06666; --c-green:   #93c47d; --c-grey:   #76a5af; --c-blue:    #6fa8dc;
    --c-yellow: #ffd966; --c-dblue:   #3d85c6; --c-purple: #8e7cc3; --c-ancient: #6aa84f;
    --c-nodrop: #f4cccc; --c-star1:   #d0e0e3; --c-star-others: #fff2cc;
    --c-text-on-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-red:    #8c3232; --c-green:   #3e5e32; --c-grey:   #3e565c; --c-blue:    #2d506e;
        --c-yellow: #856d2d; --c-dblue:   #1e4466; --c-purple: #513e80; --c-ancient: #2d5c1a;
        --c-nodrop: #3d2a2a; --c-star1:   #2a3d40; --c-star-others: #3d3a2a;
        --c-text-on-color: #ffffff;
    }
}

/* ── 頁面結構 ── */
body {
    padding-bottom: 50px;
}

article {
    padding-top: 20px;
}

/* h2 寬度與表格對齊 */
article h2 {
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── 表格捲動容器 ── */
.drop-table-wrap {
    width: 95%;
    overflow-x: auto;
    margin: 0 auto 40px;
    cursor: grab;
    /* 手機上顯示左右捲動提示陰影 */
    background:
        linear-gradient(to right,  var(--color-article-bc, #fff) 20px, transparent 20px),
        linear-gradient(to left,   var(--color-article-bc, #fff) 20px, transparent 20px) 100% 0,
        radial-gradient(farthest-side at 0   50%, rgba(0,0,0,.15), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.15), transparent) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--color-article-bc, #fff);
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
    -webkit-overflow-scrolling: touch;
}

/* 手機提示文字 */
.drop-table-wrap::before {
    content: "← SCROLL →"; /*スクロール*/
    display: none;
    text-align: center;
    font-size: 11px;
    color: var(--text-color, #888);
    opacity: 0.6;
    padding: 2px 0 4px;
}

@media (max-width: 600px) {
    .drop-table-wrap::before { display: block; }
}

/* ── 表格 ── */
.drop-table {
    border-collapse: collapse;
    box-shadow: 0 4px 12px var(--shadow-color);
    font-size: 13px;
    text-align: center;
    width: 100%;
    min-width: 820px;
    background: var(--color-article-bc, #fff);
    color: var(--text-color, #333);
}

.drop-table th,
.drop-table td {
    border: 1px solid var(--color-table-default-border, #444);
    padding: 6px 2px;
}

/* 表頭色塊 */
.header-main   { background-color: #000; color: #fff; width: 160px; }
.header-drop   { background-color: #f6b26b; color: #000; font-weight: bold; }
.header-nodrop { background-color: #ea9999; color: #000; font-weight: bold; }
.header-draw   { background-color: #b4a7d6; color: #000; font-weight: bold; }

/* 素材格子 */
.c-red    { background-color: var(--c-red);    color: var(--c-text-on-color); }
.c-green  { background-color: var(--c-green);  color: var(--c-text-on-color); }
.c-grey   { background-color: var(--c-grey);   color: var(--c-text-on-color); }
.c-blue   { background-color: var(--c-blue);   color: var(--c-text-on-color); }
.c-yellow { background-color: var(--c-yellow); color: var(--c-text-on-color); }
.c-dblue  { background-color: var(--c-dblue);  color: var(--c-text-on-color); }
.c-purple { background-color: var(--c-purple); color: var(--c-text-on-color); }
.c-ancient{ background-color: var(--c-ancient);color: var(--c-text-on-color); }

.c-nodrop      { background-color: var(--c-nodrop);      font-weight: bold; color: var(--c-text-on-color);}
.c-star1       { background-color: var(--c-star1);       font-weight: bold; color: var(--c-text-on-color);white-space: nowrap; min-width: 55px; }
.c-star-others { background-color: var(--c-star-others); font-weight: bold; color: var(--c-text-on-color);white-space: nowrap; min-width: 55px; }

/* 圖示 */
.material-icon       { width: 26px; height: auto; display: block; margin: 0 auto; }
.material-icon-small { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; }
.star-icon           { width: 13px; height: auto; margin: 0 -1px; vertical-align: middle; }

/* ── 關卡名稱欄（黏性）── */
.col-name {
    background-color: #000;
    color: #fff;
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
    /* 手機橫向捲動時固定左欄 */
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 120px;
    max-width: 160px;
    white-space: normal;
    word-break: break-all;
    font-size: 12px;
}

/* 表頭的章節欄也黏住 */
.drop-table thead .header-main {
    position: sticky;
    left: 0;
    z-index: 3;
}

.drop-table tr:hover {
    filter: brightness(1.15);
    background-color: rgba(128, 128, 128, 0.1);
}

/* 關卡連結 */
.stage-link       { color: #fff; text-decoration: none; display: block; width: 100%; padding: 2px 0; }
.stage-link:hover { color: #ffd966; text-decoration: underline; }

/* ── 最佳掉落區塊 ── */
.best-drop-container {
    width: 95%;
    margin: 20px auto 30px;
    background: var(--color-default-table-th-bc, #f1f1f1);
    border: 1px solid var(--color-default-border, #ccc);
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
}

.best-drop-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--color-table-default-border, #444);
    padding-bottom: 5px;
    color: var(--color-white-227, #333);
}

.best-drop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.best-item {
    background: var(--color-article-bc, #fff);
    padding: 8px 10px;
    border-radius: 4px;
    border-left: 5px solid var(--c-yellow);
    box-shadow: 0 2px 4px var(--shadow-color);
}

.best-item b     { color: var(--color-red-bc, #c40000); font-size: 14px; }
.best-item small { display: block; color: var(--text-color, #333); opacity: 0.8; margin-top: 3px; font-size: 11px; line-height: 1.4; }

/* ── 收合區塊 ── */
article h2 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    margin-top: 24px;
}
article h2.collapsed {
    background-color: #000 !important;
    color: #fff !important;
}
article h2.collapsed .title-text,
article h2.collapsed .toggle-arrow {
    color: #fff !important;
}
article h2.collapsed .toggle-arrow {
    transform: rotate(-90deg);
}
article h2:not(.collapsed) {
    background-color: rgba(128,128,128,0.18) !important;
}
article h2:not(.collapsed) .title-text,
article h2:not(.collapsed) .toggle-arrow {
    color: #fff !important;
}
article h2:not(.collapsed) .toggle-arrow {
    transform: rotate(0deg);
}
article h2:hover {
    filter: brightness(1.15);
}
article h2 .toggle-arrow {
    font-size: 18px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 8px;
}
.section-content {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    max-height: 20000px;
    opacity: 1;
}
.section-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* ── 手機響應式 ── */
@media (max-width: 600px) {
    .drop-table          { font-size: 11px; min-width: 700px; }
    .material-icon       { width: 22px; }
    .star-icon           { width: 11px; }
    .col-name            { font-size: 11px; min-width: 100px; max-width: 130px; padding-left: 6px; }
    .c-star1,
    .c-star-others       { min-width: 40px; }
    .best-drop-grid      { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .best-drop-title     { font-size: 14px; }
    .best-item b         { font-size: 13px; }
    .best-drop-container { padding: 10px; }
}

article .block {
    min-height: calc(100vh - 44px);
    position: relative;
    box-sizing: border-box;
    padding-bottom: 50px;  /* 防止 Home 跟內容重疊 */
}

.contact {
    position: absolute;     /* 絕對定位 */
    bottom: 10px;           /* 距離 article 底部 10px */
    left: 10px;             /* 距離 article 左邊 10px */
    z-index: 100;
}

.contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;         /* 確保內部的 li 正常排列 */
}

.contact li a {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 12px;
    color: var(--color-link-home, #00ACC1);
    text-decoration: none;
}