/* ===== コレクションBOX画面 ===== */

.collection-wrapper {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    /* 内側の min-width: max-content が外に漏れないように */
    overflow: hidden;
}

/* ヘッダーサマリー（左右に余白を持って画面中央に収まる） */
.collection-summary {
    display: flex;
    gap: 12px;
    justify-content: space-around;
    /* 左右に余白を持たせる（SP/PC共通） */
    margin: 0 16px 20px;
    padding: 15px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    box-sizing: border-box;
}

.collection-summary-item {
    text-align: center;
    flex: 1;
    min-width: 80px;
}

.collection-summary-label {
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
    white-space: nowrap;
}

.collection-summary-value {
    font-size: 18px;
    font-weight: bold;
    color: #fe7432;
    white-space: nowrap;
}

/* グリッドのスクロールラッパー: 親(wrapper)の幅に追従し、内側で横スクロール */
.collection-grid-scroll {
    /* グリッドも左右に余白を持たせる（サマリーと揃える） */
    margin: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
}

/* グリッド本体: 固定幅（モンスター列80px + 7列×90px） */
.collection-grid {
    display: grid;
    grid-template-columns: 80px repeat(7, 90px);
    gap: 6px;
    /* 折り返さず、コンテナ幅を超えたら横スクロール */
    min-width: max-content;
    margin: 0 auto;
}

/* デザイン率ヘッダー（40%, 50%, ...） */
.collection-rate-header {
    text-align: center;
    font-weight: bold;
    padding: 6px;
    background: #fe7432;
    color: white;
    border-radius: 5px;
    font-size: 13px;
}

/* モンスター名ラベル（行ヘッダー） */
.collection-monster-label {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #004b82;
    color: white;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    min-height: 90px;
}

/* 各メダルセル */
.collection-cell {
    background: #fff;
    border-radius: 5px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.collection-cell img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.collection-cell-empty {
    width: 50px;
    height: 50px;
    background: #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}

.collection-cell-empty span {
    font-size: 24px;
    color: #999;
    font-weight: bold;
}

/* 空セル（モンスター名ラベル列の下にある報酬行の左端） */
.collection-empty-cell {
    background: transparent;
}

/* 報酬カード */
.collection-reward {
    padding: 8px 4px;
    text-align: center;
    border-radius: 5px;
    line-height: 1.2;
    background: #fff;
    border: 1px solid #ddd;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60px;
}

.collection-reward-completed {
    background: #fff3cd;
    border: 2px solid #f39c12;
    opacity: 1;
}

/* タイトル: 改行せず1行に収める */
.collection-reward-title {
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: #333;
}

/* 数量（例: "×3枚" "+1口"） 大きめに目立たせる */
.collection-reward-amount {
    font-size: 14px;
    font-weight: bold;
    color: #fe7432;
    margin-top: 2px;
    white-space: nowrap;
}

.collection-reward-completed-mark {
    color: #d35400;
    font-weight: bold;
    margin-top: 3px;
    font-size: 11px;
    white-space: nowrap;
}

/* 覚醒BOXからコレクションBOXへの導線リンク（awakening.blade.php内に配置） */
.awakening-to-collection-link {
    margin: 0 16px 16px;
    text-align: center;
}

.awakening-to-collection-link a {
    display: inline-block;
    padding: 10px 20px;
    background: #fe7432;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.2s;
}

.awakening-to-collection-link a:hover {
    background: #e56625;
}

/* ===== コンプリート達成セクション（覚醒結果モーダル内） ===== */

.awakening-completed-section {
    margin: 20px 0 16px;
    padding: 16px;
    background: linear-gradient(135deg, #fff8e1, #ffe082);
    border: 2px solid #f39c12;
    border-radius: 10px;
    text-align: center;
}

.awakening-completed-header {
    font-size: 16px;
    font-weight: bold;
    color: #d35400;
    margin-bottom: 10px;
}

.awakening-completed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.awakening-completed-list li {
    padding: 6px 10px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    font-size: 13px;
    color: #333;
}

.awakening-completed-note {
    margin-top: 10px;
    font-size: 11px;
    color: #666;
}

/* 戻るボタン */
.collection-back {
    margin-top: 20px;
    text-align: center;
}

.collection-back a {
    display: inline-block;
    padding: 10px 20px;
    background: #004b82;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.collection-back a:hover {
    background: #003a64;
}

/* ホーム画面のコレクション枠（保有数 X/21 / 達成 X/7 表示） */
.home-menu-card-collection {
    position: relative;
}

.home-menu-collection-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    font-size: 10px;
    color: #555;
    line-height: 1.2;
}

.home-menu-collection-stat {
    white-space: nowrap;
}

/* 管理画面ユーザー詳細のコレクションセクション（仕様書 §4.2.1） */
.account-detail-section {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.account-detail-section-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border-left: 4px solid #f59e0b;
    padding-left: 10px;
}