/*
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap');

        :root {
            --ui-bg: rgba(10, 10, 20, 0.9);
        }

        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #000;
            color: #fff;
        }

        #canvas-container {
            position: absolute;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
        }

        #ui-layer {
            position: absolute;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #planet-labels-container {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .planet-label {
            position: absolute;
            text-align: center;
            white-space: nowrap;
            font-family: 'Orbitron', sans-serif;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }

        .planet-label .unit-label {
            font-size: 0.7rem;
            letter-spacing: 2px;
            color: #ccc;
            opacity: 0.9;
            margin-bottom: -2px;
        }

        .planet-label .title-label {
            font-size: 0.9rem;
            font-weight: 700;
            line-height: 1.2;
            text-transform: uppercase;
        }

        #detail-view {
            position: absolute;
            top: 0;
            right: -700px;
            width: 700px;
            height: 100vh;
            background: var(--ui-bg);
            backdrop-filter: blur(16px);
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            padding: 2rem;
            overflow-y: auto;
            pointer-events: none;
            transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
        }

        #detail-view.active {
            right: 0;
            pointer-events: auto;
        }

        .chapter-card {
            background: rgba(255, 255, 255, 0.05);
            margin-bottom: 1rem;
            padding: 1.2rem;
            border-radius: 0.5rem;
            border-left: 4px solid #555;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease;
        }

        .chapter-card::after {
            content: 'CLICK FOR DETAILS';
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
            font-size: 0.6rem;
            opacity: 0;
            letter-spacing: 1px;
            transition: opacity 0.2s;
        }

        .chapter-card:hover {
            transform: translateX(5px);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 15px rgba(0, 180, 255, 0.2);
        }

        .chapter-card:hover::after {
            opacity: 0.7;
        }

        #content-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(8px);
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
            overflow-y: auto;
        }

        #content-modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .concept-block {
            margin-bottom: 2rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .concept-title {
            font-family: 'Orbitron', sans-serif;
            color: #60a5fa;
            font-size: 1.25rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 0.5rem;
        }

        .concept-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .concept-list li {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.8rem;
            color: #d1d5db;
            line-height: 1.6;
        }

        .concept-list li::before {
            content: '►';
            position: absolute;
            left: 0;
            top: 4px;
            font-size: 0.8rem;
            color: #3b82f6;
        }

        #back-btn {
            position: fixed;
            top: 2rem;
            left: 2rem;
            padding: 0.8rem 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid #fff;
            color: #fff;
            border-radius: 2rem;
            cursor: pointer;
            opacity: 0;
            transform: translateY(-20px) scale(2);
            transform-origin: top;
            pointer-events: none;
            transition: all 0.5s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: bold;
            font-size: 0.8rem;
            z-index: 40;
        }

        #back-btn:hover {
            background: #fff;
            color: #000;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }

        #back-btn.active {
            opacity: 1;
            transform: translateY(0) scale(2);
            pointer-events: auto;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #111;
        }

        ::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #666;
        }

        @media (max-width: 768px) {
            #detail-view {
                width: 100%;
                right: -100%;
                background: rgba(0, 0, 0, 0.95);
            }

            #back-btn {
                top: auto;
                bottom: 2rem;
                left: 50%;
                transform: translateX(-50%) translateY(20px) scale(2);
            }

            #back-btn.active {
                transform: translateX(-50%) translateY(0) scale(2);
            }
        }

        .orbitron-title {
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }
        
        */
    
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap');

:root {
    --ui-bg: rgba(10, 10, 20, 0.9);
}

/* 統一盒模型，避免不同瀏覽器算 padding 出問題 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #000;
    color: #fff;
}

/* === 3D 畫布層 === */
#canvas-container {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

/* 上層 UI（標題、右側 panel 之類） */
#ui-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 2rem;
}

/* 行星 label 容器 */
#planet-labels-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.planet-label {
    position: absolute;
    text-align: center;
    white-space: nowrap;
    font-family: 'Orbitron', sans-serif;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.planet-label .unit-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #ccc;
    opacity: 0.9;
    margin-bottom: -2px;
}

.planet-label .title-label {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* === 右側章節面板（桌機預設） === */
#detail-view {
    position: absolute;
    top: 0;
    right: -700px;
    width: 700px;
    height: 100vh;
    background: var(--ui-bg);
    backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem;
    overflow-y: auto;
    pointer-events: none;
    transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
}

#detail-view.active {
    right: 0;
    pointer-events: auto;
}

.chapter-card {
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 1rem;
    padding: 1.2rem;
    border-radius: 0.5rem;
    border-left: 4px solid #555;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.chapter-card::after {
    content: 'CLICK FOR DETAILS';
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
    opacity: 0;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}

.chapter-card:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 180, 255, 0.2);
}

.chapter-card:hover::after {
    opacity: 0.7;
}

/* === 內容 Modal === */
#content-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow-y: auto;
    padding: 2rem;
}

#content-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.concept-block {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.concept-title {
    font-family: 'Orbitron', sans-serif;
    color: #60a5fa;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

.concept-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.concept-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: #d1d5db;
    line-height: 1.6;
}

.concept-list li::before {
    content: '►';
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 0.8rem;
    color: #3b82f6;
}

/* 返回按鈕 */
#back-btn {
    position: fixed;
    top: 2rem;
    left: 2rem;
    padding: 0.8rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 2rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-20px) scale(2);
    transform-origin: top;
    pointer-events: none;
    transition: all 0.5s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 0.8rem;
    z-index: 40;
}

#back-btn:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

#back-btn.active {
    opacity: 1;
    transform: translateY(0) scale(2);
    pointer-events: auto;
}

/* 捲動條 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* === 中等螢幕（小筆電 / 平板橫向）=== */
@media (max-width: 1200px) {
    #detail-view {
        width: 480px;
        right: -480px;
        padding: 1.5rem;
    }

    .chapter-card {
        padding: 1rem;
    }

    .concept-title {
        font-size: 1.1rem;
    }
}

/* === 手機 / 平板直立（<=768px）=== */
@media (max-width: 768px) {
    html,
    body {
        overflow: hidden;          /* 避免整頁雙捲動 */
        font-size: 14px;           /* 手機基準字體略小一點 */
    }

    /* 3D 只佔上半～略多一點螢幕，底部留空給面板 */
    #canvas-container {
        position: relative;
        width: 100vw;
        height: 52vh;              /* 視情況可調 50–60vh */
    }

    /* label 的可用高度跟畫布對齊，不會飄到下半部 */
    #planet-labels-container {
        top: 0;
        left: 0;
        width: 100vw;
        height: 52vh;
    }

    /* UI layer 改成輕量版排版（上方工具列 / 標題之類） */
    #ui-layer {
        inset: 0;
        padding: 0.75rem 1rem;
        justify-content: flex-start;
    }

    /* 行星標籤字縮小一點，避免爆版 */
    .planet-label .unit-label {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }

    .planet-label .title-label {
        font-size: 0.75rem;
    }

    /* 右側 detail-view 改成底部抽屜（全寬） */
    #detail-view {
        position: fixed;
        top: auto;
        right: 0;
        bottom: -48vh;             /* 默認收起來高度，跟 height 搭配 */
        left: 0;
        width: 100%;
        height: 48vh;              /* 上 52vh 3D + 下 48vh 面板 ≒ 100vh */
        padding: 1rem 1rem 1.25rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
        background: rgba(6, 6, 12, 0.98);
        transition: bottom 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;   /* iOS 滑動順一點 */
    }

    #detail-view.active {
        bottom: 0;
    }

    .chapter-card {
        margin-bottom: 0.75rem;
        padding: 0.9rem;
    }

    .chapter-card::after {
        font-size: 0.55rem;
    }

    /* 返回按鈕改成底部圓 pill，預留 iOS 安全區 */
    #back-btn {
        top: auto;
        bottom: calc(1rem + env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%) translateY(20px) scale(1.4);
        font-size: 0.75rem;
        padding: 0.6rem 1.4rem;
        z-index: 60; /* 蓋在面板之上 */
    }

    #back-btn.active {
        transform: translateX(-50%) translateY(0) scale(1.4);
    }

    /* Modal 在手機上改成「上方滑下 + 可捲動」 */
    #content-modal {
        align-items: flex-start;
        justify-content: center;
        padding: 3.5rem 1rem 2rem;
    }

    .concept-block {
        padding: 1.1rem;
    }

    .concept-title {
        font-size: 1rem;
    }

    .concept-list li {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }
}