:root {
            --primary-color: #2c3e50;
            --accent-color: #e74c3c;
            --fav-color: #f1c40f;
            --bg-color: #f4f7f6;
            --card-width: 340px;
            --card-height: 520px;
        }

        body {
            font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;
            background-color: var(--bg-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0; padding: 10px;
        }

        .controls { 
            margin-bottom: 12px; 
            display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
        }

        button {
            padding: 8px 14px; font-size: 13px; cursor: pointer;
            background-color: var(--primary-color); color: white;
            border: none; border-radius: 6px; transition: 0.2s;
        }

        button.active { background-color: var(--accent-color); }
        button.fav-btn { background-color: #95a5a6; }
        button.fav-active { background-color: var(--fav-color); color: #333; }
        .clear-btn { background-color: #d63031; }

        .card-container {
            width: var(--card-width); height: var(--card-height);
            perspective: 1000px;
            position: relative;
        }

        #card-cover {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #1a1a1a url('../images/cardback.jpg') no-repeat center center;
            background-size: cover;
            border-radius: 20px;
            z-index: 100;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            transition: opacity 0.5s ease, visibility 0.5s;
        }

        #card-cover::after {
            content: "點擊卡片開始練習";
            color: white;
            font-weight: bold;
            background: rgba(0,0,0,0.5);
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 1.1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .card {
            width: 100%; height: 100%; position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 20px 40px rgba(0,0,0,0.12);
            border-radius: 20px;
            cursor: pointer;
        }

        .card.is-flipped { transform: rotateY(180deg); }

        .card-face {
            position: absolute;
            width: 100%; height: 100%;
            backface-visibility: hidden;
            display: flex; flex-direction: column; align-items: center; 
            justify-content: flex-start; /* 改為頂部對齊，以便精確控制高度 */
            border-radius: 20px; background: white; border: 1px solid #eee;
            box-sizing: border-box; 
            padding: 30px; /* 基礎內邊距 */
        }

        .card-back { transform: rotateY(180deg); }

        /* --- 視覺修正點：區分卦象與卦名的垂直位置 --- */
        
        .hex-face-content { 
            display: flex; flex-direction: column; align-items: center; width: 100%; 
            margin-top: 35px; /* 卦象位置：維持較高，視覺舒適 */
        }

        .name-face-content { 
            text-align: center; width: 100%; 
            margin-top: 60px; /* 卦名位置：調低約 55px，使其更接近視覺中心 */
        }

        /* --- 內部元件樣式 --- */

        .hexagram { display: flex; flex-direction: column-reverse; gap: 14px; margin: 25px 0; }
        .line { width: 170px; height: 14px; background-color: #222; }
        .yin { display: flex; justify-content: space-between; background-color: transparent; }
        .yin::before, .yin::after { content: ''; width: 75px; height: 14px; background-color: #222; }

        .trigram-label { 
            font-size: 0.95rem; color: #555; margin: 4px 0; 
            border-top: 1px solid #f0f0f0; padding-top: 8px; width: 100%; text-align: center; 
        }
        .trigram-info { font-weight: bold; color: #2980b9; }

.name-zh {
    font-size: 5.5rem;
    font-weight: 800;
    margin: 5px 0 2px 0; 
    color: var(--primary-color);
    letter-spacing: 2px;
    line-height: 1;
}        .name-en { font-size: 1.3rem; font-weight: bold; color: var(--accent-color); opacity: 0.9; }
        .pinyin { font-size: 1.4rem; font-style: italic; color: #999; margin-bottom: 5px; }

        .hex-id { color: #ddd; font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; }
        .status-info { margin-top: 15px; color: #7f8c8d; font-size: 0.85rem; text-align: center; }
        .star-mark { position: absolute; top: 15px; right: 20px; font-size: 26px; color: var(--fav-color); display: none;}
        .is-favorited .star-mark { display: block; }
        
        .hidden { display: none; }
		/* 注音樣式 */
.zhuyin {
    font-size: 1.1rem;
    color: #666;
    letter-spacing: 2px;
    margin-top: 5px;
    font-style: normal;
}