/* 子ページ用基本レイアウト */
.sub-page {
    padding-top: 50px;
    padding-bottom: 100px;
}

.char-detail-header {
    text-align: center;
    margin-bottom: 50px;
}

.char-rank-badge {
    display: inline-block;
    padding: 5px 15px;
    color: #fff;
    font-weight: bold;
    border-radius: 20px;
    margin-bottom: 15px;
    background: var(--s-rank-color); /* デフォルトS色、JSかHTMLでクラス指定可 */
}
/* Tierバッジ色はCommonのクラスを流用可能だが、ここで明示も可 */
.char-rank-badge.s-rank { background: var(--s-rank-color); }
.char-rank-badge.a-rank { background: var(--a-rank-color); }
/* 必要に応じて他ランクも追加 */

.char-detail-header h1 {
    font-size: 3rem;
}

.char-eng {
    color: #999;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* 詳細コンテンツレイアウト */
.char-detail-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    background: #f9f9f9;
    padding: 40px;
    border-radius: 20px;
}

.char-side-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.char-main-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* レーダーチャート周り */
.chart-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.chart-container {
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#charRadar {
    width: 100% !important;
    height: 100% !important;
}

/* チャート下の解説リスト */
.chart-desc-list dl {
    font-size: 0.9rem;
    line-height: 1.5;
}

.chart-desc-list dt {
    font-weight: 900;
    border-left: 3px solid var(--a-rank-color);
    padding-left: 8px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.chart-desc-list dt:first-child { margin-top: 0; }
.chart-desc-list dd { margin-left: 12px; color: #666; margin-bottom: 10px; }

/* テキスト情報エリア */
.char-info-text h3 {
    font-size: 1.5rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
}
.char-info-text h3:first-child { margin-top: 0; }

/* 性能比較セクション */
.comparison-note {
    font-size: 0.8rem;
    color: #888;
    text-align: right;
    margin-bottom: 10px;
}

/* 上段（総合ランク＆ぷよ量） */
.stats-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

/* 総合ランキングカード */
.overall-rank-card {
    background: #fff;
    border: 2px solid #000; /* 強調のため黒枠またはS色 */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overall-rank-card h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    text-align: center;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
    color: #333;
}

.overall-main-val {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    line-height: 1;
    margin-bottom: 10px;
    color: var(--s-rank-color); /* Sランク色 */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}

.overall-main-val span {
    font-size: 1rem;
    color: #333;
    font-weight: 700;
    margin-left: 5px;
    text-shadow: none;
}

.overall-sub-list {
    display: flex;
    justify-content: space-around;
    background: #f9f9f9;
    border-radius: 6px;
    padding: 8px;
}

.overall-sub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.overall-sub-item span {
    font-size: 0.7rem;
    color: #888;
}

.overall-sub-item strong {
    font-size: 1.1rem;
    font-weight: 900;
}

/* ぷよ量データ表示エリア */
.puyo-stat-container {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.puyo-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.puyo-stat-header h4 {
    margin: 0;
    font-size: 1rem;
}

.puyo-main-val {
    font-size: 2rem;
    font-weight: 900;
    color: #333;
}
.puyo-main-val span { font-size: 1rem; font-weight: normal; margin-left: 2px; }

.puyo-data-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 15px;
    flex-grow: 1; /* コンテナ内で高さを広げる */
}

.puyo-data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 2px;
    font-size: 0.85rem;
}
.puyo-data-item label { color: #888; font-size: 0.75rem; }
.puyo-data-item span { font-weight: 700; }

/* 下段（4つのステータス） */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列固定 */
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

.stat-card.highlight {
    border: 2px solid var(--s-rank-color);
    background: #fffdf5;
}

.stat-card h4 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.stat-value-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    justify-content: center;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.stat-row .label {
    color: #999;
    font-size: 0.75rem;
}

.stat-row .rank-val {
    font-weight: 900;
    font-size: 1.1rem;
}

.rank-first {
    color: #e67e22; /* 金/オレンジ */
    font-size: 1.3rem !important;
}


.spec-list {
    margin: 20px 0;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

.spec-list li {
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.note-box {
    background: #fff3cd;
    border-left: 5px solid #ffc107;
    padding: 15px;
    margin-top: 20px;
}

/* ツモパターングリッド */
.tsumo-container {
    position: relative;
    padding-bottom: 0; /* 下部情報の削除に伴いパディング削除 */
    margin-bottom: 10px;
}

.tsumo-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin-top: 20px;
    justify-items: center;
}

.tsumo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-num {
    font-size: 0.7rem;
    font-weight: 700;
    color: #666;
}

.tsumo-img {
    display: block;
    width: 50px;
    height: auto;
    object-fit: contain;
}

.tsumo-info-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.8rem;
    font-weight: 700;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
}

/* 相性リスト（行形式） */
.matchup-list-rows {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.matchup-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
    gap: 20px;
}

.matchup-row:last-child { border-bottom: none; }

.matchup-main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 200px;
    flex-shrink: 0;
    position: relative;
}

.matchup-main .char-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}

.matchup-main .char-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matchup-main .char-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.matchup-main .badge {
    position: static;
    margin-left: auto;
    font-size: 0.8rem;
    padding: 3px 8px;
}

.matchup-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
}

.tag {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f4f6f8;
    color: #333;
}

.tag-up { color: #e74c3c; background: rgba(231, 76, 60, 0.1); }
.tag-down { color: #3498db; background: rgba(52, 152, 219, 0.1); }
.tag-up-mini { color: #e67e22; background: rgba(230, 126, 34, 0.1); font-size: 0.8rem; }
.tag-down-mini { color: #57606f; background: rgba(87, 96, 111, 0.1); font-size: 0.8rem; } /* 薄い寒色 */

/* 動画セクション */
.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.video-card {
    display: block;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.video-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-title {
    padding: 10px 15px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
}

/* モバイル対応（詳細ページ） */
@media (max-width: 768px) {
    /* コンテナのレイアウト修正：Blockにして縦積みに強制 */
    .char-detail-content {
        display: block;
        padding: 20px; /* パディングを減らして領域確保 */
    }

    /* 上部カラムのマージン調整 */
    .char-side-col {
        margin-bottom: 40px;
    }

    .chart-container { height: 300px; }
    
    /* ツモ表の縮小（はみ出し防止） */
    .tsumo-grid {
        gap: 2px;
    }
    .tsumo-img {
        width: 100%; /* 親要素に合わせる */
        max-width: 35px; /* 8列入るように小さくする */
    }
    .tsumo-container {
        padding-bottom: 0;
    }
    
    /* 性能比較グリッドのレスポンシブ */
    .stats-top-row {
        grid-template-columns: 1fr; /* モバイルは1列 */
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr; /* モバイルは2列 */
    }
    .puyo-data-list {
        grid-template-columns: 1fr 1fr; /* ぷよ量は2列維持 */
    }

    /* 相性リスト */
    .matchup-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .matchup-main {
        width: 100%;
    }
    
    /* 動画グリッド */
    .video-grid {
        grid-template-columns: 1fr;
    }
}