/**
 * Nettoge Core - Icon Chip（技名などを「アイコン＋名前」の薄い枠で囲む）
 * 枠は線だけ（背景色なし）なので、ライト／ダークどちらでも浮かない。改行で名前が割れないよう nowrap。
 * アイコンは data-icon ごとの --ntg-act-icon（Module.php が <style> に書き出す）を ::before に敷く。
 */
.ntg-act {
    /* 2026-09-23 依頼主「改行があるとき、上下で枠がかぶってきてしまっている」「枠が芯になく、左右も微妙に余白ズレ」「文字と上下芯があっていない」
       → 枠の中の名前の行の高さをアイコンと同じ 2em にして、名前を枠の縦の中央に置く（アイコンは align-self: center）。
         枠の基準線は名前の基準線（align-items: baseline）なので、vertical-align: baseline で前後の本文と文字の高さがそろう。
         （middle だと欧文の x-height で合わせるため、和文より 3〜4px 下がる）
         上下に margin を取って、折り返した次の行の枠と重ならないようにする。余白はアイコン側（上・下・左）を同じ 2px、名前の右は 0.5em */
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    vertical-align: baseline;
    white-space: nowrap;
    box-sizing: border-box;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 6px;
    padding: 2px 0.5em 2px 2px;
    margin: 3px 0.15em;
    line-height: 2em;
    text-indent: 0;
}
.ntg-act:not([data-icon]) {
    padding-left: 0.5em;
}

/* 2026-09-23 依頼主「闘獣練の記事とかのアクションのサイズ感がいいな。アイコンだけ大きく」
   → 闘獣練の記事と同じ、本文の2倍（16px の本文で 32px）。文字の大きさは変えない。
   バフ（縦長 48×64）も入るよう contain */
.ntg-act[data-icon]::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: 2em;
    height: 2em;
    border-radius: 4px;
    background: var(--ntg-act-icon, none) center / contain no-repeat;
}

/* 表の中では少し詰める（セルの高さを揃える） */
table .ntg-act {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* 用語カード（ntg-game-term）で包んだチップ: 用語の点線の下線を消し、枠の色で押せることを示す（二重の飾りにしない） */
.ntg-game-term:has(> .ntg-act) {
    border-bottom: 0 !important;
    text-decoration: none !important;
}
.ntg-game-term > .ntg-act {
    cursor: pointer;
    border-color: rgba(194, 154, 43, 0.6);
}
.ntg-game-term > .ntg-act:hover,
.ntg-game-term[aria-expanded="true"] > .ntg-act {
    border-color: rgba(194, 154, 43, 1);
    background: rgba(194, 154, 43, 0.08);
}