/**
 * Nettoge Core - Skill Tree（ゲームのスキルツリーの図）
 * 2026-09-24 依頼主「スキルアイコンを組み合わせて作ろう。取ったスキルは色が反転するからそれも再現する」
 * 「文字がちょっと赤くて見づらい」「ライトテーマ・ダークテーマで切り替え可能に」「ARC Raiders とうちのサイトのロゴをいれて。もっと見やすく」。
 *
 * HTML はビルダー（ARC Raiders/_tools/skill_tree_img.py の tree_html）が書く。図の中の座標は幅 600 の設計図の単位（--u）で、
 * 図の幅に比例して縮む（コンテナクエリの cqw）。線は同じ単位の SVG。
 *
 * 色の決まり:
 *   - 文字（スキル名・段階・関門・合計）はテーマの本文色（--ntg2-text / --ntg2-sub）。系統の色は使わない
 *   - 系統の色（--c）はノードの塗り・輪・線だけ。ライトとダークで light-dark() で替える（ダークは html に color-scheme: dark）
 *   - ノードの状態（ゲームの画面に合わせる）
 *       is-max  最大まで取った: 系統の色で塗り、アイコンは紺（色の反転）
 *       is-part 途中まで: 地に系統の色の太い輪、アイコンは系統の色
 *       is-open 次に取れる: 地に系統の色の細い輪、アイコンは薄い本文色
 *       is-lock まだ取れない: 灰色の輪と灰色のアイコン。関門のノードには錠
 */
.ntg-stree {
    --st-ink: #141a2e;                                   /* 塗ったノードの上のアイコン（ゲームの紺） */
    --st-text: var(--ntg2-text, #1a1714);
    --st-sub: var(--ntg2-sub, #5f5a55);
    --st-muted: var(--ntg2-muted, #8a847d);
    --st-card: var(--ntg2-paper, #f6f5f3);
    --st-node: var(--ntg2-surface, #ffffff);
    --st-lock: var(--ntg2-paper-2, #edeae6);
    --st-line: var(--ntg2-line, #e3e0dc);
    --st-line-2: var(--ntg2-line-2, #d3cec7);
    --c: #12994b;
    margin: 1.8em 0;
    padding: 14px 0 12px;
    border: 1px solid var(--st-line);
    border-radius: var(--ntg2-radius, 6px);
    background: var(--st-card);
    color: var(--st-text);
    font-size: 15px;
    line-height: 1.5;
}
.ntg-stree.t-cond { --c: #12994b; --c: light-dark(#12994b, #34e889); }
.ntg-stree.t-mob  { --c: #c99700; --c: light-dark(#c99700, #fcde2a); }
.ntg-stree.t-surv { --c: #d41f26; --c: light-dark(#d41f26, #f5484b); }
/* 塗りと太い線は系統の色を地の色と混ぜて淡くする（2026-09-26 依頼主「色もちょっと濃すぎる」）。輪・細い線・文字は元の色のまま */
.ntg-stree { --cs: var(--c); }
@supports (color: color-mix(in srgb, red 50%, white)) {
    .ntg-stree { --cs: color-mix(in srgb, var(--c) 68%, var(--st-node)); }
}
.ntg-stree *, .ntg-stree *::before, .ntg-stree *::after { box-sizing: border-box; }
/* 本文の画像の決まり（#body_wrap .post_content img の幅・高さ・余白）を受けない。エディタには #body_wrap が無いので両方書く */
.ntg-stree img, #body_wrap .ntg-stree img { display: inline-block; margin: 0; max-width: none; box-shadow: none; border: 0; border-radius: 0; }

/* 1 つのビルドの調整・移動性・サバイバルの 3 本は、HTML の中で連続した .ntg-stree として並ぶ（wp:html を 3 つ続けて出力。
   skill_tree_img.py）。縦に 3 本積むと 1 ビルドだけで画面何枚分にもなり「でかすぎる、邪魔」になっていた（2026-09-26 依頼主）。
   図の中身は幅に比例して縮む作り（cqw の --u）なので、そのまま横に並べても崩れない。JS（stree.js の groupRows）が
   連続する .ntg-stree を div.ntg-stree__row で包む。単独の 1 本（最初の 11pt の図など）は今まで通り 1 列のまま
   コンテナクエリで「3 列」か「1 列縦積み」の 2 状態だけにする（2026-09-26 依頼主「幅により３カラムに正常にならない場合がある」
   「３カラムか、モバイルか、にして」）。flex-wrap は幅次第で 2 列など中間状態も作ってしまうため使わない。
   親（記事本文の幅・サイドバーの有無）に左右されず、この行自体の実際の幅だけで切り替わる */
.ntg-stree__row {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    margin-block: 1.8em;
}
.ntg-stree__row > .ntg-stree {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
}
.ntg-stree__row > .ntg-stree + .ntg-stree {
    margin-top: 1.8em;
}
@container (min-width: 620px) {
    .ntg-stree__row > .ntg-stree {
        flex: 1 1 0;
    }
    .ntg-stree__row > .ntg-stree + .ntg-stree {
        margin-top: 0;
    }
}

/* ---- 頭（系統の名前と、どのビルドか） ---- */
.ntg-stree__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
    margin: 0 14px 6px; padding: 0 0 8px; border-bottom: 1px solid var(--st-line);
}
.ntg-stree__name { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.ntg-stree__name::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.ntg-stree__en { font-size: 13px; color: var(--st-sub); }
.ntg-stree__build { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--st-text); }

/* ---- 図（幅 600 × 高さ 1350 の設計図） ---- */
.ntg-stree__map {
    container-type: inline-size;
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 600 / 1350;
}
.ntg-stree__map > * { --u: calc(100cqw / 600); }
.ntg-stree__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ntg-stree__lines path { fill: none; stroke-linecap: round; }
.ntg-stree__lines .l-off { stroke: var(--st-line-2); stroke-width: 3; }
.ntg-stree__lines .l-open { stroke: var(--c); stroke-width: 3; }
.ntg-stree__lines .l-on { stroke: var(--cs); stroke-width: 6; }

/* 関門の帯: 点線と左の札 */
.ntg-stree__band { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--st-line-2); }
.ntg-stree__band.is-on { border-top-color: var(--c); }
.ntg-stree__band span {
    position: absolute; left: calc(4 * var(--u)); top: min(-8px, calc(-16 * var(--u)));
    height: max(16px, calc(32 * var(--u))); padding: 0 max(6px, calc(12 * var(--u)));
    display: inline-flex; align-items: center; white-space: nowrap;
    border: 2px solid var(--st-line-2); border-radius: max(8px, calc(16 * var(--u)));
    background: var(--st-card); color: var(--st-sub);
    font-size: max(11px, calc(20 * var(--u))); font-weight: 700; line-height: 1;
}
.ntg-stree__band.is-on span { border-color: var(--c); color: var(--st-text); }

/* 系統の合計（ゲームと同じく下のひし形の真ん中） */
.ntg-stree__sum { position: absolute; width: calc(200 * var(--u)); margin-left: calc(-100 * var(--u)); text-align: center; transform: translateY(-50%); }
.ntg-stree__sum b { display: block; font-size: max(12px, calc(24 * var(--u))); font-weight: 700; line-height: 1.3; color: var(--st-sub); }
.ntg-stree__sum strong { display: block; font-size: max(22px, calc(52 * var(--u))); font-weight: 800; line-height: 1.1; color: var(--st-text); }
.ntg-stree__sum strong::after { content: ""; display: block; width: calc(64 * var(--u)); height: calc(6 * var(--u)); margin: calc(6 * var(--u)) auto 0; border-radius: 3px; background: var(--c); }

/* ---- ノード ---- */
.ntg-stree__n { position: absolute; width: 0; height: 0; --d: calc(68 * var(--u)); }
.ntg-stree__n.is-big { --d: calc(88 * var(--u)); }
.ntg-stree__c {
    position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2);
    width: var(--d); height: var(--d); border-radius: 50%;
    background: var(--st-node); border: calc(3 * var(--u)) solid var(--st-line-2);
}
.ntg-stree__c i {
    position: absolute; inset: 15%;
    background: var(--st-muted);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ntg-stree__n.is-max .ntg-stree__c { background: var(--cs); border-color: var(--cs); }
.ntg-stree__n.is-max .ntg-stree__c i { background: var(--st-ink); }
.ntg-stree__n.is-part .ntg-stree__c { border: calc(6 * var(--u)) solid var(--c); }
.ntg-stree__n.is-part .ntg-stree__c i { background: var(--c); }
.ntg-stree__n.is-open .ntg-stree__c { border-color: var(--c); }
.ntg-stree__n.is-open .ntg-stree__c i { background: var(--st-sub); }
.ntg-stree__n.is-lock .ntg-stree__c { background: var(--st-lock); }

/* 段階の札（ゲームは角丸の小さな札。最大で塗り） */
.ntg-stree__lv {
    position: absolute; left: calc(-30 * var(--u)); top: calc(var(--d) / 2 - 16 * var(--u));
    width: max(34px, calc(60 * var(--u))); height: max(16px, calc(28 * var(--u)));
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--st-line-2); border-radius: max(8px, calc(14 * var(--u)));
    background: var(--st-node); color: var(--st-sub);
    font-size: max(11px, calc(19 * var(--u))); font-weight: 700; line-height: 1; letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}
.ntg-stree__n.is-part .ntg-stree__lv { border-color: var(--c); color: var(--st-text); }
.ntg-stree__n.is-max .ntg-stree__lv { border-color: var(--cs); background: var(--cs); color: var(--st-ink); }

/* スキル名: ノードの下（線は名前の下端までで止めてあるので、文字の上を通らない）。根だけ右 */
.ntg-stree__nm {
    position: absolute; left: calc(-100 * var(--u)); width: calc(200 * var(--u));
    top: calc(var(--d) / 2 + 16 * var(--u));
    text-align: center; white-space: nowrap;
    font-size: max(12px, calc(24 * var(--u))); font-weight: 700; line-height: max(15px, calc(29 * var(--u)));
    color: var(--st-sub);
}
.ntg-stree__n.is-max .ntg-stree__nm, .ntg-stree__n.is-part .ntg-stree__nm { color: var(--st-text); }
.ntg-stree__n.is-side .ntg-stree__nm { left: calc(var(--d) / 2 + 14 * var(--u)); top: 0; width: auto; transform: translateY(-50%); text-align: left; }

/* 錠（取れない関門） */
.ntg-stree__lock {
    position: absolute; left: calc(var(--d) * -0.5); top: calc(var(--d) * 0.12);
    width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%;
    background: var(--st-muted);
}
.ntg-stree__lock::before {
    content: ""; position: absolute; left: 32%; top: 16%; width: 36%; height: 36%;
    border: calc(3 * var(--u)) solid var(--st-lock); border-bottom: 0; border-radius: 50% 50% 0 0;
}
.ntg-stree__lock::after {
    content: ""; position: absolute; left: 26%; top: 45%; width: 48%; height: 36%;
    border-radius: 2px; background: var(--st-lock);
}

/* 死にスキル（最大まで上げても結果がほぼ変わらない）: 丸の右上に小さく 💀（2026-09-25 依頼主「死にスキルにはドクロつけといて小さく」）。
   絵文字そのものの色は端末のフォント任せ（黒に近い骨色で出る環境がある）なので、地の色を選ばず視認できるよう
   白い丸の座布団を敷く（2026-09-26 依頼主「黒アイコンで視認性わるいから色調整」） */
.ntg-stree__dead {
    position: absolute; left: calc(var(--d) * 0.2); top: calc(var(--d) * -0.66);
    width: max(15px, calc(26 * var(--u))); height: max(15px, calc(26 * var(--u)));
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--st-line-2);
    font-size: max(11px, calc(18 * var(--u))); line-height: 1; pointer-events: none;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ---- 下（凡例とロゴ） ---- */
.ntg-stree__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin: 8px 14px 0; padding-top: 10px; border-top: 1px solid var(--st-line);
    font-size: 12.5px; color: var(--st-sub);
}
.ntg-stree__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ntg-stree__legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ntg-stree__legend i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--st-line-2); background: var(--st-node); }
.ntg-stree__legend .is-max i { background: var(--cs); border-color: var(--cs); }
.ntg-stree__legend .is-part i { border: 4px solid var(--c); }
.ntg-stree__legend .is-open i { border-color: var(--c); }
.ntg-stree__legend .is-lock i { background: var(--st-lock); }
.ntg-stree__legend .is-dead b { font-weight: 400; font-size: 13px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
/* ゲームロゴ・サイトロゴは出さない（2026-09-26 依頼主「ゲームロゴとサイトロゴ、いらないかも」）。HTML 自体は
   ビルダー（skill_tree_img.py）が今まで通り書くので、無くすのはここだけで足りる */
.ntg-stree__logos { display: none; }

/* ---- 押して振れる図（.is-play。assets/js/stree.js。2026-09-25 依頼主「押して振れるように」） ---- */
/* 錠は関門のノードに常に置いてあり、「まだ取れない」のときだけ出す */
.ntg-stree.is-play .ntg-stree__n:not(.is-lock) .ntg-stree__lock { display: none; }
.ntg-stree.is-play .ntg-stree__n[role="button"] {
    cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; outline: none;
}
/* 押せる範囲: 丸と名前（ノードの div は幅 0 なので、中の丸・札・名前が当たり判定になる） */
.ntg-stree.is-play .ntg-stree__c { transition: transform .12s ease, background-color .15s ease, border-color .15s ease; }
.ntg-stree.is-play .ntg-stree__n[role="button"]:hover .ntg-stree__c { transform: scale(1.06); }
.ntg-stree.is-play .ntg-stree__n[role="button"]:active .ntg-stree__c { transform: scale(.94); }
.ntg-stree.is-play .ntg-stree__n[role="button"]:focus-visible .ntg-stree__c { box-shadow: 0 0 0 calc(4 * var(--u)) var(--ntg2-bg, #fff), 0 0 0 calc(7 * var(--u)) var(--c); }
.ntg-stree.is-play .ntg-stree__lines path { transition: stroke-width .15s ease; }
/* ロック中（既定）: ノードを pointer-events:none にし、click・右クリック・長押しがそもそも発火しないようにする
   （2026-09-26 依頼主「初期ではロックしておこう　うっかり触ったら振っちゃうし」）。アイコンの上にだけ重ねた
   .ntg-stree__term-trigger を pointer-events:auto に戻し、押すとその場でスキルの用語カード（サイト共通の
   .ntg-game-term）が出るようにする（依頼主「ロック中にアイコンおすと用語カードでるようにしたい」） */
.ntg-stree.is-locked .ntg-stree__n { pointer-events: none; }
.ntg-stree__term-trigger { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.ntg-stree.is-locked .ntg-stree__term-trigger { pointer-events: auto; cursor: help; }
.ntg-stree__lockbtn { font-weight: 800; }
.ntg-stree.is-locked .ntg-stree__lockbtn { border-color: var(--c); color: var(--c); }
/* 振れない・戻せないときに小さく揺らす */
.ntg-stree__n.is-no .ntg-stree__c { animation: ntg-stree-no .3s ease; }
@keyframes ntg-stree-no { 20%, 60% { translate: calc(-5 * var(--u)) 0; } 40%, 80% { translate: calc(5 * var(--u)) 0; } }
@media (prefers-reduced-motion: reduce) {
    .ntg-stree.is-play .ntg-stree__c, .ntg-stree.is-play .ntg-stree__lines path { transition: none; }
    .ntg-stree__n.is-no .ntg-stree__c { animation: none; }
}
/* 図の下の操作欄（JS が作る） */
.ntg-stree__ctl {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 10px 14px 0; font-size: 13px; color: var(--st-sub);
}
.ntg-stree__hint { flex: 1 1 100%; }
.ntg-stree__msg { flex: 1 1 auto; min-height: 1.5em; color: var(--st-text); font-weight: 700; }
.ntg-stree__btn {
    font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
    padding: 6px 14px; border: 1px solid var(--st-line-2); border-radius: 999px;
    background: var(--st-node); color: var(--st-text); cursor: pointer;
}
.ntg-stree__btn:hover:not(:disabled) { border-color: var(--c); }
.ntg-stree__btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.ntg-stree__btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 480px) {
    .ntg-stree { padding-top: 12px; }
    .ntg-stree__ctl { margin: 8px 12px 0; }
    .ntg-stree__head { margin: 0 12px 4px; }
    .ntg-stree__name { font-size: 18px; }
    .ntg-stree__foot { margin: 6px 12px 0; }
}

/* スマホ専用レイアウト: 図・操作欄・凡例はたたんでおき、頭（系統名・ビルド内訳）だけ最初から見せる。
   JS（stree.js の initCollapse）が幅 640px 以下のときだけ付ける「図を見る」ボタンで開閉する
   （2026-09-26 依頼主「スマホだとやはりでかすぎる　スマホ専用のレイアウトが必要」。3 本並ぶ図でも 1 本の縦長の図でも、
   スマホでは開くまで場所を取らない）。JS が動かないときはボタンが付かず、今まで通り開いたまま出る */
.ntg-stree__toggle {
    display: none;
    width: calc(100% - 28px); margin: 4px 14px 0; padding: 9px 12px;
    border: 1px solid var(--st-line-2); border-radius: var(--ntg2-radius-sm, 4px);
    background: var(--st-lock); color: var(--st-text);
    font: inherit; font-size: 13px; font-weight: 700; text-align: center; cursor: pointer;
}
.ntg-stree__toggle:hover { border-color: var(--c); }
.ntg-stree__toggle:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.ntg-stree[data-st-collapse-ready] .ntg-stree__toggle { display: block; }
.ntg-stree.is-collapsed .ntg-stree__map,
.ntg-stree.is-collapsed .ntg-stree__ctl,
.ntg-stree.is-collapsed .ntg-stree__foot {
    display: none;
}
.ntg-stree.is-collapsed { padding-bottom: 12px; }

/* ---- シミュレータ（div.ntg-sim。assets/js/sim.js。2026-09-26 依頼主「シミュレータ記事新設」「スマホは案A」「PC はそれで」） ----
   PC: 左に 3 系統を横に並べ、右の欄（選んだスキル・おすすめビルド・系統ごとの合計・取ったスキル）は画面に止める。
   スマホ（959px 以下）: 系統をタブで切り替えて 1 系統を幅いっぱいに。右の欄は display:contents にしてタブの下（選んだスキル）と
   図の下（ほか）へ並べ替える。帯と下の帯はテーマのアプリ型レイアウト（app-layout.php / app.css）が持つ */
.ntg-sim {
    --sim-top: calc(var(--ntg-app-top, 0px) + 68px);
    display: grid;
    /* 右の欄は細く（2026-09-26 依頼主「右をつめてもっと見やすくして」）。幅は図に回す */
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "bar bar" "trees side";
    gap: 12px 16px;
    align-items: start;
    margin: 0 0 2em;
    color: var(--ntg2-text);
}
.ntg-sim__bar {
    grid-area: bar;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 8px 12px; border: 1px solid var(--ntg2-line); border-radius: var(--ntg2-radius);
    background: var(--ntg2-surface);
}
.ntg-sim__trees {
    grid-area: trees;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#body_wrap .post_content .ntg-sim__trees > .ntg-stree { margin: 0; }
.ntg-sim__side {
    grid-area: side;
    position: sticky;
    top: var(--sim-top);
    display: flex; flex-direction: column; gap: 12px;
}
/* 右の欄の中だけのスクロールは作らない（2026-09-26 依頼主「スクロール吸収して」）。長くなる「取ったスキル」を開いている間は
   欄を画面に止めず、ページのスクロールで読む */
.ntg-sim__side:has( > .ntg-sim__takensec[open] ) { position: static; }
.ntg-sim__takensec > summary { margin: 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ntg-sim__takensec > summary::-webkit-details-marker { display: none; }
.ntg-sim__takensec > summary::after { content: "開く"; font-size: 12px; font-weight: 700; color: var(--ntg2-accent); }
.ntg-sim__takensec[open] > summary { margin-bottom: 8px; }
.ntg-sim__takensec[open] > summary::after { content: "閉じる"; }
.ntg-sim__tabs { display: none; }
/* 窓が狭い PC（1279px 以下）: 右の欄をさらに細くし、図の間と図の中の左右の余白も詰める */
/* 窓が狭い PC（960〜1279px）: 右の欄を置くと図 1 本が 220px 前後になり名前が詰まる（2026-09-26 依頼主「まだちょっと見づらい」）。
   右の欄をほどき（display:contents）、選んだスキルは図の上に横長で、おすすめビルド・系統ごとの合計・取ったスキルは図の下に 3 列で並べ、
   図は幅いっぱいに使う */
@media (min-width: 960px) and (max-width: 1279px) {
    .ntg-sim { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; }
    .ntg-sim__bar { grid-area: auto; grid-column: 1 / -1; grid-row: 1; }
    .ntg-sim__side { display: contents; }
    .ntg-sim__pick { grid-column: 1 / -1; grid-row: 2; }
    .ntg-sim__trees { grid-area: auto; grid-column: 1 / -1; grid-row: 3; }
    .ntg-sim__sec { grid-row: 4; }
}

/* 帯の中身（残り・持ち点・共有・全部外す） */
.ntg-sim__left { font-size: 14px; font-weight: 700; white-space: nowrap; }
.ntg-sim__left strong { font-size: 20px; font-variant-numeric: tabular-nums; margin: 0 2px; }
.ntg-sim__left.is-over strong { color: var(--ntg2-danger); }
.ntg-sim__budget { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ntg2-sub); }
.ntg-sim__budget select,
.ntg-sim__builds {
    font: inherit; font-size: 13px; color: var(--ntg2-text);
    min-height: 36px; padding: 0 8px;
    background: var(--ntg2-bg); border: 1px solid var(--ntg2-line-2); border-radius: var(--ntg2-radius-sm);
}
.ntg-sim__barbtns { display: inline-flex; gap: 8px; margin-left: auto; }
.ntg-sim__btn,
.ntg-sim__dockbtn {
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    min-height: 36px; padding: 0 14px;
    color: var(--ntg2-text); background: var(--ntg2-bg);
    border: 1px solid var(--ntg2-line-2); border-radius: 999px;
}
.ntg-sim__btn:hover, .ntg-sim__dockbtn:hover { border-color: var(--ntg2-accent); }
.ntg-sim__btn:focus-visible, .ntg-sim__dockbtn:focus-visible, .ntg-sim__tab:focus-visible { outline: 2px solid var(--ntg2-accent); outline-offset: 2px; }
/* 全部外す（リセット）は上の帯に常に出し、色を付けて目立たせる（2026-09-26 依頼主「リセットボタンを
   目立つ位置へ移動。スマホ版では見当たらないから実装」）。下の固定の帯は実機によってはブラウザ自身の
   バーと重なって届かないことがあるため、そちらだけに置かない */
.ntg-sim__btn--clear { color: var(--ntg2-danger); border-color: var(--ntg2-danger); background: var(--ntg2-bg); }
.ntg-sim__btn--clear:hover { background: var(--ntg2-danger); color: var(--ntg2-bg); }

/* 右の欄 */
.ntg-sim__pick,
.ntg-sim__sec {
    padding: 12px 14px;
    border: 1px solid var(--ntg2-line); border-radius: var(--ntg2-radius);
    background: var(--ntg2-surface);
}
.ntg-sim__pick-name { font-size: 15px; font-weight: 700; line-height: 1.4; }
#body_wrap .post_content .ntg-sim__pick-one { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ntg2-sub); }
.ntg-sim__pick-one:empty { display: none; }
.ntg-sim__morehost { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; }
#body_wrap .post_content .ntg-sim__msg { margin: 6px 0 0; min-height: 1.4em; font-size: 13px; font-weight: 700; color: var(--ntg2-text); }
.ntg-sim__h { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ntg2-sub); }
.ntg-sim__builds { width: 100%; }
#body_wrap .post_content .ntg-sim__sums,
#body_wrap .post_content .ntg-sim__taken ul { margin: 0; padding: 0; list-style: none; }
#body_wrap .post_content .ntg-sim__sums li {
    display: grid; grid-template-columns: 1fr auto; gap: 0 8px;
    margin: 0; padding: 6px 0 6px 10px; border-left: 3px solid var(--c, var(--ntg2-line-2));
    font-size: 13px;
}
#body_wrap .post_content .ntg-sim__sums li::before { content: none; }
#body_wrap .post_content .ntg-sim__sums li + li { margin-top: 4px; }
#body_wrap .post_content .ntg-sim__sums li.is-total { border-left-color: transparent; padding-left: 0; font-weight: 700; }
.ntg-sim__sum-n { font-weight: 700; }
.ntg-sim__sum-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.ntg-sim__sum-g { grid-column: 1 / -1; font-size: 12px; color: var(--ntg2-sub); }
.ntg-sim__taken-g + .ntg-sim__taken-g { margin-top: 10px; }
.ntg-sim__taken-h { font-size: 13px; font-weight: 700; padding-left: 8px; border-left: 3px solid var(--c, var(--ntg2-line-2)); }
#body_wrap .post_content .ntg-sim__taken li {
    display: flex; justify-content: space-between; gap: 8px;
    margin: 0; padding: 3px 0 3px 11px; font-size: 13px;
}
#body_wrap .post_content .ntg-sim__taken li::before { content: none; }
.ntg-sim__taken-v { font-variant-numeric: tabular-nums; color: var(--ntg2-sub); }
#body_wrap .post_content .ntg-sim__empty { margin: 0; font-size: 13px; color: var(--ntg2-sub); }

@media (max-width: 959px) {
    .ntg-sim {
        --sim-top: calc(var(--ntg-app-top, 0px) + 54px);
        display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    }
    .ntg-sim__bar { order: 0; }
    .ntg-sim__tabs {
        order: 1;
        position: sticky; top: var(--sim-top); z-index: 5;
        display: flex; gap: 6px;
        padding: 4px 0; background: var(--ntg2-bg);
    }
    .ntg-sim__tab {
        flex: 1 1 0; min-height: 40px; padding: 0 4px;
        font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
        color: var(--ntg2-sub); background: var(--ntg2-surface);
        border: 1px solid var(--ntg2-line-2); border-radius: var(--ntg2-radius-sm);
    }
    .ntg-sim__tab.is-on { color: var(--ntg2-text); border-color: var(--c); box-shadow: inset 0 -3px 0 var(--c); }
    .ntg-sim__side { display: contents; }
    .ntg-sim__pick { order: 2; padding: 10px 12px; }
    .ntg-sim__trees { order: 3; display: block; }
    .ntg-sim__sec { order: 4; }
    .ntg-sim .ntg-stree.is-tab-off { display: none; }
    /* 上の帯の共有は下の帯（アプリ型レイアウトの .ntg-app-dock）に同じ物があるので隠す。全部外す（リセット）は
       上の帯に残す（下の固定の帯だけだと実機で見えない・届かないことがあったため。依頼主 2026-09-26） */
    .ntg-app-bar .ntg-sim__btn--share { display: none; }
    .ntg-app-bar .ntg-sim__budget-l { display: none; }
    /* 全部外す（リセット）は残り pt・持ち点と横並びにせず、専用の行を幅いっぱいに取る
       （2026-09-26 依頼主「位置なおしておいて」。横並びだと窮屈で、幅によって隣との間が空きすぎて浮いて見えた） */
    .ntg-sim__barbtns { flex: 1 1 100%; margin: 6px 0 0; }
    .ntg-sim__btn--clear { display: block; width: 100%; text-align: center; min-height: 40px; }
    .ntg-sim__dockbtn { flex: 1 1 0; min-height: 44px; border-radius: var(--ntg2-radius-sm); }
}

/* ---- おすすめビルドの画像（figure.ntg-stree-img。skill_tree_img.figure_img_html。2026-09-26） ----
   明暗 2 枚の <img> はテーマの ntg2-logo-on-light / -on-dark で出し分ける。押すとシミュレーターがその形で開く */
#body_wrap .post_content .ntg-stree-img { margin: 1.8em auto; text-align: center; }
#body_wrap .post_content .ntg-stree-img.is-narrow { max-width: 488px; }
#body_wrap .post_content .ntg-stree-img img { width: 100%; height: auto; margin: 0; box-shadow: none; border-radius: var(--ntg2-radius); cursor: zoom-in; }
#body_wrap .post_content .ntg-stree-img figcaption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ntg2-sub); }

/* ---- スキルのアイコン（白の絵を mask で塗る。skill_tree_img.py css-glyphs が書く） ---- */
/* glyphs:begin */
.ntg-stree .ic-used-to-the-weight { -webkit-mask-image: url(../glyphs/used-to-the-weight.webp); mask-image: url(../glyphs/used-to-the-weight.webp); }
.ntg-stree .ic-blast-born { -webkit-mask-image: url(../glyphs/blast-born.webp); mask-image: url(../glyphs/blast-born.webp); }
.ntg-stree .ic-gentle-pressure { -webkit-mask-image: url(../glyphs/gentle-pressure.webp); mask-image: url(../glyphs/gentle-pressure.webp); }
.ntg-stree .ic-fight-or-flight { -webkit-mask-image: url(../glyphs/fight-or-flight.webp); mask-image: url(../glyphs/fight-or-flight.webp); }
.ntg-stree .ic-proficient-pryer { -webkit-mask-image: url(../glyphs/proficient-pryer.webp); mask-image: url(../glyphs/proficient-pryer.webp); }
.ntg-stree .ic-survivors-stamina { -webkit-mask-image: url(../glyphs/survivors-stamina.webp); mask-image: url(../glyphs/survivors-stamina.webp); }
.ntg-stree .ic-unburdened-roll { -webkit-mask-image: url(../glyphs/unburdened-roll.webp); mask-image: url(../glyphs/unburdened-roll.webp); }
.ntg-stree .ic-downed-but-determined { -webkit-mask-image: url(../glyphs/downed-but-determined.webp); mask-image: url(../glyphs/downed-but-determined.webp); }
.ntg-stree .ic-a-little-extra { -webkit-mask-image: url(../glyphs/a-little-extra.webp); mask-image: url(../glyphs/a-little-extra.webp); }
.ntg-stree .ic-effortless-swing { -webkit-mask-image: url(../glyphs/effortless-swing.webp); mask-image: url(../glyphs/effortless-swing.webp); }
.ntg-stree .ic-turtle-crawl { -webkit-mask-image: url(../glyphs/turtle-crawl.webp); mask-image: url(../glyphs/turtle-crawl.webp); }
.ntg-stree .ic-loaded-arms { -webkit-mask-image: url(../glyphs/loaded-arms.webp); mask-image: url(../glyphs/loaded-arms.webp); }
.ntg-stree .ic-sky-clearing-swing { -webkit-mask-image: url(../glyphs/sky-clearing-swing.webp); mask-image: url(../glyphs/sky-clearing-swing.webp); }
.ntg-stree .ic-back-on-your-feet { -webkit-mask-image: url(../glyphs/back-on-your-feet.webp); mask-image: url(../glyphs/back-on-your-feet.webp); }
.ntg-stree .ic-flyswatter { -webkit-mask-image: url(../glyphs/flyswatter.webp); mask-image: url(../glyphs/flyswatter.webp); }
.ntg-stree .ic-nimble-climber { -webkit-mask-image: url(../glyphs/nimble-climber.webp); mask-image: url(../glyphs/nimble-climber.webp); }
.ntg-stree .ic-marathon-runner { -webkit-mask-image: url(../glyphs/marathon-runner.webp); mask-image: url(../glyphs/marathon-runner.webp); }
.ntg-stree .ic-slip-and-slide { -webkit-mask-image: url(../glyphs/slip-and-slide.webp); mask-image: url(../glyphs/slip-and-slide.webp); }
.ntg-stree .ic-youthful-lungs { -webkit-mask-image: url(../glyphs/youthful-lungs.webp); mask-image: url(../glyphs/youthful-lungs.webp); }
.ntg-stree .ic-sturdy-ankles { -webkit-mask-image: url(../glyphs/sturdy-ankles.webp); mask-image: url(../glyphs/sturdy-ankles.webp); }
.ntg-stree .ic-carry-the-momentum { -webkit-mask-image: url(../glyphs/carry-the-momentum.webp); mask-image: url(../glyphs/carry-the-momentum.webp); }
.ntg-stree .ic-calming-stroll { -webkit-mask-image: url(../glyphs/calming-stroll.webp); mask-image: url(../glyphs/calming-stroll.webp); }
.ntg-stree .ic-effortless-roll { -webkit-mask-image: url(../glyphs/effortless-roll.webp); mask-image: url(../glyphs/effortless-roll.webp); }
.ntg-stree .ic-crawl-before-you-walk { -webkit-mask-image: url(../glyphs/crawl-before-you-walk.webp); mask-image: url(../glyphs/crawl-before-you-walk.webp); }
.ntg-stree .ic-off-the-wall { -webkit-mask-image: url(../glyphs/off-the-wall.webp); mask-image: url(../glyphs/off-the-wall.webp); }
.ntg-stree .ic-heroic-leap { -webkit-mask-image: url(../glyphs/heroic-leap.webp); mask-image: url(../glyphs/heroic-leap.webp); }
.ntg-stree .ic-vigorous-vaulter { -webkit-mask-image: url(../glyphs/vigorous-vaulter.webp); mask-image: url(../glyphs/vigorous-vaulter.webp); }
.ntg-stree .ic-ready-to-roll { -webkit-mask-image: url(../glyphs/ready-to-roll.webp); mask-image: url(../glyphs/ready-to-roll.webp); }
.ntg-stree .ic-vaults-on-vaults-on-vaults { -webkit-mask-image: url(../glyphs/vaults-on-vaults-on-vaults.webp); mask-image: url(../glyphs/vaults-on-vaults-on-vaults.webp); }
.ntg-stree .ic-vault-spring { -webkit-mask-image: url(../glyphs/vault-spring.webp); mask-image: url(../glyphs/vault-spring.webp); }
.ntg-stree .ic-agile-croucher { -webkit-mask-image: url(../glyphs/agile-croucher.webp); mask-image: url(../glyphs/agile-croucher.webp); }
.ntg-stree .ic-looters-instincts { -webkit-mask-image: url(../glyphs/looters-instincts.webp); mask-image: url(../glyphs/looters-instincts.webp); }
.ntg-stree .ic-revitalizing-squat { -webkit-mask-image: url(../glyphs/revitalizing-squat.webp); mask-image: url(../glyphs/revitalizing-squat.webp); }
.ntg-stree .ic-silent-scavenger { -webkit-mask-image: url(../glyphs/silent-scavenger.webp); mask-image: url(../glyphs/silent-scavenger.webp); }
.ntg-stree .ic-in-round-crafting { -webkit-mask-image: url(../glyphs/in-round-crafting.webp); mask-image: url(../glyphs/in-round-crafting.webp); }
.ntg-stree .ic-suffer-in-silence { -webkit-mask-image: url(../glyphs/suffer-in-silence.webp); mask-image: url(../glyphs/suffer-in-silence.webp); }
.ntg-stree .ic-good-as-new { -webkit-mask-image: url(../glyphs/good-as-new.webp); mask-image: url(../glyphs/good-as-new.webp); }
.ntg-stree .ic-broad-shoulders { -webkit-mask-image: url(../glyphs/broad-shoulders.webp); mask-image: url(../glyphs/broad-shoulders.webp); }
.ntg-stree .ic-traveling-tinkerer { -webkit-mask-image: url(../glyphs/traveling-tinkerer.webp); mask-image: url(../glyphs/traveling-tinkerer.webp); }
.ntg-stree .ic-stubborn-mule { -webkit-mask-image: url(../glyphs/stubborn-mule.webp); mask-image: url(../glyphs/stubborn-mule.webp); }
.ntg-stree .ic-looters-luck { -webkit-mask-image: url(../glyphs/looters-luck.webp); mask-image: url(../glyphs/looters-luck.webp); }
.ntg-stree .ic-one-raiders-scraps { -webkit-mask-image: url(../glyphs/one-raiders-scraps.webp); mask-image: url(../glyphs/one-raiders-scraps.webp); }
.ntg-stree .ic-three-deep-breaths { -webkit-mask-image: url(../glyphs/three-deep-breaths.webp); mask-image: url(../glyphs/three-deep-breaths.webp); }
.ntg-stree .ic-security-breach { -webkit-mask-image: url(../glyphs/security-breach.webp); mask-image: url(../glyphs/security-breach.webp); }
.ntg-stree .ic-minesweeper { -webkit-mask-image: url(../glyphs/minesweeper.webp); mask-image: url(../glyphs/minesweeper.webp); }
/* glyphs:end */