/* ===== 変数・基本 ===== */
:root {
  --bg: #071015;
  --line: #1e3943;
  --text: #e6f0ef;
  /* インク階調: 強→弱。すべて背景と同系の青緑にわずかに寄せる */
  --ink-strong: #c3d3d2;
  --ink-soft: #a9bcbe;
  --muted: #87a1a7;
  --faint: #6f8990;
  --cyan: #39e5d2;
  --amber: #f0aa4b;
  --red: #ff6b5e;
  --sans: "IBM Plex Sans JP", "Noto Sans JP", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body {
  margin: 0;
  background: radial-gradient(circle at 75% 10%, #12303a 0, transparent 28%), linear-gradient(145deg, #050b0f, #071219 55%, #050b0e);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}
::selection { background: #39e5d236 }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important }
  .knowledge-content { scroll-behavior: auto }
}
button { font-family: inherit }
/* IBM Plex Monoは600までしか読み込まないため、等幅の強調は600で統一し疑似ボールドを避ける */
.damage-card>strong, .probability strong, .intercept-readout>strong, .tackle-self-value strong,
.modifier-badge strong, .knowledge-cards strong, .panel-title b, .knowledge-section-title>b, .summary dd { font-weight: 600 }
input[type=number] { font-family: var(--mono) }
.shell { width: min(1440px, 94vw); margin: auto; padding: 38px 0 24px }

/* ===== ヘッダー ===== */
.hero { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 22px }
.eyebrow, .result-head { font-family: var(--mono); letter-spacing: .16em }
.eyebrow { font-size: 13px; color: var(--cyan); margin: 0 0 10px }
.hero h1 { font-size: clamp(25px, 3vw, 43px); line-height: .9; letter-spacing: .03em; margin: 0 }
.hero h1 span { font-size: .54em; color: var(--ink-soft); letter-spacing: .14em }
.hero-actions { display: flex; align-items: center; gap: 9px }
.language-control { display: flex; align-items: center; gap: 8px; margin-top: 0; color: var(--muted); font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em }
.language-control select { min-width: 112px; height: 38px; margin-top: 0; padding: 0 30px 0 10px }
.knowledge-open { height: 38px; border: 1px solid #32636a; background: #0b2025; color: var(--ink-strong); padding: 0 13px; font-size: 13px; letter-spacing: .08em; cursor: pointer }
.knowledge-open.tool-link { display: inline-flex; align-items: center; text-decoration: none }
.knowledge-open:hover, .knowledge-open:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none }
.knowledge-open span[aria-hidden] { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border: 1px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 12px; font-weight: 700 }

/* ===== レイアウト・パネル ===== */
.disclaimer { font-size: 13px; color: var(--muted); line-height: 1.55; margin: -12px 0 18px }

.workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(350px, .7fr); gap: 20px }
.workspace > * { min-width: 0 }
.inputs { display: grid; gap: 14px }
.inputs > * { min-width: 0 }
.panel, .results { background: linear-gradient(145deg, rgba(13, 29, 36, .97), rgba(8, 19, 24, .97)); border: 1px solid var(--line); box-shadow: 0 18px 60px #0005 }
.panel { padding: 18px 20px }
.panel-title { display: flex; gap: 12px; align-items: center; margin-bottom: 15px }
.panel-title b { color: var(--cyan); font-family: var(--mono); font-size: 14px }
.panel-title h2 { font-size: 17px; letter-spacing: .1em; margin: 0 }
.swap-units { margin-left: auto; padding: 6px 11px; border: 1px solid #32636a; background: #0b2025; color: var(--ink-strong); font-size: 12px; letter-spacing: .06em; cursor: pointer }
.swap-units:hover:not(:disabled), .swap-units:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none }
.swap-units:disabled { border-color: #2a3b41; color: var(--faint); cursor: not-allowed }
.swap-units i { font-style: normal; margin-right: 4px }
.grid { display: grid; gap: 12px; align-items: end }
.grid > * { min-width: 0 }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)) }

/* ===== フォーム ===== */
label { display: block; color: var(--muted); font-size: 13px; letter-spacing: .05em; margin-top: 11px }
select, input[type=search], input[type=number], input[type=text] { width: 100%; margin-top: 6px; background: #071218; border: 1px solid #25434e; color: var(--text); padding: 10px 11px; border-radius: 2px; outline: none; font-family: inherit; font-size: 15px }
select:focus, input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px #39e5d244 }
select:disabled, input[type=number]:disabled, input[type=number]:read-only, input[type=text]:read-only { opacity: 1; background: #1b2225; border-color: #4c595d; color: var(--faint); box-shadow: inset 4px 0 0 #657478; cursor: not-allowed }
input[type=text]:read-only { color: var(--ink-soft) }
.meta-line, .hint { font-size: 13px; color: var(--muted); margin: 9px 0 0; line-height: 1.55 }
.meta-line { color: var(--ink-strong); min-height: 20px }
.unit-picker-field { margin-top: 11px }
.form-field-label { display: block; color: var(--muted); font-size: 13px; letter-spacing: .05em }
.unit-native-select { display: none }
.unit-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 67px; margin-top: 6px; padding: 10px 12px; border: 1px solid #2c5661; border-left: 3px solid var(--cyan); border-radius: 2px; background: linear-gradient(135deg, #0a1c22, #071218); color: var(--text); text-align: left; cursor: pointer }
.unit-picker-trigger:hover, .unit-picker-trigger:focus-visible { border-color: var(--cyan); background: #0c242a; outline: none }
.unit-picker-trigger>span { min-width: 0 }
.unit-picker-trigger strong, .unit-picker-trigger small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.unit-picker-trigger strong { color: var(--text); font-size: 16px; letter-spacing: .03em }
.unit-id-suffix { margin-left: .7em; color: #60747b; font-family: var(--mono); font-size: .72em; font-weight: 400; letter-spacing: .02em; opacity: .78 }
.unit-picker-trigger small { margin-top: 3px; color: var(--faint); font-family: var(--mono); font-size: 11px }
.unit-picker-trigger>b { flex: 0 0 auto; padding: 4px 9px; border: 1px solid #37646b; color: var(--cyan); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em }
.checks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px }
.checks label { display: flex; align-items: center; gap: 7px }
.checks input { accent-color: var(--cyan) }
.checks label.disabled-control { opacity: .4; cursor: not-allowed }
.checks label.available-control { color: var(--ink-strong) }
.fixed-badge { display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1px solid #68767a; background: #30383b; color: #d4dcdd; font-size: 12px; letter-spacing: .08em; vertical-align: 1px }
.condition-badge { display: inline-block; margin-left: 3px; padding: 2px 6px; border: 1px solid #34545d; background: #10242a; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; white-space: nowrap }
.guaranteed-hit-badge { border-color: #a76f31; background: #332112; color: #ffd28b; font-weight: 700 }
.checks label.available-control .condition-badge { border-color: #7d6033; background: #2a2115; color: #f0b965 }
.reaction-checks { margin-top: 14px; padding: 10px 12px; border: 1px solid #294b52; background: #0a191e }
.reaction-checks label { margin-top: 0; color: var(--ink-soft) }
.reaction-checks label.available-control { color: var(--cyan) }
.intercept-options { margin: 12px 0 0; padding: 9px 11px; border: 1px solid #294b52; background: #0a191e }
.intercept-options label { margin-top: 0; color: var(--ink-soft) }
.intercept-options label.available-control { color: var(--cyan) }

/* ===== 迎撃パネル ===== */
.intercept-panel { margin-top: 16px; padding: 14px; border: 1px solid #2a5960; background: linear-gradient(135deg, #0b2226, #0a171c); transition: opacity .15s, border-color .15s }
.intercept-panel.is-unavailable { border-color: #2a3d43; background: #10191d }
.intercept-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.intercept-heading div>span { display: block; color: #5d9698; font-family: var(--mono); font-size: 11px; letter-spacing: .16em }
.intercept-heading div>strong { display: block; margin-top: 2px; color: var(--ink-strong); font-size: 14px; letter-spacing: .08em }
.intercept-heading>b { padding: 4px 8px; border: 1px solid #3c6c70; background: #102d30; color: var(--cyan); font-family: var(--mono); font-size: 12px; font-weight: 500 }
.intercept-panel.is-unavailable .intercept-heading>b { border-color: #46545a; background: #202a2e; color: var(--muted) }
.intercept-readout { display: grid; grid-template-columns: auto auto; align-items: end; gap: 2px 12px; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--cyan); background: #071419 }
.intercept-readout>span { color: var(--muted); font-size: 12px }
.intercept-readout>strong { grid-row: 1 / span 2; grid-column: 2; font-family: var(--mono); font-size: 27px; line-height: 1; color: var(--cyan) }
.intercept-readout>small { color: var(--faint); font-family: var(--mono); font-size: 12px; line-height: 1.45 }
.intercept-panel.is-unavailable .intercept-readout { border-left-color: var(--faint) }
.intercept-panel.is-unavailable .intercept-readout>strong { color: var(--muted) }

/* ===== 結果カラム ===== */
.results { position: sticky; top: 16px; align-self: start; padding: 21px }
.result-head { color: var(--cyan); font-size: 12px; display: flex; align-items: center; gap: 12px }
.result-head i { height: 1px; background: var(--line); flex: 1 }
.damage-card { padding: 27px 0; border-bottom: 1px solid var(--line) }
.probability p, .damage-card p { font-size: 14px; color: var(--muted); margin: 0 }
.damage-card>strong { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 58px; line-height: 1; color: #ffc066 }
.damage-card>span { display: inline-block; margin-left: 12px; font-size: 19px; font-weight: 700; color: var(--amber); vertical-align: 5px; letter-spacing: .02em }
.battle-modifier { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; width: fit-content; margin-top: 14px; padding: 8px 12px; border-left: 3px solid var(--faint); background: #0a171c }
.battle-modifier>span { color: var(--muted); font-size: 11px; letter-spacing: .08em }
.battle-modifier>b { grid-row: 1 / span 2; grid-column: 1; min-width: 58px; font-size: 22px; line-height: 1; letter-spacing: -.15em; text-align: center }
.battle-modifier>small { color: var(--faint); font-size: 11px; line-height: 1.35 }
.battle-modifier.is-positive { border-left-color: var(--cyan); background: #0c2425 }
.battle-modifier.is-positive>b { color: var(--cyan) }
.battle-modifier.is-negative { border-left-color: var(--red); background: #251718 }
.battle-modifier.is-negative>b { color: #ff998e }
.battle-modifier.is-neutral>b { color: var(--muted) }
.range { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--mono) }
.range-track { position: relative; flex: 1 }
.range-track > i { display: block; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--amber)) }
.range-segments { display: flex; gap: 2px; height: 16px }
.range-seg { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 10px; letter-spacing: .02em; color: #06181d }
.range-seg.is-narrow span { display: none }
.range-mean { position: absolute; top: -11px; transform: translateX(-50%); font-size: 8px; line-height: 1; color: var(--ink-strong) }
.range-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 3px }
.probability { padding: 32px 0 26px; border-bottom: 1px solid var(--line) }
.probability strong { display: block; font-family: var(--mono); font-size: 42px; line-height: 1.1; margin: 8px 0 }
.probability small { font-size: .45em; color: var(--cyan) }
.bar { height: 5px; background: #182c33; margin: 13px 0 9px }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--amber)); box-shadow: 0 0 9px #39e5d280; transition: width .2s }
.probability>span { font-size: 14px; color: var(--ink-strong) }
.summary { margin: 0; padding: 16px 0 }
.summary div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #172b33 }
.summary dt { font-size: 13px; color: var(--muted) }
.summary dd { font-family: var(--mono); font-size: 14px; margin: 0; text-align: right }
.formula-note { font-family: var(--mono); font-size: 13px; color: var(--faint); line-height: 1.6; margin: 2px 0 0 }
.formula-note.warning { color: var(--red) }
.results-details { border-bottom: 1px solid var(--line) }
.results-details summary { cursor: pointer; list-style: none; padding: 13px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); user-select: none }
.results-details summary::-webkit-details-marker { display: none }
.results-details summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--cyan); transition: transform .15s }
.results-details[open] summary::before { transform: rotate(90deg) }
.results-details summary:hover, .results-details summary:focus-visible { color: var(--cyan); outline: none }
.results-details[open] summary { border-bottom: 1px solid #172b33 }
.results-details>*:last-child { margin-bottom: 14px }
.formula-box { margin-top: 14px; border: 1px solid #172b33; background: #0a161c; padding: 10px 12px }
.formula-box-title { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--faint); margin: 0 0 7px }
.formula-rows { display: grid; grid-template-columns: max-content 1fr max-content; gap: 3px 9px; font-size: 13px; color: var(--muted); line-height: 1.5; font-variant-numeric: tabular-nums }
.formula-rows>div { display: contents }
.formula-rows i { font-style: normal; font-family: var(--mono); text-align: center; color: var(--faint) }
.formula-rows b { font-family: var(--mono); font-weight: 600; text-align: right; color: var(--ink-strong); white-space: nowrap }
.formula-rows .is-result span { color: var(--ink-strong) }
.formula-rows .is-result b, .formula-rows .is-result i { color: var(--cyan) }

/* ===== 補正バッジ ===== */
.modifier-block { padding: 17px 0; border-bottom: 1px solid var(--line) }
.modifier-title { margin: 0 0 9px; color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .14em }
.modifier-badges { display: flex; gap: 8px }
.modifier-badge { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid #29434b; background: #0a171c }
.modifier-badge span { display: block; min-height: 36px; color: var(--muted); font-size: 13px; line-height: 1.35 }
.modifier-badge strong { display: block; margin-top: 3px; font-family: var(--mono); font-size: 21px; line-height: 1 }
.modifier-badge.is-positive { border-color: #24776f; background: #0c2425 }
.modifier-badge.is-positive strong { color: var(--cyan) }
.modifier-badge.is-negative { border-color: #8a493f; background: #251718 }
.modifier-badge.is-negative strong { color: var(--red) }
.modifier-badge.is-neutral strong { color: var(--muted) }

/* ===== 体当たり反動カード ===== */
.tackle-self-card { padding: 15px 14px; border-bottom: 1px solid #663b35; background: linear-gradient(135deg, #281716, #121719) }
.tackle-self-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.tackle-self-head span { color: #b96a61; font-family: var(--mono); font-size: 11px; letter-spacing: .14em }
.tackle-self-head b { color: #ff998e; font-size: 12px; letter-spacing: .05em }
.tackle-self-value { display: flex; align-items: baseline; gap: 10px; margin-top: 8px }
.tackle-self-value strong { color: var(--red); font-family: var(--mono); font-size: 34px; line-height: 1 }
.tackle-self-value span { color: #e2a39d; font-size: 13px; font-weight: 700 }
.tackle-self-card>p { margin: 8px 0 0; color: #9b6f6b; font-family: var(--mono); font-size: 12px; line-height: 1.55 }

/* ===== ユニット選択ダイアログ ===== */
.unit-picker-dialog { width: min(980px, 94vw); height: min(820px, 90vh); max-width: none; max-height: none; padding: 0; border: 1px solid #31505a; background: #081319; color: var(--text); box-shadow: 0 28px 100px #000c }
.unit-picker-dialog::backdrop { background: #02080ce6; backdrop-filter: blur(5px) }
.unit-picker-shell { display: flex; flex-direction: column; height: 100%; background: radial-gradient(circle at 90% 0, #12333b 0, transparent 30%), linear-gradient(145deg, #0b1a20, #071116) }
.unit-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--line) }
.unit-picker-head p { margin: 0 0 3px; color: var(--cyan); font-family: var(--mono); font-size: 11px; letter-spacing: .2em }
.unit-picker-head h2 { display: inline; margin: 0; font-size: 20px; letter-spacing: .08em }
.unit-picker-head div>span { margin-left: 10px; padding: 3px 7px; border: 1px solid #3d676c; color: var(--cyan); font-family: var(--mono); font-size: 11px }
.unit-picker-head>button { width: 38px; height: 38px; border: 1px solid #38535b; background: #0b171c; color: var(--ink-soft); font-size: 24px; line-height: 1; cursor: pointer }
.unit-picker-head>button:hover, .unit-picker-head>button:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none }
.unit-picker-tools { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1.5fr); gap: 12px 18px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: #08151a }
.unit-picker-tools>label { margin: 0 }
.unit-picker-tools input { height: 44px }
.unit-filter-toggle { display: none }
.unit-filter-groups { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 12px 9px; min-width: 0 }
.unit-filter-group { display: contents }
.unit-filter-group>span { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; white-space: nowrap }
.unit-filter-group>div { display: flex; min-width: 0; gap: 6px; flex-wrap: nowrap; overflow-x: auto }
.unit-filter-group button { padding: 6px 10px; border: 1px solid #304c55; background: #0a171c; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer }
.unit-filter-group button:hover { border-color: #4b7a80; color: var(--ink-strong) }
.unit-filter-group button[aria-pressed="true"] { border-color: var(--cyan); background: #0b292a; color: var(--cyan) }
.unit-picker-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px; border-bottom: 1px solid #172f38; color: var(--faint); font-size: 12px }
.unit-picker-result-head>span { color: var(--cyan); font-family: var(--mono) }
.unit-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; flex: 1; min-height: 0; padding: 12px 16px 20px; overflow-y: auto }
.unit-picker-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 11px 12px; border: 1px solid #263f47; border-left: 3px solid #31525b; background: #09161b; color: var(--text); text-align: left; cursor: pointer }
.unit-picker-item:hover, .unit-picker-item:focus-visible { border-color: #4c7b80; background: #0c2025; outline: none }
.unit-picker-item[aria-selected="true"] { border-color: var(--cyan); border-left-color: var(--cyan); background: #0b2728; box-shadow: inset 0 0 0 1px #39e5d229 }
.unit-picker-item>strong { max-width: 100%; overflow: hidden; color: var(--ink-strong); font-size: 14px; text-overflow: ellipsis; white-space: nowrap }
.unit-picker-item>small { margin-top: 7px; color: var(--faint); font-family: var(--mono); font-size: 11px }
.unit-picker-item-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px }
.unit-picker-badge { padding: 2px 6px; border: 1px solid #3a5259; background: #111d21; color: var(--muted); font-style: normal; font-size: 10px; letter-spacing: .04em }
.unit-picker-badge.faction-human { border-color: #376e7c; background: #0b222b; color: #77d9ed }
.unit-picker-badge.faction-bydo { border-color: #704953; background: #27171d; color: #ef8da0 }
.unit-picker-badge.faction-other { border-color: #6c643a; background: #252213; color: #decf72 }
.unit-picker-empty { margin: auto; padding: 30px; color: var(--faint); text-align: center }

/* ===== 解析知見ダイアログ ===== */
.knowledge-dialog { width: min(1180px, 94vw); height: min(860px, 92vh); max-width: none; max-height: none; padding: 0; border: 1px solid #31505a; background: #081319; color: var(--text); box-shadow: 0 28px 100px #000c }
.knowledge-dialog::backdrop { background: #02080cdb; backdrop-filter: blur(5px) }
.knowledge-shell { display: flex; flex-direction: column; height: 100%; background: radial-gradient(circle at 88% 0, #12333b 0, transparent 31%), linear-gradient(145deg, #0b1a20, #071116) }
.knowledge-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line) }
.knowledge-head p { margin: 0 0 4px; color: var(--cyan); font-family: var(--mono); font-size: 11px; letter-spacing: .2em }
.knowledge-head h2 { margin: 0; font-size: 20px; letter-spacing: .08em }
.knowledge-head button { width: 38px; height: 38px; border: 1px solid #38535b; background: #0b171c; color: var(--ink-soft); font-size: 24px; line-height: 1; cursor: pointer }
.knowledge-head button:hover, .knowledge-head button:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none }
.knowledge-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); min-height: 0; flex: 1 }
.knowledge-layout>nav { padding: 20px 14px; border-right: 1px solid var(--line); overflow: auto }
.knowledge-layout>nav a { display: block; padding: 9px 10px; border-left: 2px solid #24444d; color: var(--faint); font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-decoration: none }
.knowledge-layout>nav a:hover { border-color: var(--cyan); background: #0c2025; color: var(--ink-strong) }
.knowledge-content { min-width: 0; padding: 0 28px 38px; overflow-y: auto; scroll-behavior: smooth }
.knowledge-content section { padding: 28px 0 5px; scroll-margin-top: 10px }
.knowledge-content section+section { margin-top: 18px; border-top: 1px solid var(--line) }
.knowledge-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 13px }
.knowledge-section-title>b { color: var(--cyan); font-family: var(--mono); font-size: 12px }
.knowledge-section-title h3 { margin: 0; font-size: 17px; letter-spacing: .05em }
.knowledge-tag { margin-left: auto; padding: 3px 7px; border: 1px solid; font-family: var(--mono); font-size: 11px; letter-spacing: .08em }
.knowledge-tag.confirmed { border-color: #28766e; background: #0b2726; color: var(--cyan) }
.knowledge-tag.mixed { border-color: #7d633a; background: #251f15; color: #e8b965 }
.knowledge-tag.pending { border-color: #764944; background: #251819; color: #e98a80 }
.knowledge-content p, .knowledge-list { color: var(--ink-soft); font-size: 13px; line-height: 1.8 }
.knowledge-content code { color: #bfe0dc }
.knowledge-subtitle { margin: 22px 0 8px; padding-left: 10px; border-left: 3px solid var(--red); color: #f0aaa3; font-size: 15px; letter-spacing: .04em }
.formula-box { margin: 12px 0; padding: 12px 14px; border: 1px solid #25505a; border-left: 3px solid var(--cyan); background: #071116; overflow-x: auto }
.formula-box code { white-space: nowrap; font-family: var(--mono); font-size: 13px }
.flow-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: flow }
.flow-list li { position: relative; min-height: 105px; padding: 11px 10px; border: 1px solid #29434b; background: #0a171c }
.flow-list li:not(:last-child)::after { content: '\203a'; position: absolute; right: -7px; top: 34px; z-index: 1; color: var(--cyan); font-size: 20px }
.flow-list b, .flow-list span { display: block }
.flow-list b { color: var(--ink-strong); font-size: 13px }
.flow-list span { margin-top: 7px; color: var(--faint); font-size: 12px; line-height: 1.55 }
.knowledge-cards { display: grid; gap: 8px; margin: 13px 0 }
.knowledge-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.knowledge-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.knowledge-cards>div { padding: 11px 12px; border: 1px solid #29434b; background: #0a171c }
.knowledge-cards b, .knowledge-cards strong, .knowledge-cards span { display: block }
.knowledge-cards b { color: var(--muted); font-size: 12px }
.knowledge-cards strong { margin-top: 5px; color: var(--cyan); font-family: var(--mono); font-size: 20px }
.knowledge-cards span { margin-top: 3px; color: var(--faint); font-size: 12px }
.table-scroll { max-width: 100%; overflow-x: auto }
.knowledge-content table { width: 100%; border-collapse: collapse; background: #081419; font-size: 13px }
.knowledge-content th, .knowledge-content td { padding: 8px 9px; border: 1px solid #243d45; text-align: center; white-space: nowrap }
.knowledge-content thead th { background: #10232a; color: var(--ink-soft); font-weight: 600 }
.knowledge-content tbody th { text-align: left; color: var(--ink-soft) }
.knowledge-content td { color: var(--faint) }
.knowledge-content td.plus { color: var(--cyan); background: #0a2021 }
.knowledge-content td.plus.hot { color: #ffbf68; background: #251d13 }
.knowledge-content td.minus { color: #ff8176; background: #261617 }
.skill-table td:nth-child(3) { text-align: left }
.knowledge-list { margin: 10px 0; padding-left: 19px }
.knowledge-list li { margin: 7px 0 }
.knowledge-list b { color: var(--ink-strong) }

/* ===== フッター ===== */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--faint); font-family: var(--mono); font-size: 12px; letter-spacing: .08em }
.site-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--cyan); outline: none }
.site-footer svg { width: 14px; height: 14px; fill: currentColor }

/* ===== レスポンシブ ===== */
@media (max-width: 1250px) {
  .grid.four, .grid.five, .grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr }
  .results { position: static }
  .grid.three { grid-template-columns: 1fr 1fr }
  .hero { align-items: flex-start }
}
@media (max-width: 800px) {
  .unit-picker-dialog { width: 96vw; height: 94vh }
  .unit-picker-tools { grid-template-columns: 1fr }
  .unit-picker-tools>label { grid-row: auto }
  .knowledge-dialog { width: 96vw; height: 94vh }
  .knowledge-layout { grid-template-columns: 1fr }
  .knowledge-layout>nav { display: flex; gap: 3px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto }
  .knowledge-layout>nav a { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid #24444d; padding: 7px }
  .knowledge-content { padding: 0 16px 28px }
  .flow-list { grid-template-columns: 1fr }
  .flow-list li { min-height: 0 }
  .flow-list li:not(:last-child)::after { content: '\2304'; right: 50%; top: auto; bottom: -13px }
  .knowledge-head { padding: 15px 16px }
  .knowledge-head h2 { font-size: 17px }
}
@media (max-width: 560px) {
  .shell { width: 94vw; padding-top: 20px }
  .grid.two, .grid.three, .grid.four, .grid.five, .grid.six { grid-template-columns: 1fr }
  .panel { padding: 16px }
  .hero { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 16px }
  .hero h1 { font-size: 27px }
  .hero-actions { justify-content: space-between }
  .knowledge-open { height: 38px; padding: 0 12px }
  .checks { display: block }
  .condition-badge { white-space: normal }
  .results { padding: 17px }
  .damage-card>strong { font-size: 50px }
  .damage-card>span { font-size: 17px; margin-left: 8px }
  .probability strong { font-size: 38px }
  .intercept-heading { align-items: flex-start }
  .intercept-readout { grid-template-columns: 1fr }
  .intercept-readout>strong { grid-row: auto; grid-column: auto }
  .unit-picker-head { padding: 14px }
  .unit-picker-head h2 { font-size: 17px }
  .unit-picker-tools { padding: 10px 14px 12px; gap: 10px }
  .unit-filter-toggle { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid #304c55; background: #0a171c; color: var(--muted); font-size: 12px; letter-spacing: .04em; cursor: pointer }
  .unit-filter-toggle b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cyan); font-family: var(--mono); font-size: 11px; font-weight: 500; text-align: right }
  .unit-filter-toggle i { font-style: normal; color: var(--faint) }
  .unit-filter-toggle[aria-expanded="true"] i { display: inline-block; transform: rotate(180deg) }
  .unit-filter-toggle[aria-expanded="false"] + .unit-filter-groups { display: none }
  .unit-filter-groups { gap: 8px 9px }
  .unit-picker-result-head { padding: 9px 14px }
  .unit-picker-result-head>small { display: none }
  .unit-picker-list { grid-template-columns: 1fr; padding: 10px }
  .knowledge-cards.two, .knowledge-cards.three { grid-template-columns: 1fr }
  .knowledge-section-title { align-items: flex-start; flex-wrap: wrap }
  .knowledge-tag { margin-left: 0 }
  .knowledge-content section { padding-top: 20px }
}