/* ===================================================
   Layout Logic: Vertical Stack Tower (Final Setting)
   Mobile: 1 Column (Fluid)
   Tablet/PC: Fixed 339px Width x 2 Columns
   Gap: 15px
   =================================================== */

/* --- メイングリッドコンテナ --- */
.pc-pokemon-list {
    display: grid;
    justify-content: center;
    /* ★基本（スマホ）は1列 */
    grid-template-columns: 1fr;
    gap: 15px;       
    padding: 10px; 
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

/* ▼▼▼ 画面幅768px以上（タブレット・PC）の設定 ▼▼▼ */
@media screen and (min-width: 768px) {
    .pc-pokemon-list {
        /* ★ご指定のセッティング値で確定！ */
        grid-template-columns: 339px 339px;
    }
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */


/* --- カード本体 --- */
.pc-zukan-card {
    position: relative;
    background-color: #fff;
    border-right: 8px solid var(--pc-type-color);
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box; 
    
    display: flex;
    flex-direction: column;
    min-height: 150px; 
}

/* PC時は高さだけ合わせる（幅はグリッドに従う） */
@media screen and (min-width: 768px) {
    .pc-zukan-card {
        height: 100%;
    }
}

.pc-zukan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* --- 背景アイコン --- */
.pc-card-bg-icons {
    position: absolute;
    bottom: -1px;
    left: 20px;
    width: 180px;
    height: 150px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12; 
}

.pc-bg-icon-img {
    position: absolute;
    width: 100px;
    height: 100px;
    object-fit: contain;
    transform: rotate(-10deg);
}
.pc-bg-icon-img:nth-child(1) { bottom: 0; left: 0; z-index: 1; }
.pc-bg-icon-img:nth-child(2) { bottom: 20px; left: 100px; z-index: 2; }


/* --- コンテンツエリア --- */
.pc-card-content {
    position: relative;
    z-index: 1;
    
    /* ★修正完了！ヌケサク解消！ */
    /* 左の無駄な80pxを捨て、左右均等に広く使う */
    padding: 12px 15px; 
    
    flex: 1;                
    display: flex;          
    flex-direction: column; 
    justify-content: flex-start;
}

/* ■ 1段目：No.（独立行） */
.pc-stack-no {
    margin-bottom: 2px;
}
.pc-info-no {
    font-family: 'Arial Black', sans-serif;
    font-size: 1.1rem;
    color: var(--pc-type-color);
}

/* ■ 2段目：日本語名（メイン＋副題） */
.pc-stack-jpname {
    margin-bottom: 4px;
    line-height: 1.3;
}

/* メインの名前（フシギバナ） */
.pc-name-main {
    font-size: 1.3rem; 
    font-weight: bold;
    color: #333;
    display: block; /* 念のためブロック化 */
}

/* サブの名前（キョダイマックス...） */
.pc-name-sub {
    /* ★ここで小さくする！ */
    font-size: 0.9rem; 
    color: #555;
    font-weight: normal;
    display: block; /* 強制的に次の行へ */
    margin-top: 2px;
}

/* ■ 3段目：英語名 */
.pc-stack-english {
    display: block;
    margin-bottom: 8px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.pc-en-name {
    font-size: 0.85rem;
    color: #666;
    font-family: sans-serif;
}

/* ■ 4段目：タイプ */
.pc-stack-type {
    display: block;
    margin-bottom: 8px;
}
.pc-info-type-text {
    font-weight: bold;
    font-size: 1.0rem;
    color: #444;
    background: rgba(0,0,0,0.03);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ■ 5段目：世代・地方（底辺固定） */
.pc-stack-bot {
    border-top: 1px dotted #ddd;
    padding-top: 6px;
    margin-top: auto; 
}
.pc-info-location {
    font-size: 0.85rem;
    color: #777;
}


/* ===================================================
   Digital Shield & Lightbox Styles
   =================================================== */

/* 画像を包む親枠（ここを基準に盾を置く） */
.hero-image-wrapper {
    position: relative; /* 重要：盾の配置基準 */
    display: inline-block;
    line-height: 0; /* 画像下の謎の隙間を消す */
    border-radius: 8px;
    overflow: hidden; /* 角丸からはみ出さない */
}

/* ▼透明な盾（通常時） */
.digital-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 画像より手前に配置 */
    background: rgba(255, 255, 255, 0); /* 完全透明 */
    cursor: zoom-in; /* 触れると「虫眼鏡」カーソルに */
}

/* ▼ポップアップ画面（黒背景） */
.zukan-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* ポップアップのコンテナ */
.zukan-lightbox-container {
    position: relative; /* 第2シールドの基準 */
    max-width: 90vw;
    max-height: 90vh;
}

.zukan-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    border-radius: 4px;
}

/* ▼第2の透明シールド（ポップアップ用） */
.digital-shield-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* 最前面 */
    cursor: zoom-out; /* 閉じれそうなカーソル */
}

/* ===================================================
   図鑑専用 ポップアップ装甲 (zukan-detail-lightbox)0312追加 図鑑用
   =================================================== */

/* ▼透明な盾（通常時：トリガー用シールド） */
.zukan-detail-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; 
    background: rgba(255, 255, 255, 0); 
    cursor: zoom-in; 
}

/* ▼ポップアップ画面（全画面の黒背景） */
.zukan-detail-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999; /* 最前面へ */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* ▼ポップアップのコンテナ（画像と第2シールドの器） */
.zukan-detail-lightbox-container {
    position: relative; 
    max-width: 90vw;
    max-height: 90vh;
    display: inline-block; /* 画像サイズにぴったり合わせる */
}

/* ▼フルサイズ画像本体 */
.zukan-detail-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    border-radius: 4px;
    pointer-events: none; /* 画像本体へのタッチを貫通させる */
}

/* ▼第2の透明シールド（ポップアップ用・長押し絶対防御） */
.zukan-detail-shield-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000; 
    cursor: zoom-out; 
    background: rgba(0,0,0,0); 
    
    /* iOS/Android長押し・持ち出し対策の念押し */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* ===================================================
   図鑑専用 ポップアップ装甲 (zukan-detail-lightbox)0312追加 図鑑用
   =================================================== */


   /* --- oo-mmfarm_01 専用: 独立デジタルシールド 339px --- */
.mmfarm-shield-339 {
    width: 339px;
    margin: 20px auto; /* ヒーローエリアとドット絵エリアの間の余白 */
    display: block;
    clear: both;
}

.mmfarm-shield-339 .digital-shield-container {
    width: 100%;
    max-width: 100%;
}