/* Order of Battle 战斗序列 — Strategic family styling.
 *
 * Palette follows brand-specenvoy and the Vantage sibling: navy base, gold for
 * detail and headings. Branch colours (set in orbat.js) deliberately avoid green
 * and teal entirely — standing owner rule — and avoid sitting orange next to gold
 * by keeping gold for chrome and giving the Rocket Force a brick red instead of
 * the field orange. */

#orbat { --sea: #0a1222; --panel: #0d1526; --line: #1e2a44; --line2: #263751;
  --ink: #dbe4f2; --dim: #9aa8c2; --gold: #e8b04b; --sel: #ffffff; }

/* ------------------------------------------------------------- Strategic identity
   The generated hex camo (brand/pattern-hex.svg, built by
   tools/vantage/build-hex-pattern.mjs) is what makes /strategic, Vantage and this
   tool read as one family. The radial vignette is not decoration: without it the
   hero text sits on shifting tones and visibly flickers as the eye tracks across.

   ⚠ These rules are now duplicated in FOUR places — strategic/index.html (inline),
   strategic/zh/index.html, data/vantage/vantage.css and here — plus `.card.hexcard`
   inline in data/index.html and its zh twin. That is one too many. The next session
   that touches any of them should promote this block to /style.css and delete the
   copies; it was not done here only to avoid editing a global file while another
   session was live in the repo. */
.hex-band {
  background-color: #131c2e;
  background-image: url("/brand/pattern-hex.svg?v=1");
  background-size: 164px auto;
  border: 1px solid #263751;
  border-radius: 16px;
  padding: 26px 24px;
  margin: 0 0 22px;
  position: relative;
  overflow: hidden;
}
.hex-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 132% at 50% 0%, rgba(11,17,32,.10) 0%, rgba(11,17,32,.60) 72%, rgba(11,17,32,.80) 100%);
}
.hex-band > * { position: relative; z-index: 1; }
.hex-band .hero-title { margin: 0 0 10px; }
.hex-band .tagline { margin: 0; }
.hex-kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #8fa8d0; margin: 0 0 9px; font-weight: 600; }
.hex-kicker a { color: #8fa8d0; }

#orbat { color: var(--ink); font-size: 14px; }
.ob-loading { padding: 60px 20px; text-align: center; color: var(--dim); }
#orbat button { font: inherit; cursor: pointer; }

.ob-app { position: relative; }

/* freshness stamp — the user-visible tripwire for a stale hierarchy (plan §7c) */
.ob-stamp { color: #7e8aa2; font-size: 12px; margin: -8px 0 14px; letter-spacing: .02em; }

/* ---------------------------------------------------------------- top bar */
.ob-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  align-items: flex-end; margin-bottom: 14px; }
.ob-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-tab { background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  color: var(--dim); padding: 8px 13px; text-align: left; line-height: 1.25;
  transition: border-color .15s, color .15s, background .15s; }
.ob-tab .t { display: block; font-weight: 600; font-size: 13.5px; }
.ob-tab .h { display: block; font-size: 11px; opacity: .72; margin-top: 2px; }
.ob-tab:hover { border-color: var(--line2); color: var(--ink); }
.ob-tab.on { background: #16203a; border-color: var(--gold); color: var(--ink); }
.ob-tab.on .h { color: var(--gold); opacity: .95; }

.ob-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ob-force { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ob-fbtn { background: var(--panel); border: 0; color: var(--dim); padding: 7px 12px; font-size: 12.5px; }
.ob-fbtn.on { background: #1d2b49; color: var(--gold); }

/* search — z-index above the view so results are never swallowed (the bug the
   Vantage gate caught: a control row out-stacked the dropdown) */
.ob-search { position: relative; z-index: 40; }
.ob-search input { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: 8px 12px; width: 250px; max-width: 52vw; font-size: 13px; }
.ob-search input:focus { outline: none; border-color: var(--gold); }
.ob-results { display: none; position: absolute; top: calc(100% + 5px); right: 0; width: 330px;
  max-width: 86vw; max-height: 330px; overflow-y: auto; background: #101a2e;
  border: 1px solid var(--line2); border-radius: 9px; padding: 5px; z-index: 41;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.ob-results.open { display: block; }
.ob-r { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--ink); padding: 7px 9px; border-radius: 6px; font-size: 13px; }
.ob-r:hover { background: #1b2740; }
.ob-r .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.ob-r .zn { color: var(--dim); font-size: 12px; }
.ob-r .hist { color: #7e8aa2; font-size: 11px; }
.ob-rnone { padding: 10px; color: var(--dim); font-size: 13px; }

/* ---------------------------------------------------------------- stage */
.ob-stage { min-height: 380px; }
.ob-lead { color: var(--dim); font-size: 13.5px; line-height: 1.66; margin: 0 0 14px;
  max-width: 76ch; }
.ob-hint { color: #7e8aa2; font-size: 12px; margin-top: 12px; }
.ob-mini { background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  color: var(--dim); padding: 6px 11px; font-size: 12.5px; }
.ob-mini:hover { border-color: var(--gold); color: var(--ink); }

/* ---------------------------------------------------------------- tree */
.ob-treectl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.ob-toggle { color: var(--dim); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ob-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }
.ob-legend .li { color: var(--dim); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.ob-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.ob-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.ob-col { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.ob-colh { margin: 0 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ob-tree { overflow-x: auto; }
.ob-sub { margin-left: 13px; padding-left: 9px; border-left: 1px solid var(--line2); }
.ob-node { display: flex; align-items: center; gap: 7px; padding: 5px 8px; margin: 2px 0;
  border-left: 3px solid var(--line2); border-radius: 0 6px 6px 0; cursor: pointer;
  transition: background .12s; min-width: 0; }
.ob-node:hover { background: #16203a; }
.ob-node.sel { background: #1e2c4c; box-shadow: inset 0 0 0 1px var(--sel); }
.ob-node.hist { opacity: .55; }
.ob-tw { width: 13px; color: var(--dim); font-size: 14px; flex: none; text-align: center; }
.ob-mark { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .5px; color: var(--dim); flex: none; min-width: 34px; }
.ob-nm { font-size: 13px; white-space: nowrap; }
.ob-zn { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.ob-cnt { font-size: 10.5px; color: #7e8aa2; background: #16203a; border-radius: 20px; padding: 1px 6px; flex: none; }
.ob-op { color: var(--gold); font-size: 11px; flex: none; }

/* ---------------------------------------------------------------- dossier */
/* ⚠ Slide-in from the RIGHT and stop short of the top so it never covers the
   site language switcher — reference-deeplink-language-carry. */
.ob-dossier { position: fixed; top: 96px; right: 0; bottom: 0; width: 400px; max-width: 94vw;
  background: #0c1425; border-left: 1px solid var(--line2); padding: 16px 18px 40px;
  overflow-y: auto; transform: translateX(102%); transition: transform .22s ease;
  z-index: 60; box-shadow: -14px 0 40px rgba(0,0,0,.5); }
.ob-dossier.open { transform: none; }
.ob-x { position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--dim); font-size: 24px; line-height: 1; }
.ob-x:hover { color: var(--ink); }
.ob-dhead { border-left: 3px solid var(--gold); padding-left: 11px; margin: 0 26px 14px 0; }
.ob-dech .mark { font-family: ui-monospace, monospace; font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.ob-dhead h2 { margin: 3px 0 2px; font-size: 18px; color: var(--ink); line-height: 1.28; }
.ob-dzn { color: var(--dim); font-size: 13px; }
.ob-dchips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.ob-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line2); color: var(--dim); }
.ob-chip.c-high { border-color: #3d6b46; color: #a9c9ae; }
.ob-chip.c-med { border-color: #6b5a2f; color: #d7c58c; }
.ob-chip.c-low { border-color: #6b3a2f; color: #d9a493; }
.ob-chip.weak { border-color: #4a3f6b; color: #b3a7d4; }
.ob-chip.hist { border-color: #444f66; color: #93a0b8; }

.ob-dbody h3 { font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim); margin: 16px 0 6px; }
.ob-dbody h3.hl { color: var(--gold); }
.ob-dbody p { font-size: 13.5px; line-height: 1.66; color: #c3cee1; margin: 0 0 8px; }
.ob-dbody p.hl { color: var(--ink); }
.ob-conflict { border: 1px solid #6b5a2f; background: #1a1708; border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.ob-conflict h4 { margin: 0 0 7px; font-size: 11.5px; color: #d7c58c; text-transform: uppercase; letter-spacing: .08em; }
.ob-conflict p { font-size: 12.5px; margin: 0 0 5px; }
.ob-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 12px 0; font-size: 12.5px; }
.ob-facts dt { color: #7e8aa2; white-space: nowrap; }
.ob-facts dd { margin: 0; color: #c3cee1; }
.ob-link { color: var(--gold); text-decoration: none; }
.ob-link:hover { text-decoration: underline; }
.ob-link .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.ob-link.block { display: block; padding: 4px 0; font-size: 12.5px; }
.ob-sublist { max-height: 260px; overflow-y: auto; }
.ob-vlink a { color: var(--gold); font-size: 12.5px; }
.ob-src { margin: 0; padding-left: 17px; font-size: 11.5px; color: #7e8aa2; line-height: 1.62; }
.ob-src a { color: #9db4d8; }

/* ---------------------------------------------------------------- ladder */
.ob-rungs { display: flex; flex-direction: column; gap: 5px; }
.ob-rung { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ob-rung.hero { border-color: #40507a; }
.ob-rung.open { border-color: var(--gold); }
.ob-rhead { display: flex; align-items: center; gap: 12px; width: 100%; background: none;
  border: 0; color: var(--ink); padding: 11px 14px; text-align: left; }
.ob-rhead:hover { background: #16203a; }
.ob-rhead .mark { font-family: ui-monospace, monospace; font-size: 10px; color: var(--dim);
  min-width: 42px; letter-spacing: 1px; }
.ob-rhead .rn { font-weight: 600; font-size: 14px; flex: 1; }
.ob-rhead .rr { color: var(--gold); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ob-rhead .rc { color: #d7c58c; }
.ob-rbody { padding: 4px 14px 15px; border-top: 1px solid var(--line); }
.ob-rt { color: #c3cee1; font-size: 13.5px; line-height: 1.66; margin: 11px 0 13px; max-width: 78ch; }
.ob-rpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ob-rside { background: #0b1322; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; min-width: 0; }
.ob-rside.empty { border-style: dashed; }
.ob-rside .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.ob-rside .unit { font-size: 14px; margin-top: 4px; }
.ob-rside .cnt { color: var(--gold); font-size: 12.5px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.ob-rside .none { color: #7e8aa2; font-size: 12.5px; margin-top: 8px; font-style: italic; }
.ob-dots { display: block; width: 100%; }
.dotcap { color: #7e8aa2; font-size: 10.5px; margin-top: 5px; }
.ob-anchor { color: var(--gold); font-size: 13.5px; margin: 13px 0 0; }
.ob-rnote { color: #d7c58c; font-size: 12.5px; line-height: 1.6; margin: 9px 0 0;
  border-left: 2px solid #6b5a2f; padding-left: 10px; }

/* ---------------------------------------------------------------- chains */
.ob-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ob-pbtn { background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  color: var(--dim); padding: 6px 13px; font-size: 12.5px; }
.ob-pbtn:hover { border-color: var(--line2); color: var(--ink); }
.ob-pbtn.on { border-color: var(--gold); color: var(--ink); background: #16203a; }
.ob-pbtn .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.ob-pbtn .vs { color: var(--gold); }
.ob-cpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ob-ccol { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.ob-ccol h4 { margin: 0 0 12px; font-size: 12px; letter-spacing: .06em; color: var(--gold); line-height: 1.45; }
.ob-ccol.oper h4 { color: #f0955a; }
.ob-cstep { display: flex; align-items: center; gap: 10px; background: #0b1322;
  border: 1px solid var(--line2); border-radius: 8px; padding: 9px 11px; cursor: pointer;
  opacity: 0; transform: translateY(-9px); transition: opacity .3s ease, transform .3s ease; }
.ob-cstep.in { opacity: 1; transform: none; }
.ob-cstep:hover { border-color: var(--gold); }
.ob-cstep .mark { font-family: ui-monospace, monospace; font-size: 9.5px; min-width: 40px; letter-spacing: 1px; }
.ob-cstep .nm { font-size: 13px; }
.ob-carrow { text-align: center; color: var(--dim); font-size: 15px; line-height: 1;
  padding: 3px 0; opacity: 0; transition: opacity .3s ease; }
.ob-carrow.in { opacity: 1; }
.ob-meet { text-align: center; color: var(--gold); font-size: 13px; margin: 14px 0; }

/* ---------------------------------------------------------------- timeline */
.ob-timectl { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.ob-year { flex: 1; max-width: 560px; accent-color: #e8b04b; }
.ob-ylabel { font-size: 22px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 62px; }
.ob-tgroup { margin-bottom: 16px; }
.ob-tgroup h4 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ob-trow { display: flex; flex-wrap: wrap; gap: 7px; }
.ob-tbox { background: var(--panel); border: 1px solid var(--line2); border-left-width: 3px;
  border-radius: 8px; color: var(--ink); padding: 7px 11px; font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
  animation: obIn .34s ease both; }
.ob-tbox .m { font-family: ui-monospace, monospace; font-size: 9px; color: var(--dim); letter-spacing: 1px; }
.ob-tbox.born { box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(232,176,75,.28); }
.ob-tbox.dies { opacity: .45; text-decoration: line-through; }
@keyframes obIn { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: none; } }
.ob-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 13px; margin-top: 6px; }
.ob-ev { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; }
.ob-ev.hero { border-color: var(--gold); }
.ob-ev.nonev { border-style: dashed; border-color: #4a4a5f; background: #10121f; }
.ob-ev .d { color: var(--dim); font-size: 11.5px; }
.ob-ev .tag { color: #d9a493; border: 1px solid #6b3a2f; border-radius: 20px; padding: 1px 7px; font-size: 10px; }
.ob-ev h5 { margin: 5px 0 7px; font-size: 14.5px; color: var(--gold); line-height: 1.35; }
.ob-ev.nonev h5 { color: #c9b8b2; }
.ob-ev p { margin: 0 0 9px; font-size: 13px; line-height: 1.64; color: #c3cee1; }
.ob-evnodes { display: flex; flex-wrap: wrap; gap: 5px; }
.ob-pill { background: #0b1322; border: 1px solid var(--line2); border-left-width: 3px;
  border-radius: 20px; color: var(--dim); padding: 3px 10px; font-size: 11.5px; }
.ob-pill:hover { color: var(--ink); }
.ob-noev { color: #7e8aa2; font-size: 13px; }

/* ---------------------------------------------------------------- compare */
.ob-cmpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ob-cmpcard { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 11px; padding: 14px 16px; min-width: 0; }
.ob-cmpcard .ch .mark { font-family: ui-monospace, monospace; font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.ob-cmpcard h4 { margin: 4px 0 2px; font-size: 16px; line-height: 1.3; }
.ob-cmpcard .zn { color: var(--dim); font-size: 13px; margin-bottom: 4px; }
.ob-cmpcard h5 { margin: 13px 0 5px; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); }
.ob-cmpcard p { font-size: 13px; line-height: 1.64; color: #c3cee1; margin: 0 0 8px; }
.ob-why { background: #16130a; border: 1px solid #6b5a2f; border-radius: 11px;
  padding: 14px 17px; margin-top: 16px; }
.ob-why h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ob-why p { margin: 0; font-size: 14px; line-height: 1.7; color: #e2dccb; max-width: 84ch; }

/* ================================================================ v2 layer */

/* ---------------------------------------------------------------- org chart */
.ob-charthint { color: #7e8aa2; font-size: 11.5px; margin: 0 0 8px; }
.ob-charthint .opcon-key { color: var(--gold); }
.ob-chartwrap { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; height: min(70vh, 660px); overflow: auto; position: relative; }
.ob-svg { display: block; cursor: grab; user-select: none; }
.ob-svg.dragging { cursor: grabbing; }
.ob-edge { fill: none; stroke: #2c3a57; stroke-width: 1.4; }
/* the operational chain, drawn across the administrative tree — dual parentage
   made visible in the main view instead of quarantined in its own tab */
.ob-opcon { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 4;
  opacity: .85; }
.ob-cn { cursor: pointer; }
/* labels and the composition strip must not eat the click — the box and the
   expand toggle are the only interactive parts of a node */
.ob-cn text, .ob-strip { pointer-events: none; }
.ob-cn-tw, .ob-cn-tw * { pointer-events: auto; }
.ob-cn-box { fill: #101a2e; stroke: #2c3a57; stroke-width: 1; transition: fill .12s, stroke .12s; }
.ob-cn:hover .ob-cn-box { fill: #16223a; stroke: #3d5079; }
.ob-cn.sel .ob-cn-box { stroke: var(--sel); stroke-width: 1.8; fill: #1c2a48; }
.ob-cn.hist { opacity: .5; }
.ob-cn-mark { fill: #7e8aa2; font-size: 8px; font-family: ui-monospace, monospace; letter-spacing: .8px; }
.ob-cn-n { fill: var(--ink); font-size: 12px; font-weight: 600; }
.ob-cn-zn { fill: #93a3bd; font-size: 10.5px; }
.ob-cn-cnt { fill: #7e8aa2; font-size: 10px; }
.ob-cn-tw circle { fill: #16223a; stroke: #3d5079; }
.ob-cn-tw text { fill: var(--gold); font-size: 13px; }
.ob-cn-tw:hover circle { fill: #223258; }

/* ---------------------------------------------------------------- composition */
.ob-comp { margin: 8px 0 4px; }
.ob-comprow { display: grid; grid-template-columns: 1fr 92px 30px; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--dim); margin-bottom: 4px; }
.ob-comprow .bar { background: #0b1322; border-radius: 3px; height: 7px; overflow: hidden; }
.ob-comprow .bar i { display: block; height: 100%; border-radius: 3px; }
.ob-comprow .v { text-align: right; color: #c3cee1; font-variant-numeric: tabular-nums; }
.ob-picto { display: flex; flex-wrap: wrap; gap: 2px; margin: -1px 0 8px; }
.ob-picto b { width: 6px; height: 10px; border-radius: 1px; opacity: .85; }

/* ---------------------------------------------------------------- morph */
.ob-tbox .fate { color: var(--gold); font-size: 10.5px; margin-left: 6px; opacity: 0;
  transition: opacity .3s ease; }
.ob-tbox.dies .fate { opacity: 1; }
.ob-tbox.stage1 { box-shadow: 0 0 0 1px #d1573c, 0 0 16px rgba(209,87,60,.4); }

/* ---------------------------------------------------------------- quiz */
.ob-qstart { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 22px; text-align: center; }
.ob-qstart p { color: var(--dim); font-size: 14px; margin: 0 0 14px; }
.ob-qbest { color: #7e8aa2; font-size: 12px; margin-top: 12px !important; }
.ob-qbig { background: linear-gradient(180deg, #f0bd5f, #d99a33); border: 0; border-radius: 9px;
  color: #1a1408; font-weight: 700; font-size: 14.5px; padding: 11px 26px; }
.ob-qbig:hover { filter: brightness(1.07); }
.ob-qnext { margin-top: 14px; }
.ob-qhead { display: flex; justify-content: space-between; color: var(--dim); font-size: 12px;
  margin-bottom: 8px; }
.ob-qhead .s { color: var(--gold); }
.ob-qcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; }
.ob-qcard .q { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ob-qcard .subj { font-size: 21px; font-weight: 700; margin: 6px 0 16px; line-height: 1.3; }
.ob-qbody { }
.ob-qslider { width: 100%; accent-color: #e8b04b; }
.ob-qguess { color: var(--gold); font-size: 17px; font-variant-numeric: tabular-nums;
  margin: 10px 0 16px; }
.ob-qhint { color: var(--dim); font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.ob-qopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.ob-qopt { background: #0b1322; border: 1px solid var(--line2); border-radius: 9px;
  color: var(--ink); padding: 13px 14px; font-size: 13.5px; text-align: left; }
.ob-qopt:hover:not(:disabled) { border-color: var(--gold); background: #16203a; }
.ob-qopt.right { border-color: #4f8f5c; background: #12251a; }
.ob-qopt.chosen-wrong { border-color: #a4553f; background: #251310; }
.ob-qverdict { font-size: 19px; font-weight: 700; margin: 16px 0 12px; }
.ob-qverdict.good { color: #8fd0a0; }
.ob-qverdict.off { color: #e8b04b; }
.ob-qwhy { color: #c3cee1; font-size: 13.5px; line-height: 1.66; margin: 10px 0; max-width: 76ch; }
.ob-qcompare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
.ob-qdots { background: #0b1322; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; }
.ob-qdots .l { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); }
.ob-qdots .v { font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 7px; }
.ob-qend { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px; text-align: center; }
.ob-qend.t4 { border-color: var(--gold); box-shadow: 0 0 34px rgba(232,176,75,.16); }
.ob-qend h3 { margin: 0 0 8px; font-size: 24px; color: var(--gold); }
.ob-qend p { color: var(--dim); font-size: 14px; margin: 0 0 6px; }
.ob-qend .b { color: #7e8aa2; font-size: 12px; margin-bottom: 16px; }

/* celebration — house ladder, t2 pop → t4 legendary */
.ob-cel { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -10px) scale(.96);
  background: #16203a; border: 1px solid var(--line2); border-radius: 12px;
  padding: 13px 28px; font-size: 20px; font-weight: 800; color: var(--ink);
  z-index: 200; opacity: 0; transition: opacity .3s ease, transform .3s ease;
  pointer-events: none; }
.ob-cel.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ob-cel.t3 { border-color: rgba(232,176,75,.55); color: var(--gold); }
.ob-cel.t4 { border-color: var(--gold); color: var(--gold); font-size: 24px;
  box-shadow: 0 0 46px rgba(232,176,75,.32); }
.ob-celcv { position: fixed; inset: 0; z-index: 199; pointer-events: none; }

@media (max-width: 720px) {
  .ob-svg { height: 58vh; }
  .ob-qcompare { grid-template-columns: 1fr; }
  .ob-qcard .subj { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-cel, .ob-tbox .fate { transition: none !important; }
}

/* ---------------------------------------------------------------- kiosk */
body.ob-kiosk .topbar, body.ob-kiosk .crumbs, body.ob-kiosk footer,
body.ob-kiosk .ob-below, body.ob-kiosk .hex-band .tagline { display: none !important; }
body.ob-kiosk .ob-dossier { top: 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .ob-bar { flex-direction: column; align-items: stretch; }
  .ob-tools { justify-content: space-between; }
  .ob-search input { width: 100%; max-width: none; }
  .ob-results { left: 0; right: auto; width: 100%; }
  .ob-tab .h { display: none; }
  /* ⚠ NOT top:0. A full-bleed sheet covers the top bar, and with it the EN·中文
     switcher and the globe menu — so a reader who opened a unit could not switch
     language to see that same unit in Chinese without closing the panel first.
     That is the standing site rule (reference-deeplink-language-carry: fixed side
     panels must not cover the top-bar switcher), and it was reported from the live
     site. The offset clears the switcher row; orbat-qa.mjs now hit-tests the
     switcher with elementFromPoint at 390px, so shrinking this will fail the gate. */
  .ob-dossier { top: 84px; width: 100%; max-width: 100%;
    border-left: 0; border-top: 1px solid var(--line2); border-radius: 14px 14px 0 0; }
  .ob-legend { margin-left: 0; }
  .ob-ylabel { font-size: 18px; min-width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-cstep, .ob-carrow, .ob-tbox, .ob-dossier { transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important; }
}