@charset "utf-8";
/* ==========================================================
   ▼ モンスター（一覧と詳細）
   ========================================================== */
.monsterTable td{
    white-space: nowrap;
}
/* 番号の列は数字の幅だけにする */
.monsterTable th:first-child,
.monsterTable td:first-child{
    width: 1%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
/* 特殊な行動（いちばん右の列）は折り返す */
.monsterTable td:last-child{
    min-width: 10em;
    white-space: normal;
    font-size: 0.8rem;
}
/* 機種で値が違うもの（表示中の値に色を付ける） */
.isDiffVal{
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--diffBg);
    color: var(--diffInk);
    font-weight: 700;
}

/* 詳細の上：数値の要約が主役。画像は右に小さく添える */
.monsterHead{
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.monsterHeadBody{
    flex: 1;
    min-width: 0;
}
.monsterFigures{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 0 0 auto;
    width: 104px;
}
/* りゅうおうの第2形態など、表の前に横に並べるとき */
.monsterFigures.isRow{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    width: auto;
    margin: 0.25rem 0 0.75rem;
}
.monsterFigure{
    margin: 0;
}
/* 戦闘画面と同じ黒い背景に、ドットのまま表示する */
.monsterSprite{
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    width: 104px;
    height: 104px;
    padding: 1px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
/* どのモンスターも、FC版・SFC版とも、比率を保って枠いっぱい（余白は枠の1%ほど）に広げる */
.monsterSprite img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.monsterSprite.imagePending{
    background: repeating-linear-gradient(45deg, #ebe7dc 0 8px, #f3f0e8 8px 16px);
    border: 1px solid var(--line);
    color: var(--inkWeak);
    font-size: 0.75rem;
    text-align: center;
}
/* 黒っぽいモンスター（影の騎士・SFC版ストーンマンなど。明るさは prepImages.php が測る）は、黒い背景だと見えないので明るい背景にする */
.isDarkSprite .monsterSprite{
    background: #8a8f9c;
}
.monsterFigure figcaption{
    margin-top: 0.15rem;
    color: var(--inkSub);
    font-size: 0.68rem;
    text-align: center;
}
.monsterCredit{
    margin-bottom: 0.25rem;
    color: var(--inkWeak);
    font-size: 0.68rem;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: normal;
}
.monsterEn{
    margin-bottom: 0.5rem;
    color: var(--inkSub);
    font-size: 0.8rem;
}
.statSummary{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.statSummary > div{
    padding: 0.5rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.statSummary dt{
    color: var(--inkSub);
    font-size: 0.72rem;
    font-weight: 700;
}
.statSummary dd{
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.statVer{
    color: var(--inkWeak);
    font-size: 0.62rem;
    font-weight: 400;
}
.monsterWhere{
    margin-top: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.6;
}
.monsterWhere span{
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0 0.45rem;
    background: var(--night);
    border-radius: 4px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
@media (max-width: 719px){
    .monsterFigures{
        width: 76px;
    }
    .monsterSprite{
        width: 76px;
        height: 76px;
    }
    .statSummary dd{
        font-size: 0.85rem;
    }
}
.splitDetail h4{
    margin: 1.25rem 0 0.5rem;
    font-size: 0.98rem;
}
.cmpTable td{
    min-width: 6em;
}
.calcList li{
    line-height: 1.75;
}

/* ---------- りゅうおうの画像のモザイク（昔の攻略本のように、最後のボスの姿を隠す） ----------
   粗い小さな画像（…Mosaic.webp）を、ドットのまま（pixelated）元の大きさまで拡大して四角いモザイクに見せる。
   「モザイクを外す」で元の画像に切り替える（CSS の filter だけで作る方法は、ブラウザによって絵が消えたため使わない） */
.isMosaic .spriteReal,
.isMosaic.isRevealed .spriteMosaic{
    display: none;
}
.isMosaic.isRevealed .spriteReal{
    display: block;
}
.mosaicToggle{
    margin-top: 0.2rem;
    padding: 0.25rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--lineStrong);
    border-radius: 6px;
    font-size: 0.7rem;
    line-height: 1.4;
}
.mosaicToggle[aria-pressed="true"]{
    background: var(--night);
    border-color: var(--night);
    color: #fff;
}
.mosaicNote{
    color: var(--inkSub);
    font-size: 0.75rem;
}

/* ---------- 名前で決まる4つのタイプ（システム：成長） ----------
   行＝力が伸びる／伸びにくい（攻撃の2タイプ）、列＝素早さ／HP。攻撃型は金色、呪文型は青で色分けする */
.nameTypeTable{
    width: 100%;
    min-width: 320px;
    border-collapse: separate;
    border-spacing: 6px;
    table-layout: fixed;
}
.nameTypeTable thead th{
    padding: 0.4rem 0.3rem;
    background: var(--night);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
}
.nameTypeTable thead td{
    width: 6.5rem;
}
.nameTypeTable small{
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.85;
}
.ntRow{
    padding: 0.5rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
    vertical-align: middle;
}
.ntRow.isStrong{
    background: var(--gold);
    color: #0d1022;
}
.ntRow.isWeak{
    background: #3b6fb3;
    color: #fff;
}
.ntCell{
    padding: 0.6rem 0.7rem;
    border-radius: 6px;
    vertical-align: top;
}
.ntCell.isStrong{
    background: var(--goldSoft);
    border: 1px solid #e6c56a;
}
.ntCell.isWeak{
    background: #e6eef9;
    border: 1px solid #b7cbe8;
}
.ntName{
    display: block;
    font-weight: 700;
}
.ntRem,
.ntEx{
    display: block;
    color: var(--inkSub);
    font-size: 0.8rem;
    line-height: 1.6;
}
@media (max-width: 719px){
    .nameTypeTable thead td{
        width: 4.8rem;
    }
    .ntRow,
    .nameTypeTable thead th{
        font-size: 0.78rem;
    }
    .ntCell{
        padding: 0.5rem;
    }
}
/* よくある名前の例：力が伸びる／伸びにくい */
.nameExTable .ntYes{
    color: #8a5a00;
    font-weight: 700;
}
.nameExTable .ntNo{
    color: #2f5f9e;
}
/* 成長タイプの図：タイプ番号の下の公式の呼び名（〇〇優先型） */
.ntSub{
    display: block;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
}
/* スマホでカードにしたとき：番号の列は隠し、名前の前に「No.」として出す */
@media (max-width: 719px){
    .monsterTable.isStacked td:first-child{
        display: none;
    }
    .monsterTable.isStacked th[data-no]::before{
        content: "No." attr(data-no) " ";
        color: var(--inkSub);
        font-size: 0.75rem;
        font-weight: 400;
    }
}