/* =====================================================================
   トレキャッチ ─ 相場観測基地 UI（MARKET OBSERVATION BASE）
   style.css（共通基盤）の後に読み込み、地の部分ごとダーク司令室に置き換える。
   設計: 暗い基地 × 計器 × 走査線 × 丸鋲メカ。データが「生きて動いて見える」こと。
   ===================================================================== */
:root {
  /* 基地の色 */
  --void: #070b16;
  --bg: #0b1122;
  --bg-2: #0f1730;
  --panel: #141e3a;
  --panel-hi: #1a2647;
  --bezel: #26355c;

  /* 発光色 */
  --brand: #ff8a2b;        /* 主計器のオレンジ */
  --brand-dark: #e06a10;
  --brand-deep: #070b16;
  --brand-soft: #16203c;
  --accent: #ffc44d;
  --cyan: #3ce0ff;
  --green: #5cffa8;
  --danger: #ff5470;

  /* 文字 */
  --ink: #eaf0ff;
  --muted: #94a7d4;
  --line: rgba(120, 165, 255, 0.16);
  --line-2: rgba(120, 165, 255, 0.28);
  --paper: #0b1122;
  --white: #ffffff;

  --mono: "SFMono-Regular", Consolas, "Courier New", monospace;
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 20px;
  --shadow-sm: 0 8px 20px -10px rgba(0, 0, 0, 0.8);
  --shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.9);
}

/* ---------- 基地の床（グリッド＋走査線＋遠景の光） ---------- */
body {
  background: var(--bg);
  color: var(--ink);
}
body::before {  /* 方眼グリッド＋計器の残光 */
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 520px at 82% -6%, rgba(255, 138, 43, 0.16), transparent 62%),
    radial-gradient(ellipse 760px 460px at 8% 102%, rgba(60, 224, 255, 0.10), transparent 60%),
    linear-gradient(rgba(120, 165, 255, 0.055) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(120, 165, 255, 0.055) 1px, transparent 1px) 0 0 / 44px 100%;
}
body::after {   /* CRT走査線 */
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}
/* 本文とフッターを背景レイヤー（body::before/after）より前面へ。
   .site-header は style.css の sticky / z-index:100 を壊さないよう対象に含めない。 */
main, .site-footer { position: relative; z-index: 2; }

a { color: var(--cyan); }
a:hover { color: #9defff; }

/* ---------- 司令室ヘッダー ---------- */
.site-header {
  background: linear-gradient(180deg, rgba(11, 17, 34, 0.95), rgba(11, 17, 34, 0.82));
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(255, 138, 43, 0.25), 0 10px 30px -20px #000;
}
.header__inner { min-height: 60px; }
.brand__name { color: var(--ink); letter-spacing: 0.04em; }
.brand__name .brand__dot { color: var(--brand); text-shadow: 0 0 12px rgba(255, 138, 43, 0.8); }
.brand__sub { color: var(--muted); font-family: var(--mono); letter-spacing: 0.12em; }
.nav a { color: var(--ink); }
.nav a:hover { color: var(--brand); }
.nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.nav__cta { background: var(--brand); color: #241000 !important; box-shadow: 0 0 20px -6px rgba(255, 138, 43, 0.8); }
.nav__cta:hover { background: var(--accent); }
.nav-toggle span { background: var(--ink); }
@media (max-width: 840px) {
  .nav { background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
  .nav a { border-bottom-color: var(--line); }
}

/* ---------- セクション ---------- */
.section--alt { background: linear-gradient(180deg, rgba(15, 23, 48, 0.85), rgba(11, 17, 34, 0.4)); }
.section__eyebrow {
  font-family: var(--mono); color: var(--brand);
  text-shadow: 0 0 14px rgba(255, 138, 43, 0.55);
}
.section__head h2 { color: var(--ink); }
.section__head p { color: var(--muted); }

/* ---------- HUD枠（四隅ブラケット） ---------- */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--brand); opacity: 0.85;
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.bracket::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }

/* ---------- コンソールパネル（基本の箱） ---------- */
.console {
  position: relative;
  background:
    linear-gradient(180deg, rgba(26, 38, 71, 0.92), rgba(20, 30, 58, 0.92));
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-sm);
}

/* ---------- 丸鋲メカパネル（ダーク版に上書き） ---------- */
.mecha-panel {
  background:
    radial-gradient(circle 3.5px at 13px 13px, rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    radial-gradient(circle 3.5px at calc(100% - 13px) 13px, rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    radial-gradient(circle 3.5px at 13px calc(100% - 13px), rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    radial-gradient(circle 3.5px at calc(100% - 13px) calc(100% - 13px), rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    linear-gradient(180deg, #1b2748, #131c36);
  border: 2px solid var(--bezel);
  border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -14px 26px -18px #000, var(--shadow-sm);
}

/* ---------- カード＝ミッションスロット ---------- */
.card, .gx-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(26, 38, 71, 0.9), rgba(17, 25, 48, 0.9));
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card::after {  /* 走査ハイライト（ホバーで走る） */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(60, 224, 255, 0.14) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.card:hover { border-color: var(--brand); transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255, 138, 43, 0.35), 0 22px 46px -20px rgba(255, 138, 43, 0.35); }
.card:hover::after { transform: translateX(120%); }
.card h3, .gx-panel h3 { color: var(--ink); font-variant-numeric: tabular-nums; }
.card p, .gx-panel p { color: var(--muted); }
.card__tag {
  background: rgba(255, 138, 43, 0.14); color: var(--accent);
  border: 1px solid rgba(255, 138, 43, 0.4); font-family: var(--mono);
  border-radius: 4px; letter-spacing: 0.1em;
}
.card__note { color: var(--cyan); font-family: var(--mono); font-size: 0.78rem; }
.card__note a { color: var(--cyan); }

/* ミッション状態 */
.card--locked { opacity: 0.72; }
.card--locked:hover { transform: none; border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.card--locked .card__tag { background: rgba(148, 167, 212, 0.12); color: var(--muted); border-color: var(--line-2); }
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; margin-top: auto;
}
.status--online { color: var(--green); }
.status--locked { color: var(--muted); }
.status i {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.status--online i { animation: fx-led 1.6s ease-in-out infinite; }

/* ---------- データ表 ＝ 計器盤 ---------- */
.table-wrap {
  background: rgba(13, 20, 40, 0.86);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
table.data { color: var(--ink); }
table.data th {
  background: linear-gradient(180deg, #1c2950, #16203c);
  color: var(--accent); font-family: var(--mono);
  letter-spacing: 0.08em; border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0;
}
table.data td { border-bottom: 1px solid rgba(120, 165, 255, 0.09); }
table.data tbody tr { transition: background 0.18s ease; }
table.data tbody tr:nth-child(odd) { background: rgba(120, 165, 255, 0.028); }
table.data tbody tr:hover { background: rgba(255, 138, 43, 0.10); box-shadow: inset 3px 0 0 var(--brand); }
table.data td.num { font-family: var(--mono); }
table.data small { color: var(--muted); }
table.data a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
table.data a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- 通信パネル（notice） ---------- */
.notice {
  background: linear-gradient(180deg, rgba(26, 38, 71, 0.9), rgba(17, 25, 48, 0.9));
  border: 1px solid var(--line-2); border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ---------- 文章 ---------- */
.prose h2, .prose h3 { color: var(--ink); }
.prose li, .prose p { color: #cdd9f5; }
.dl-company { background: rgba(13, 20, 40, 0.86); border-color: var(--line-2); }
.dl-company dt { background: #16203c; color: var(--accent); border-bottom-color: var(--line); }
.dl-company dd { color: var(--ink); border-bottom-color: var(--line); }
small, .gx-note { color: var(--muted); }

/* ---------- ボタン ---------- */
.btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #241000;
  box-shadow: 0 0 26px -8px rgba(255, 138, 43, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}
.btn--primary:hover { color: #241000; filter: brightness(1.08); }
.btn--ghost { border-color: rgba(60, 224, 255, 0.5); color: var(--cyan); }
.btn--ghost:hover { background: rgba(60, 224, 255, 0.12); color: #cdf6ff; }
.btn--line { border-color: var(--brand); color: var(--accent); }
.btn--line:hover { background: rgba(255, 138, 43, 0.12); color: var(--accent); }

/* ---------- 起動シーケンス（ブートログ） ---------- */
.boot {
  font-family: var(--mono); font-size: clamp(0.72rem, 2.1vw, 0.84rem);
  color: var(--green); line-height: 1.9; letter-spacing: 0.04em;
  margin: 0 0 18px; min-height: 5.7em;
}
.boot b { color: var(--accent); font-weight: 700; }
.boot .ok { color: var(--cyan); }
.boot__line { opacity: 0; }
.boot__line.is-on { animation: fx-rise 0.32s var(--ease) both; }
html:not(.fx-ready) .boot__line { opacity: 1; }

/* ---------- 実データ・ティッカー ---------- */
.ticker {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  background: rgba(7, 11, 22, 0.72);
  padding: 9px 0; margin: 0;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker__track {
  display: flex; gap: 34px; width: max-content;
  animation: fx-ticker 48s linear infinite;
}
.ticker__item {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--mono); font-size: 0.8rem; color: var(--ink);
}
.ticker__item img { width: 22px; border-radius: 3px; }
.ticker__no { color: var(--muted); }
.ticker__yen { color: var(--accent); font-weight: 700; }
.ticker__yen--hi { color: var(--danger); }
.ticker__yen--lo { color: var(--green); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes fx-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 円形計器（ゲージ） ---------- */
.gauge-row { display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 26px); align-items: center; }
.gauge {
  --val: 0;
  position: relative; width: clamp(96px, 13vw, 122px); aspect-ratio: 1; flex: 0 0 auto;
  border-radius: 50%;
  background:
    conic-gradient(var(--brand) calc(var(--val) * 1%), rgba(120, 165, 255, 0.14) 0),
    #101932;
  border: 3px solid var(--bezel);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.7), 0 0 26px -12px rgba(255, 138, 43, 0.7);
  display: grid; place-items: center;
}
.gauge::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #182448, #0d1428);
  border: 1px solid var(--line-2);
}
.gauge__v {
  position: relative; font-family: var(--head); font-weight: 800;
  font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: center; line-height: 1.15;
}
.gauge__v small { display: block; font-size: 0.55em; color: var(--muted); font-weight: 400;
  font-family: var(--mono); letter-spacing: 0.08em; }

/* ---------- 索敵ログ（fx.css のダーク調整） ---------- */
.scout-line { color: var(--green); }
.scout-line--sub { color: var(--muted); }
.scout-line .cursor { background: var(--green); }
.scout__readout { color: var(--green); }
.dataroom { background: rgba(10, 16, 32, 0.7); }
.radar { border-color: var(--bezel); }

/* ---------- VS ステージ（基地の色に） ---------- */
.vs-stage {
  background:
    radial-gradient(ellipse at 50% 122%, rgba(255, 138, 43, 0.24), transparent 62%),
    linear-gradient(165deg, #0a1226, #16203c 55%, #1d2a52);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow);
}
.vs-punch { color: var(--accent); text-shadow: 0 0 18px rgba(255, 196, 77, 0.35); }

/* ---------- フッター ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--void), #04070f);
  border-top: 1px solid var(--line-2);
  color: var(--muted);
}
.site-footer .brand__name { color: var(--ink); }
.footer__col h3 { color: var(--brand); font-family: var(--mono); letter-spacing: 0.12em; }
.footer__col a { color: var(--muted); }
.footer__col a:hover { color: var(--cyan); }
.footer__bottom { border-top-color: var(--line); }
.footer__legal a { color: var(--muted); }

/* ---------- 汎用 ---------- */
.mono { font-family: var(--mono); }
.glow-o { color: var(--brand); text-shadow: 0 0 16px rgba(255, 138, 43, 0.6); }
.card-hero__inner { border-color: var(--bezel); }
.item-grid { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .card::after { display: none; }
  .boot__line { opacity: 1; animation: none; }
}

/* ---------- 司令室ヒーロー ---------- */
.gx-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 800px 460px at 78% 8%, rgba(255, 138, 43, 0.20), transparent 62%),
    radial-gradient(ellipse 640px 400px at 12% 92%, rgba(60, 224, 255, 0.14), transparent 60%),
    linear-gradient(165deg, #0a1020, #101a36 55%, #16224a);
  border-bottom: 1px solid var(--line-2);
}
.gx-hero::before { /* 走査ライン（上から下へ） */
  content: ""; position: absolute; left: 0; right: 0; height: 160px; top: -160px;
  background: linear-gradient(180deg, transparent, rgba(60, 224, 255, 0.09), transparent);
  animation: fx-hero-scan 7s linear infinite; pointer-events: none;
}
@keyframes fx-hero-scan { to { top: 120%; } }
.gx-hero__inner { padding: clamp(38px, 6vw, 74px) 0; position: relative; z-index: 1; }
.gx-hero h1 {
  font-family: var(--head); font-weight: 800; color: var(--ink);
  font-size: clamp(1.7rem, 5vw, 3rem); line-height: 1.3; margin: 14px 0 18px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.gx-hero p.lead { max-width: 620px; color: #cdd9f5; margin: 0 0 26px; }

.hero-console { display: grid; gap: clamp(22px, 4vw, 40px); grid-template-columns: 1fr auto; align-items: center; }
.hero-console__side { padding: 20px 22px; min-width: 260px; }
@media (max-width: 860px) { .hero-console { grid-template-columns: 1fr; } .hero-console__side { justify-self: stretch; } }

.lv-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #241000;
  font-family: var(--mono); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.14em; padding: 6px 16px;
  border-radius: 3px 12px 3px 12px;
  box-shadow: 0 0 24px -6px rgba(255, 138, 43, 0.9);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =====================================================================
   カード解析コンソール（商品ページ）＋ 対戦セレクタ
   ===================================================================== */
.analysis { display: grid; gap: clamp(20px, 3.5vw, 38px); grid-template-columns: minmax(190px, 290px) 1fr; align-items: start; }
@media (max-width: 720px) { .analysis { grid-template-columns: 1fr; } }

/* 大型読み取り値（測定表示） */
.readout { padding: clamp(18px, 3vw, 26px); background: linear-gradient(180deg, rgba(12, 20, 42, 0.95), rgba(9, 14, 30, 0.95)); }
.readout__label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--muted); margin: 0 0 2px; }
.readout__price {
  font-family: var(--head); font-weight: 800; line-height: 1;
  font-size: clamp(2.4rem, 8vw, 4.4rem); font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffd98a, var(--brand) 55%, #ff5a1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 138, 43, 0.55));
}
.readout__price small { font-size: 0.28em; -webkit-text-fill-color: var(--muted); margin-left: 6px; }
.readout__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.readout__meta b { color: var(--ink); font-weight: 700; }

/* 情報チップ */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  padding: 5px 12px; border-radius: 4px;
  background: rgba(120, 165, 255, 0.10); border: 1px solid var(--line-2); color: var(--ink);
}
.chip--serial { background: rgba(60, 224, 255, 0.12); border-color: rgba(60, 224, 255, 0.45); color: var(--cyan); }
.chip--rare { background: rgba(255, 138, 43, 0.14); border-color: rgba(255, 138, 43, 0.5); color: var(--accent); }
.chip--kira { background: linear-gradient(135deg, rgba(255, 80, 180, 0.25), rgba(80, 220, 255, 0.25)); border-color: rgba(255, 255, 255, 0.4); color: #fff; }

/* 在庫メーター */
.stock-meter { margin: 18px 0 6px; }
.stock-meter__head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); margin-bottom: 6px; }
.stock-meter__track { height: 12px; border-radius: 999px; background: rgba(120, 165, 255, 0.12); border: 1px solid var(--line-2); overflow: hidden; }
.stock-meter__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #9dffcb); box-shadow: 0 0 16px rgba(92, 255, 168, 0.6); }
.stock-meter__fill--empty { background: linear-gradient(90deg, var(--danger), #ff8fa3); box-shadow: 0 0 16px rgba(255, 84, 112, 0.5); }

/* 別版タイル */
.ver-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.ver-tile {
  position: relative; display: block; text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
  background: rgba(13, 20, 40, 0.8);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.ver-tile:hover { transform: translateY(-5px); border-color: var(--brand); box-shadow: 0 18px 36px -18px rgba(255, 138, 43, 0.6); }
.ver-tile img { display: block; width: 100%; height: auto; }
.ver-tile__body { padding: 8px 10px 10px; }
.ver-tile__price { font-family: var(--head); font-weight: 800; font-size: 1rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.ver-tile__var { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); margin-top: 2px; }
.ver-tile__flag {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 3px; background: rgba(7, 11, 22, 0.85); color: var(--cyan);
  border: 1px solid rgba(60, 224, 255, 0.5);
}
.ver-tile--current { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(60, 224, 255, 0.5); }
.ver-tile--current .ver-tile__flag { color: #0a1020; background: var(--cyan); border-color: var(--cyan); }
.ver-tile--sold .ver-tile__price { color: var(--danger); }
.ver-tile--sold img { filter: grayscale(0.3) brightness(0.82); }

/* ミニ価格差 */
.gap-mini {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 26px);
  flex-wrap: wrap; padding: clamp(16px, 3vw, 24px); margin-bottom: 22px;
  background: radial-gradient(ellipse at 50% 130%, rgba(255, 138, 43, 0.18), transparent 62%),
              linear-gradient(165deg, #0a1226, #16203c);
}
.gap-mini__side { text-align: center; }
.gap-mini__side img { width: clamp(72px, 12vw, 108px); border-radius: 8px; display: block; margin: 0 auto 8px; }
.gap-mini__yen { font-family: var(--head); font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(0.95rem, 2.6vw, 1.2rem); }
.gap-mini__yen--hi { color: var(--accent); }
.gap-mini__yen--lo { color: var(--green); }
.gap-mini__x {
  font-family: var(--head); font-weight: 800; font-size: clamp(1.4rem, 5vw, 2.4rem);
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 138, 43, 0.5));
}
.gap-mini__cap { flex-basis: 100%; text-align: center; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); margin: 8px 0 0; }

/* 観測ログ（履歴チャート） */
.hist { display: flex; align-items: flex-end; gap: 10px; min-height: 140px; padding: 18px 18px 12px; overflow-x: auto; }
.hist__col { flex: 0 0 auto; width: 56px; text-align: center; }
.hist__bar {
  width: 100%; border-radius: 5px 5px 0 0; min-height: 10px;
  background: linear-gradient(180deg, var(--brand), rgba(255, 138, 43, 0.25));
  box-shadow: 0 0 16px -4px rgba(255, 138, 43, 0.7);
  animation: fx-bar-up 0.7s var(--ease) both;
}
.hist__bar--sold { background: linear-gradient(180deg, var(--danger), rgba(255, 84, 112, 0.25)); box-shadow: 0 0 16px -4px rgba(255, 84, 112, 0.6); }
.hist__yen { font-family: var(--mono); font-size: 0.72rem; color: var(--ink); margin-top: 6px; }
.hist__date { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }
.hist__next { flex: 0 0 auto; width: 56px; text-align: center; opacity: 0.5; }
.hist__next .hist__bar {
  background: repeating-linear-gradient(45deg, rgba(120, 165, 255, 0.25) 0 5px, transparent 5px 10px);
  box-shadow: none; height: 28px; animation: none;
}
@keyframes fx-bar-up { from { height: 0; opacity: 0; } }

/* 対戦セレクタ */
.vs-picker { margin: 20px auto 0; max-width: 860px; }
.vs-picker__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.vs-next {
  font-family: var(--head); font-weight: 800; font-size: 0.9rem; cursor: pointer;
  padding: 10px 24px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #241000;
  box-shadow: 0 0 24px -8px rgba(255, 138, 43, 0.9);
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.vs-next:hover { transform: translateY(-2px); filter: brightness(1.08); }
.vs-count { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.vs-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.vs-thumb {
  flex: 0 0 auto; width: 58px; padding: 0; cursor: pointer; background: none;
  border: 2px solid var(--line-2); border-radius: 7px; overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.vs-thumb img { display: block; width: 100%; height: auto; }
.vs-thumb span { display: block; font-family: var(--mono); font-size: 0.54rem; color: var(--muted); padding: 2px 1px; background: rgba(7, 11, 22, 0.85); }
.vs-thumb:hover { transform: translateY(-3px); border-color: var(--cyan); }
.vs-thumb.is-active { border-color: var(--brand); box-shadow: 0 0 16px -4px rgba(255, 138, 43, 0.9); }
.vs-thumb.is-active span { color: var(--accent); }

/* 横スクロール防止: 列の少ない表は最小幅を解除 */
table.data--spec { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .hist__bar { animation: none; }
  .ver-tile:hover, .vs-thumb:hover, .vs-next:hover { transform: none; }
}

/* .card と .mecha-panel を併用したときは丸鋲メカを優先（統計カード） */
.card.mecha-panel {
  background:
    radial-gradient(circle 3.5px at 13px 13px, rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    radial-gradient(circle 3.5px at calc(100% - 13px) 13px, rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    radial-gradient(circle 3.5px at 13px calc(100% - 13px), rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    radial-gradient(circle 3.5px at calc(100% - 13px) calc(100% - 13px), rgba(160, 190, 255, 0.55) 3.5px, transparent 4.5px),
    linear-gradient(180deg, #1b2748, #131c36);
  border: 2px solid var(--bezel);
  border-radius: 18px;
}
.card.mecha-panel h3 { color: var(--ink); }

/* VSカードのリンク化 */
.vs-card__link { display: inline-block; text-decoration: none; position: relative; }
.vs-card__frame { display: inline-block; }
.vs-card__go {
  position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 8px);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; z-index: 3;
  background: rgba(7, 11, 22, 0.86); color: var(--cyan);
  border: 1px solid rgba(60, 224, 255, 0.6);
  opacity: 0; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  pointer-events: none;
}
.vs-card__link:hover .vs-card__go,
.vs-card__link:focus-visible .vs-card__go { opacity: 1; transform: translate(-50%, 0); }
.vs-card__link:hover .vs-card__frame { filter: brightness(1.08); }
.vs-card__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 14px; }
.vs-hint {
  text-align: center; font-family: var(--mono); font-size: 0.76rem;
  color: var(--muted); margin: 8px 0 0;
}
@media (hover: none) { .vs-card__go { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- 弾カード（弾別インデックス） ---------- */
.set-card { position: relative; text-decoration: none; overflow: hidden; padding: 22px 20px; }
.set-card__face {
  position: absolute; right: -18px; top: -10px; width: 96px; opacity: 0.16;
  transform: rotate(8deg); pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.set-card:hover .set-card__face { opacity: 0.34; transform: rotate(4deg) scale(1.06); }
.set-card h3 { position: relative; z-index: 1; }
.set-card p { position: relative; z-index: 1; font-family: var(--mono); font-size: 0.82rem; }

/* ---------- 記事（コラム） ---------- */
.article { max-width: 760px; }
.article h2 {
  font-family: var(--head); font-size: clamp(1.2rem, 3vw, 1.55rem);
  margin: 2.4em 0 0.7em; padding-left: 14px; position: relative; color: var(--ink);
}
.article h2::before {
  content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 5px;
  border-radius: 3px; background: linear-gradient(180deg, var(--brand), var(--accent));
  box-shadow: 0 0 14px rgba(255, 138, 43, 0.6);
}
.article h3 { font-family: var(--head); font-size: 1.06rem; margin: 1.9em 0 0.5em; color: var(--accent); }
.article p { margin: 0 0 1.3em; color: #cfdaf6; }
.article ul, .article ol { margin: 0 0 1.4em; padding-left: 1.35em; color: #cfdaf6; }
.article li { margin: 0.5em 0; }
.article strong { color: var(--ink); }
.article > p:first-child { font-size: 1.06rem; }
.w-block { margin: 1.8em 0 2em; }

/* 記事内: カード1枚パネル */
.w-card { display: flex; gap: 16px; align-items: center; padding: 16px; text-decoration: none; }
.w-card img { width: 84px; border-radius: 8px; flex: 0 0 auto; }
.w-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.w-card__name { font-family: var(--head); font-size: 1rem; color: var(--ink); }
.w-card__price { font-family: var(--head); font-weight: 800; font-size: 1.5rem; color: var(--accent); }
.w-card__meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.w-card:hover { border-color: var(--brand); }

/* 記事内: 弾パネル */
.w-set { display: block; padding: 18px 20px; text-decoration: none; }
.w-set__code { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); letter-spacing: 0.1em; }
.w-set__name { display: block; font-family: var(--head); font-weight: 800; font-size: 1.1rem; color: var(--ink); margin: 2px 0 6px; }
.w-set__nums { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.w-set__nums b { color: var(--ink); }
.w-set__go { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 0.76rem; color: var(--cyan); }
.w-set:hover { border-color: var(--brand); }

/* 購入先への導線（{{shop:…}}）
   記事の結論として自然に置ける場所にだけ入れる部品。
   派手にせず、出典ブロックと同じ「事実の続き」に見える強さに留める。 */
.w-shop { padding: 18px 20px; }
.w-shop__lead {
  margin: 0 0 6px; font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.12em; color: var(--accent);
}
.w-shop__note { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.85; color: var(--ink); }
.w-shop__go { margin: 0 0 10px; }
.w-shop__go a {
  display: inline-block; text-decoration: none;
  font-family: var(--head); font-weight: 800; font-size: 0.95rem;
  color: var(--bg); background: var(--brand);
  border-radius: 4px; padding: 11px 20px;
  transition: 0.18s var(--ease);
}
.w-shop__go a:hover { background: var(--accent); transform: translateY(-2px); }
.w-shop__go a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.w-shop__fine { margin: 0; font-size: 0.76rem; line-height: 1.75; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .w-shop__go a:hover { transform: none; } }

/* 記事内のミニ価格差はリンクにする */
.gap-mini__side { text-decoration: none; display: block; }
.gap-mini__side:hover img { transform: translateY(-3px); }
.gap-mini__side img { transition: transform 0.2s var(--ease); }
.gap-mini__side small { color: var(--muted); }

/* =====================================================================
   記事カード＝観測記録ドシエ（FIELD REPORT）
   ===================================================================== */

/* リンクとして使う面は下線を出さない（カード全体がリンクのもの） */
a.card, a.card:hover, a.ver-tile, a.ver-tile:hover, a.w-card, a.w-card:hover,
a.w-set, a.w-set:hover, a.set-card, a.set-card:hover,
a.gap-mini__side, a.gap-mini__side:hover, a.dossier, a.dossier:hover,
.vs-card__link, .brand, .nav a, .footer__col a, .stepnav a { text-decoration: none; }

.dossier-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.dossier {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(26, 38, 71, 0.94), rgba(14, 21, 43, 0.96));
  padding: 22px 22px 20px;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
  isolation: isolate;
}
/* 上辺の色帯（カテゴリ別） */
.dossier::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.dossier--buy::before   { background: linear-gradient(90deg, #3ce0ff, #7dffb0); }
.dossier--market::before{ background: linear-gradient(90deg, #ff5470, #ffc44d); }
/* 角のHUDブラケット */
.dossier::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 16px; height: 16px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  opacity: 0.5; transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.dossier:hover {
  transform: translateY(-5px); border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(255, 138, 43, 0.35), 0 26px 52px -24px rgba(255, 138, 43, 0.42);
}
.dossier:hover::after { opacity: 1; transform: translate(2px, 2px); }
.dossier:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 背景に沈むカード絵 */
.dossier__art {
  position: absolute; right: -26px; top: -14px; width: 148px; z-index: 0;
  opacity: 0.13; transform: rotate(7deg);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 78%);
          mask-image: linear-gradient(200deg, #000 20%, transparent 78%);
}
.dossier__art img { width: 100%; display: block; border-radius: 8px; }
.dossier:hover .dossier__art { opacity: 0.3; transform: rotate(3deg) scale(1.07); }

/* 通し番号 */
.dossier__no {
  position: relative; z-index: 1; display: inline-block;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  color: var(--muted); margin-bottom: 12px;
}
.dossier__body { position: relative; z-index: 1; display: block; }

.dossier__cat {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  padding: 4px 11px; border-radius: 3px; margin-bottom: 10px;
  background: rgba(255, 138, 43, 0.14); color: var(--accent);
  border: 1px solid rgba(255, 138, 43, 0.42);
}
.dossier--buy .dossier__cat    { background: rgba(60, 224, 255, 0.13); color: var(--cyan); border-color: rgba(60, 224, 255, 0.45); }
.dossier--market .dossier__cat { background: rgba(255, 84, 112, 0.13); color: #ff9db0; border-color: rgba(255, 84, 112, 0.45); }

.dossier__title {
  display: block; font-family: var(--head); font-weight: 800;
  font-size: 1.12rem; line-height: 1.5; color: var(--ink); margin-bottom: 10px;
  transition: color 0.25s var(--ease);
}
.dossier:hover .dossier__title { color: var(--accent); }
.dossier__lede {
  display: block; font-size: 0.9rem; line-height: 1.85; color: var(--muted);
  margin-bottom: 18px;
}
.dossier__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px dashed rgba(120, 165, 255, 0.24);
}
.dossier__date { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; }
.dossier__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--brand);
}
.dossier__go i {
  width: 16px; height: 2px; background: currentColor; position: relative;
  transition: width 0.25s var(--ease);
}
.dossier__go i::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.dossier:hover .dossier__go i { width: 26px; }

/* ホバーで走る走査光 */
.dossier__scan {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(60, 224, 255, 0.16) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
}
.dossier:hover .dossier__scan { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  .dossier, .dossier:hover, .dossier__art, .dossier:hover .dossier__art,
  .dossier__scan, .dossier:hover .dossier__scan { transform: none; transition: none; }
}

/* =====================================================================
   記事本文ページ（読み進みバー・ヒーロー・本文の演出）
   ===================================================================== */

/* 画面上端の読み進みバー */
.readbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120;
  background: rgba(120, 165, 255, 0.14); pointer-events: none;
}
.readbar__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--cyan));
  box-shadow: 0 0 12px rgba(255, 138, 43, 0.8);
  transition: width 0.12s linear;
}

/* 記事ヒーロー */
.article-hero { position: relative; overflow: hidden; }
.article-hero__art {
  position: absolute; right: -30px; top: -20px; width: clamp(180px, 26vw, 320px); z-index: 0;
  opacity: 0.17; transform: rotate(6deg); pointer-events: none;
  -webkit-mask-image: linear-gradient(210deg, #000 15%, transparent 76%);
          mask-image: linear-gradient(210deg, #000 15%, transparent 76%);
}
.article-hero__art img { width: 100%; display: block; border-radius: 12px; }
.article-hero__no {
  display: block; font-size: 0.7rem; letter-spacing: 0.18em;
  color: var(--muted); margin-bottom: 10px;
}
.article-hero__meta {
  color: var(--muted); font-size: 0.78rem; margin: 18px 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px;
}
.article-hero__meta strong { color: var(--accent); font-weight: 700; }

/* 本文: 導入の一文を大きく */
.article > p:first-of-type {
  font-size: 1.1rem; color: var(--ink); line-height: 2;
  padding-left: 16px; border-left: 2px solid rgba(255, 138, 43, 0.45);
}

/* 見出しに番号のような刻み */
.article h2 { scroll-margin-top: 84px; }
.article h3 {
  padding-left: 15px; position: relative;
}
.article h3::before {
  content: "▹"; position: absolute; left: 0; color: var(--brand); font-size: 0.9em;
}

/* 強調の下に薄いマーカー */
.article p strong {
  background: linear-gradient(180deg, transparent 62%, rgba(255, 138, 43, 0.22) 62%);
  padding: 0 2px;
}

/* 箇条書きのマーカーを計器風に */
.article ul { list-style: none; padding-left: 0; }
.article ul > li { position: relative; padding-left: 22px; }
.article ul > li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 8px; height: 8px; border-radius: 2px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 0 8px rgba(255, 138, 43, 0.6);
}
.article ol { list-style: none; padding-left: 0; counter-reset: n; }
.article ol > li { position: relative; padding-left: 34px; counter-increment: n; }
.article ol > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0.05em;
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--accent);
}

/* 記事内リンクは本文中だけ下線を残す（可読性） */
.article p a, .article li a { color: var(--cyan); text-decoration: underline;
  text-decoration-color: rgba(60, 224, 255, 0.45); text-underline-offset: 3px; }
.article p a:hover, .article li a:hover { text-decoration-color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .readbar__fill { transition: none; }
}