/* =================================================================
   黄金眼.紫微斗数 - 核心样式表 (ziwei-style.css)
   包含：PC端标准视图 + 移动端全览微缩视图
   ================================================================= */

:root {
    --bg-color: #1a1a1a;
    --text-main: #e0e0e0;
    --gold-accent: #d4af37;
    --palace-border: #444;
    --palace-bg: #fff;
    --text-dark: #000;
    --star-ji: #d32f2f;
    --star-ziwei: #8e44ad;
    --font-serif: 'Noto Serif SC', serif;
    --font-sans: 'Roboto', sans-serif;
    --gold-alpha-30: rgba(212, 175, 55, 0.3);
}

body { background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-sans); margin: 0; padding: 20px; }
.app-container { max-width: 1250px; margin: 0 auto; }

/* --- 顶部控制面板 --- */
.glass-panel {
    background: rgba(40, 40, 40, 0.9); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; padding: 20px; margin-bottom: 20px;
    display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.app-title { font-family: var(--font-serif); color: var(--gold-accent); margin: 0 20px 0 0; font-size: 1.6rem; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.input-group { display: flex; align-items: center; gap: 5px; }
.input-label { font-size: 0.9rem; color: #aaa; }

select, button, input { 
    padding: 8px 12px; border-radius: 4px; border: 1px solid #555; 
    background: #333; color: #fff; outline: none; font-size: 1rem;
}
input[type="number"] { width: 70px; text-align: center; }
select { min-width: 70px; text-align: center; cursor: pointer; }

/* --- 按钮样式 --- */
button.accent { 
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%); color: #000; border: none; cursor: pointer; font-weight: bold; padding: 8px 25px; transition: all 0.3s;
}
button.accent:hover { transform: translateY(-2px); box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }

button.super-btn {
    background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%); color: #fff; 
    border: 1px solid #ba68c8; box-shadow: 0 0 10px rgba(156, 39, 176, 0.5);
}
button.super-btn:hover {
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.8); transform: scale(1.05);
}

/* --- 导航链接 --- */
.nav-links { text-align: left; margin-bottom: 20px; }
.nav-links a { color: var(--gold-accent); text-decoration: none; font-weight: bold; font-family: var(--font-serif); display: inline-flex; align-items: center; transition: color 0.3s; margin-right: 15px; }
.nav-links a:hover { color: #fff; }

/* --- 盘面容器 --- */
.output-container { padding: 0; position: relative; }
.board-wrapper { background: #f5f5f5; padding: 10px; border-radius: 8px; overflow-x: auto; }

/* --- 紫微 4x4 网格布局 (PC端默认) --- */
.zw-plate-grid {
    display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr));
    grid-template-rows: repeat(4, minmax(180px, 1fr)); gap: 1px;
    background-color: var(--palace-border); border: 2px solid var(--palace-border); font-family: var(--font-serif);
}

/* --- 单个宫位样式 --- */
.zw-palace {
    background-color: var(--palace-bg); color: var(--text-dark);
    padding: 6px; display: flex; flex-direction: column; justify-content: space-between;
    position: relative; font-size: 13px; min-height: 200px;
    cursor: pointer; transition: background 0.2s;
}
.zw-palace:hover { background-color: #f0f8ff; }

/* 特殊高亮框 */
.qimen-cai-box { border: 2px solid #d32f2f !important; background-color: #fff8e1; }
.qimen-guan-box { border: 2px solid #1976d2 !important; background-color: #e3f2fd; }

/* --- 标签系统 (奇门/六壬) --- */
.palace-tags { 
    position: absolute; top: 2px; left: 2px; right: 2px; 
    display: flex; flex-wrap: wrap; gap: 3px; pointer-events: none; z-index: 5;
}

.tag { font-size: 13px; padding: 2px 5px; border-radius: 3px; color: #fff; font-weight: bold; line-height: 1.2; letter-spacing: 0.5px; }
.tag-qimen-cai { background-color: #d32f2f; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.tag-qimen-guan { background-color: #1976d2; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.tag-liuren-zu { background-color: #5d4037; border: 1px solid #3e2723; }
.tag-liuren-zong { background-color: #795548; border: 1px solid #5d4037; }
.tag-liuren-jing { background-color: #a1887f; border: 1px solid #795548; }

/* --- 星曜布局 --- */
.palace-top { display: flex; justify-content: space-between; align-items: flex-start; flex-grow: 1; margin-top: 20px; } 
.palace-small-stars { display: flex; flex-direction: column; font-size: 12px; gap: 2px; text-align: left; width: 45%; }
.palace-main-stars { display: flex; flex-direction: column; align-items: flex-end; width: 55%; }

/* 星曜颜色 */
.star-good { color: #2e7d32; font-weight: bold; }
.star-bad { color: #555; }
.star-bad.highlight { color: #c62828; font-weight: bold; }

.star-main { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-bottom: 3px; white-space: nowrap; width: 100%; }
.star-name { font-weight: bold; font-size: 15px; line-height: 1.2; }
.star-main.red .star-name { color: var(--star-ji); }
.star-main.purple .star-name { color: var(--star-ziwei); }

/* 庙旺利陷 */
.brightness { font-size: 11px; transform: scale(0.9); color: #888; margin-right: 1px; }
.brightness.miao { color: #d32f2f; font-weight: bold; } 
.brightness.xian { color: #2e7d32; } 

/* 四化标签 */
.sihua-tag { display: inline-block; font-size: 10px; padding: 0px 3px; border-radius: 2px; color: #fff; font-weight: normal; line-height: 1.3; margin-left: 2px; vertical-align: middle; }
.hua-lu { background-color: #43A047; } 
.hua-quan { background-color: #1E88E5; } 
.hua-ke { background-color: #8E24AA; } 
.hua-ji { background-color: #E53935; }

/* 宫位底部 (宫名/大限/干支) */
.palace-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; border-top: 1px dotted #ccc; padding-top: 4px; }
.palace-name-box { font-weight: bold; font-size: 14px; color: #000; }
.shen-zhu { color: #d32f2f; font-size: 0.9em; margin-left: 3px; font-weight: bold;}
.decade-fortune { font-size: 13px; color: #0277BD; margin-top: 2px; font-weight: 500; font-family: var(--font-sans); }
.palace-ganzhi-box { text-align: right; font-weight: bold; color: #333; font-size: 14px; }

/* --- 中宫 (命盘核心信息) --- */
.zw-center-panel { grid-column: 2 / span 2; grid-row: 2 / span 2; background-color: #fffcf5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #333; }
.center-info-title { font-size: 1.3rem; font-weight: bold; margin-bottom: 12px; color: #000; }
.center-info-row { margin: 6px 0; font-size: 15px; }
.bazi-container { display: flex; gap: 20px; margin: 20px 0; padding: 15px; background: #eee; border-radius: 6px; border: 1px solid #ccc; }
.bazi-pillar { display: flex; flex-direction: column; font-weight: bold; font-size: 1.4rem; min-width: 45px; line-height: 1.2; }
.bazi-label { font-size: 0.85rem; color: #666; font-weight: normal; margin-bottom: 4px; }
.ming-ju-highlight { color: #d32f2f; font-weight: bold; font-size: 1.2rem; }

/* --- 浮层弹窗 --- */
.score-toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.9); color: #fff; padding: 30px 50px; border-radius: 12px;
    z-index: 2000; display: none; text-align: center; border: 1px solid var(--gold-accent);
    box-shadow: 0 5px 25px rgba(0,0,0,0.6); min-width: 250px;
}
.score-val { font-size: 4rem; color: var(--gold-accent); font-weight: bold; margin: 20px 0; text-align: center; line-height: 1; }
.score-close { margin-top: 20px; font-size: 1rem; color: #aaa; cursor: pointer; text-decoration: underline; }

/* =========================================================
   移动端适配：全览微缩模式 (手机端自动切换)
   当屏幕宽度小于 768px 时，强制保持4x4布局，但极度压缩尺寸和字体
   ========================================================= */
@media screen and (max-width: 768px) {
    /* 1. 外层容器调整 */
    body { padding: 5px; }
    .app-container { width: 100%; padding: 0; }
    .board-wrapper { padding: 2px; overflow-x: hidden; }

    /* 2. 网格布局：强制保持4x4，但列宽和行高缩小 */
    .zw-plate-grid {
        display: grid !important; 
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(4, minmax(110px, 1fr)) !important;
        gap: 1px; 
        font-family: sans-serif; /* 手机小字用无衬线更清晰 */
    }

    /* 3. 宫位单元格：紧凑化 */
    .zw-palace {
        padding: 2px;
        min-height: auto; /* 取消PC端的200px最小高度 */
        overflow: hidden; 
    }

    /* 4. 字体与元素微调 (核心) */
    
    /* 标签缩小 */
    .palace-tags { top: 1px; left: 1px; right: 1px; gap: 1px; }
    .tag {
        font-size: 8px; 
        padding: 1px 2px;
        line-height: 1;
        transform: scale(0.85); /* 突破最小字体限制 */
        transform-origin: top left;
    }

    /* 顶部星曜区域 */
    .palace-top { margin-top: 14px; }
    
    /* 主星 */
    .star-main { margin-bottom: 1px; gap: 0; }
    .star-name { font-size: 11px; }
    .brightness { font-size: 9px; transform: scale(0.8); margin-right: 0; }

    /* 辅星 */
    .palace-small-stars { gap: 0px; line-height: 1; }
    .star-good, .star-bad {
        font-size: 9px;
        white-space: nowrap;
        transform: scale(0.9);
        transform-origin: left;
        margin-bottom: 1px;
    }

    /* 四化标签 */
    .sihua-tag { font-size: 8px; padding: 0 1px; transform: scale(0.9); }

    /* 底部信息 (宫名/大限) */
    .palace-bottom {
        margin-top: 2px; padding-top: 2px;
        flex-direction: column; /* 上下排列以节省横向空间 */
        align-items: center; justify-content: center;
        text-align: center;
    }
    
    .palace-name-box { font-size: 11px; line-height: 1.2; }
    .shen-zhu { display: block; font-size: 9px; transform: scale(0.8); margin: 0; }
    .decade-fortune { font-size: 9px; display: block; }
    .palace-ganzhi-box { font-size: 10px; transform: scale(0.9); text-align: center; }

    /* 5. 中宫 (核心信息区) 调整 */
    .zw-center-panel { padding: 5px; }
    .center-info-title { font-size: 1rem; margin-bottom: 3px; }
    .center-info-row { font-size: 9px; margin: 1px 0; line-height: 1.2; }
    
    .bazi-container { margin: 3px 0; padding: 3px; gap: 3px; }
    .bazi-pillar { font-size: 0.9rem; min-width: 15px; }
    .bazi-label { font-size: 8px; margin-bottom: 0; }
    .ming-ju-highlight { font-size: 10px; }
}