/* ==========================================================================
   1. 基础架构解耦：将 #gua 的单例样式升级为多实例通用样式
   ========================================================================== */
   /* 使用 Tailwind 4.0 指令 */
   @theme {
     --color-primary: #e4736b;
     /* 自定义 base-content (主要用于文字颜色) */
     --color-base-content: #414C6B;
     /* 如果你希望背景色也符合你的风格 */
     /*--color-base-100: #FDFDF8;*/
   }
   /* 兼容性补丁：确保原生 CSS 变量也被赋值 */
   :root {
     /* 显式定义原生 CSS 变量 */
     --color-primary: #e4736b;
     --color-base-content: #414C6B;

     /* daisyUI 专用：必须是纯 HSL 数字（不加 hsl() 和 %） */
     /* #414C6B -> hsl(225, 25%, 34%) */
     --p: 4 68% 66%;   /* primary */
     --bc: 225 25% 34%; /* base-content */
   }
/* 移除原本 #gua 的强定位，升级为通用的卦象容器类 */
.gua-instance {
    position: relative !important;
    margin: 0 auto !important; /* 容器内居中 */
    width: 300px;
    height: 360px;
    padding: 0 !important; /* 确保不干扰 offsetTop 的计算 */
}

/* 兼容旧的本卦 ID，保持向后兼容 */
#gua {
    position: relative !important;
    margin: 0 auto !important;
    width: 300px;
    height: 360px;
    padding: 0 !important;
}

/* 之卦实例容器：大小、比例与本卦完美一致 */
#gua2 {
    position: relative !important;
    margin: 0 auto !important;
    width: 300px;
    height: 360px;
    padding: 0 !important;
}
/* ==========================================================================
   2. 六爻（Yao）阴阳视觉优化与精准居中适配
   ========================================================================== */

/* 统一本卦(.yao)与之卦(.yao2)的基础布局属性 */
.yao, .yao2 {
    position: relative;
    cursor: pointer;
    height: 40px;                  /* 稍微降低高度，配合间距让视觉更精致 */
    width: 300px;
    margin: 12px auto !important;  /* 💡 加大爻与爻之间的上下间距 */
    background-color: var(--color-primary, #e4736b);
    transition: transform 0.2s, background-color 0.8s, filter 0.2s;
    border-radius: 2px;            /* 稍微加一点点圆角，质感更好 */
}

/* 悬停放大与提亮效果（双卦通用） */
.yao:hover, .yao2:hover {
    transform: scale(1.03);        /* 稍微加大悬停缩放感 */
    filter: brightness(1.1);
    z-index: 10;
}

/* 当某一个爻处于 Hover 状态时，其它爻变灰的联动互斥样式 */
.yao.unhover, .yao2.unhover {
    background: #B8B8B8 !important;
}
.yao.unhover .yang, .yao2.unhover .yang {
    background: #B8B8B8 !important;
}

/* 阴阳转换核心：统一高宽与父级对齐 */
.yao .yinyang, .yao2 .yinyang2 {
    position: absolute;
    inset: 0;                      /* 撑满整个爻的整块区域 */
    height: 100%;
    width: 100%;
    transition: background-color 0.5s;
}

/* 阳爻：不需要额外遮罩，延续完整的主色调 */
.yao .yang, .yao2 .yang {
    background-color: transparent; /* 直接透出父级的颜色 */
}

/* 阴爻：💡 通过绝对居中的伪元素，在正中间精准挖出一个底色块 */
.yao .yin, .yao2 .yin {
    background-color: transparent;
}

.yao .yin::after, .yao2 .yin::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);   /* 💡 核心：强行水平绝对居中 */
    width: 16px;                   /* 中间间隔块的宽度，可根据喜好微调 */
    background-color: #FDFDF8;     /* 间隔块的颜色（设为你的网页底色） */
    transition: background-color 0.5s;
}

/* ==========================================================================
   3. 巨型巨幕背景字（Back Title）双卦解耦
   ========================================================================== */

/* 通用背景字样式 */
.gua-back-title {
    opacity: .15;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -160px;
    font-size: 35vw;
    color: #C0C0C0;
    cursor: default;
    transition: opacity 1s, bottom 1s;
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    letter-spacing: -0.05em;
}

/* 本卦背景字定位 */
#back-title {
    opacity: .15;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -160px;
    font-size: 35vw;
    color: #C0C0C0;
    cursor: default;
    transition: opacity 1s, bottom 1s;
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    letter-spacing: -0.05em;
}

/* 之卦背景字定位：确保其完美挂载到之卦容器 `#gua2` 的正后方 */
#back-title2 {
    opacity: .15;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -160px;
    font-size: 35vw;
    color: #C0C0C0;
    cursor: default;
    transition: opacity 1s, bottom 1s;
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    letter-spacing: -0.05em;
}

/* ==========================================================================
   4. 爻辞悬浮详情框（Yao Detail）双卦自适应
   ========================================================================== */

/* 规范化爻辞详情容器 */
#yao-detail, #yao-detail2 {
    display: none; /* 初始隐藏 */
    position: absolute;
    left: 50%;
    right: 16px;
    margin-left: 170px; /* 位于卦象右侧 20px 处 (300/2 + 20) */
    width: 280px;
    min-height: 40px;
    padding: 12px 16px;
    color: #414C6B;
    line-height: 1.6;
    text-align: left;
    writing-mode: horizontal-tb;
    white-space: normal;
    word-break: break-all;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-l-4: 4px solid var(--color-primary, #e4736b);
    z-index: 100;
    pointer-events: none;
}

/* ==========================================================================
   5. 响应式布局：针对手机端（Mobile）双卦堆叠优化
   ========================================================================== */

@media (max-width: 767px) {
    /* 手机端背景巨字居中化 */
    #back-title, #back-title2, .gua-back-title {
        font-size: 95vw !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0.12;
    }

    /* 手机端悬浮爻辞：将其压在当前点击/触摸的爻位正下方，防止撑破视口 */
    #yao-detail, #yao-detail2 {
        left: 50% !important;
        right: auto !important;
        margin-left: 0 !important;
        transform: translateX(-50%) !important; /* 水平强制居中 */
        position: absolute !important;
        margin-top: 45px !important; /* 下压躲开当前爻 */
        width: 90vw !important;
        max-width: 300px !important; /* 与卦象宽度对齐，极其美观 */
        z-index: 150 !important;
    }
}