/* =========================================
   1. 基礎規則卡片 (Grid 佈局)
   ========================================= */
.rules-grid {
    display: grid;
    /* 電腦版一列顯示 2 個，手機版自動變成 1 個 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.rule-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: flex-start; /* 靠上對齊 */
    gap: 15px;
    transition: transform 0.2s;
}

.rule-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    border-color: var(--primary-gold, #fbb750);
}

.rule-card.full-width {
    grid-column: 1 / -1; /* 這一張卡片佔滿整行 */
}

.rule-icon {
    font-size: 1.8rem;
    color: var(--primary-gold, #fbb750);
    width: 40px;
    text-align: center;
    flex-shrink: 0; /* 防止圖示被壓縮 */
    margin-top: 2px;
}

.rule-text strong {
    display: block;
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.rule-text span {
    color: #ccc;
    font-size: 0.95rem;
}

/* 條列式規則修正 */
.rule-list {
    margin: 5px 0 0 20px;
    padding: 0;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =========================================
   2. 進化道具表格 (置中對齊)
   ========================================= */
.center-table th, .center-table td {
    text-align: center;
    vertical-align: middle;
}

.item-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.item-wrap img {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
}

.item-wrap span {
    font-size: 0.85rem;
    color: #ddd;
}

/* =========================================
   3. 寵物數值表 (★ 手機版核心優化 ★)
   ========================================= */
/* 容器：允許水平捲動 */
.scroll-table {
    overflow-x: auto;
    position: relative; /* 為了讓 sticky 生效 */
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 表格本體 */
.pet-table {
    width: 100%;
    min-width: 800px; /* ★ 強制表格最小寬度，確保電腦版不擠，手機版觸發捲動 */
    border-collapse: separate;
    border-spacing: 0;
}

.pet-table th {
    background: linear-gradient(to bottom, #2b2218, #1a1510);
    color: #fbb750;
    font-weight: bold;
    padding: 12px 10px;
    white-space: nowrap; /* 標題不換行 */
    border-bottom: 2px solid rgba(251, 183, 80, 0.3);
}

.pet-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    vertical-align: middle;
    color: #ddd;
    font-size: 0.95rem;
}

/* --- 首欄固定 (Sticky Column) --- */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    /* 必須給背景色，不然透明背景滑動時文字會重疊 */
    background: #25201c; 
    border-right: 1px solid rgba(251, 183, 80, 0.2); /* 右邊加條線區隔 */
}

/* 偶數行背景色要跟著變 */
.pet-table tbody tr:nth-child(even) .sticky-col {
    background: #2a2520;
}

/* 表頭的首欄也要固定，但層級要最高 */
.pet-table thead .sticky-col {
    background: #2b2218; /* 跟表頭顏色一致 */
    z-index: 3;
}

/* 寵物頭像與名稱排版 */
.pet-info {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    padding-left: 5px;
    font-weight: bold;
    color: #fff;
    width: 130px; /* 固定寬度，確保排版整齊 */
}

.pet-info img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* =========================================
   4. 視覺裝飾 (技能與階級)
   ========================================= */
/* 階級徽章 */
.badge-tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-right: 5px;
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.tier-1 { background: #81c784; } /* 綠 */
.tier-2 { background: #64b5f6; } /* 藍 */
.tier-3 { background: #ffd700; box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); } /* 金 */

/* 技能標籤 */
.skill-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #fff;
    background: rgba(255,255,255,0.1);
    white-space: nowrap;
}
.skill-tag.ice { background: rgba(33, 150, 243, 0.3); color: #90caf9; border: 1px solid rgba(33, 150, 243, 0.5); }
.skill-tag.fire { background: rgba(244, 67, 54, 0.3); color: #ffcdd2; border: 1px solid rgba(244, 67, 54, 0.5); }
.skill-tag.wind { background: rgba(255, 255, 255, 0.2); color: #e0e0e0; border: 1px solid rgba(255, 255, 255, 0.3); }
.skill-tag.earth { background: rgba(121, 85, 72, 0.3); color: #d7ccc8; border: 1px solid rgba(121, 85, 72, 0.5); }
.skill-tag.phys { background: rgba(158, 158, 158, 0.3); color: #f5f5f5; border: 1px solid rgba(158, 158, 158, 0.5); }
.skill-tag.slow { background: rgba(103, 58, 183, 0.3); color: #d1c4e9; border: 1px solid rgba(103, 58, 183, 0.5); }
.skill-tag.shock { background: rgba(255, 152, 0, 0.3); color: #ffe0b2; border: 1px solid rgba(255, 152, 0, 0.5); }

/* 文字顏色 */
.text-green { color: #4caf50; font-weight: bold; }
.text-red { color: #ff5252; font-weight: bold; }
.text-gold { color: #ffd700; font-weight: bold; }
.text-gray { color: #666; }

.link-gold { color: #fbb750; text-decoration: none; border-bottom: 1px dashed #fbb750; }
.link-gold:hover { color: #fff; border-bottom-style: solid; }

/* GIF 展示區 */
.pet-showcase {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.showcase-item {
    text-align: center;
    background: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(251, 183, 80, 0.2);
}

.sc-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* =========================================
   5. 間距優化 (回答您的問題)
   ========================================= */
.info-section {
    margin-bottom: 40px; /* ★ 這裡控制每個大區塊之間的距離 */
}

.content-box {
    padding-bottom: 50px; /* ★ 這裡控制最底部的留白 */
}