/* =====================================================================
   トレキャッチ 演出エンジン FX（toreque-deck トライアル演出の移植）
   系譜: tqd-trial-foil / result-card-arrive / callout-slam / impact-flash /
         speed-lines / camera-target-lock → torecatch流に再構成
   ===================================================================== */

/* ---------- VS ステージ（価格差バトル） ---------- */
.vs-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(10px, 3vw, 30px);
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 34px);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(232, 89, 12, 0.18), transparent 60%),
    linear-gradient(165deg, #1c1430, #33204e 55%, #4a2b5e);
  border-radius: var(--radius-l);
  overflow: hidden;
  color: #fff;
}
.vs-stage::before { /* 集中線（speed-lines の静的版。スラム時に発火） */
  content: "";
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 255, 255, 0.0) 0deg 8deg,
    rgba(255, 255, 255, 0.05) 8deg 9deg);
  opacity: 0;
  pointer-events: none;
}
.vs-stage.is-slam::before { animation: fx-speed-lines 0.7s ease-out both; }

/* カード */
.vs-card { text-align: center; min-width: 0; }
.vs-card__frame {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.65);
  will-change: transform;
}
/* JS有効時のみ演出前を非表示に（JS無効でも内容は見える = プログレッシブエンハンスメント） */
html.fx-ready .vs-stage:not(.is-play) .vs-card__frame {
  transform: translateY(40px) scale(0.85);
  opacity: 0;
}
.vs-card__frame img { display: block; width: clamp(120px, 22vw, 210px); height: auto; }
.vs-stage.is-play .vs-card--kira .vs-card__frame {
  animation: fx-card-arrive-l 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.vs-stage.is-play .vs-card--normal .vs-card__frame {
  animation: fx-card-arrive-r 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

/* ホロ箔（tqd-trial-foil 直系） */
.foil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 20%, rgba(255, 80, 180, 0.35) 34%, rgba(80, 220, 255, 0.4) 46%,
    rgba(255, 230, 90, 0.38) 58%, rgba(120, 255, 160, 0.32) 70%, transparent 84%);
  background-size: 260% 260%;
  mix-blend-mode: color-dodge;
  animation: fx-foil 4.5s ease-in-out infinite;
}
.foil--sweep { /* 通常カード用の控えめな艶 */
  background: linear-gradient(115deg, transparent 30%,
    rgba(255, 255, 255, 0.28) 48%, transparent 66%);
  background-size: 260% 260%;
  mix-blend-mode: screen;
  animation-duration: 6s;
}

.vs-price {
  font-family: var(--head); font-weight: 800;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  margin-top: 12px; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.vs-price--kira { color: #ffd23e; text-shadow: 0 2px 14px rgba(255, 146, 20, 0.55); }
.vs-price--normal { color: #7dffb0; text-shadow: 0 2px 14px rgba(18, 183, 106, 0.45); }
.vs-tag { display: block; margin-top: 4px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); }

/* 中央: VS と倍率スラム */
.vs-center { text-align: center; position: relative; z-index: 1; }
.vs-x {
  display: block; font-family: var(--head); font-weight: 800; font-style: italic;
  font-size: clamp(1.3rem, 4vw, 2rem); color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.1em;
}
.vs-mult {
  font-family: var(--head); font-weight: 800;
  font-size: clamp(1.9rem, 7vw, 3.6rem); line-height: 1.1;
  background: linear-gradient(135deg, #ff9214, #ffd23e 60%, #fff3c4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255, 146, 20, 0.5));
}
html.fx-ready .vs-stage:not(.is-slam) .vs-mult { transform: scale(0); }
.vs-stage.is-slam .vs-mult { animation: fx-slam 0.55s cubic-bezier(0.2, 1.6, 0.35, 1) both; }
.vs-stage.is-slam { animation: fx-shake 0.45s 0.12s both; }
.vs-flash { /* 衝撃フラッシュ（tqd-impact-flash） */
  position: absolute; inset: -40% -300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 55%);
  opacity: 0; pointer-events: none;
}
.vs-stage.is-slam .vs-flash { animation: fx-flash 0.5s ease-out both; }
.vs-mult small { font-size: 0.4em; -webkit-text-fill-color: rgba(255,255,255,0.85); }

/* パンチライン */
.vs-punch {
  text-align: center; margin: 20px auto 0; max-width: 860px;
  font-family: var(--head); font-weight: 800;
  font-size: clamp(1.05rem, 3vw, 1.4rem); color: var(--brand-deep);
}
html.fx-ready .vs-stage-wrap:not(.is-done) .vs-punch { opacity: 0; transform: translateY(10px); }
.vs-stage-wrap.is-done .vs-punch { animation: fx-rise 0.5s 0.5s var(--ease) both; }

/* ---------- テーブルのカードサムネイル ---------- */
.thumb-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.thumb-cell img {
  width: 34px; height: auto; border-radius: 4px; flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.3);
  transition: transform 0.22s var(--ease);
}
tr:hover .thumb-cell img { transform: scale(2.1) rotate(-2deg); }

/* ---------- カードページの大画像演出 ---------- */
.card-hero { perspective: 900px; display: inline-block; }
.card-hero__inner {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px -18px rgba(20, 30, 60, 0.45);
  transition: transform 0.18s ease-out, box-shadow 0.3s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.card-hero__inner img { display: block; width: 100%; }
.card-hero:hover .card-hero__inner { box-shadow: 0 30px 70px -20px rgba(20, 30, 60, 0.6); }

/* ---------- カウントアップ数字 ---------- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---------- keyframes（tqd系の再構成） ---------- */
@keyframes fx-card-arrive-l {
  from { transform: translate(-70px, 40px) rotate(-10deg) scale(0.8); opacity: 0; }
  to   { transform: translate(0, 0) rotate(-3deg) scale(1); opacity: 1; }
}
@keyframes fx-card-arrive-r {
  from { transform: translate(70px, 40px) rotate(10deg) scale(0.8); opacity: 0; }
  to   { transform: translate(0, 0) rotate(3deg) scale(1); opacity: 1; }
}
@keyframes fx-foil {
  0%, 100% { background-position: 0% 0%; opacity: 0.85; }
  50% { background-position: 100% 100%; opacity: 1; }
}
@keyframes fx-slam {
  0% { transform: scale(0) rotate(-6deg); }
  60% { transform: scale(1.25) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes fx-flash {
  0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fx-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}
@keyframes fx-speed-lines {
  0% { opacity: 0; transform: scale(0.9) rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15) rotate(6deg); }
}
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx-ready .vs-stage:not(.is-play) .vs-card__frame { transform: none; opacity: 1; }
  html.fx-ready .vs-stage:not(.is-slam) .vs-mult { transform: none; }
  html.fx-ready .vs-stage-wrap:not(.is-done) .vs-punch { opacity: 1; transform: none; }
  .vs-stage.is-play .vs-card__frame,
  .vs-stage.is-slam .vs-mult,
  .vs-stage.is-slam,
  .vs-stage.is-slam .vs-flash,
  .vs-stage.is-slam::before,
  .vs-stage-wrap.is-done .vs-punch,
  .foil { animation: none; }
  .vs-mult { transform: none; }
  .vs-punch { opacity: 1; transform: none; }
  tr:hover .thumb-cell img { transform: none; }
}
@media (max-width: 560px) {
  .vs-stage { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 16px 10px; }
}

/* =====================================================================
   データ戦略室モジュール（索敵HUD / レーダー / 丸メカパネル）
   ===================================================================== */

/* ---------- 丸メカパネル（リベット・ベゼル・状態LED） ---------- */
.mecha-panel {
  position: relative;
  background:
    radial-gradient(circle 4px at 14px 14px, #b7c4de 4px, transparent 5px),
    radial-gradient(circle 4px at calc(100% - 14px) 14px, #b7c4de 4px, transparent 5px),
    radial-gradient(circle 4px at 14px calc(100% - 14px), #b7c4de 4px, transparent 5px),
    radial-gradient(circle 4px at calc(100% - 14px) calc(100% - 14px), #b7c4de 4px, transparent 5px),
    linear-gradient(180deg, #ffffff, #f1f5fd);
  border: 2px solid #c9d4ea;
  border-radius: 22px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 10px 26px -14px rgba(22, 37, 92, 0.35);
}
.mecha-led {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #12b76a; box-shadow: 0 0 8px rgba(18, 183, 106, 0.9);
  animation: fx-led 1.6s ease-in-out infinite;
  vertical-align: middle; margin-right: 7px;
}
.mecha-led--amber { background: #ff9214; box-shadow: 0 0 8px rgba(255, 146, 20, 0.9); }
@keyframes fx-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- 円形レーダー（走査・輝点） ---------- */
.radar {
  position: relative; width: clamp(110px, 16vw, 150px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 22%, rgba(125, 255, 176, 0.22) 22% 23%),
    linear-gradient(180deg, #0d2b1c, #123a26);
  border: 4px solid #24466b;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55), 0 6px 18px -8px rgba(22, 37, 92, 0.5),
              inset 0 2px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
  flex: 0 0 auto;
}
.radar::before, .radar::after { /* 十字線 */
  content: ""; position: absolute; background: rgba(125, 255, 176, 0.25);
}
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(125, 255, 176, 0.55), rgba(125, 255, 176, 0.12) 55deg, transparent 90deg);
  animation: fx-radar 3.2s linear infinite;
}
.radar__blip {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  left: var(--x, 50%); top: var(--y, 50%);
  background: #aeffd0; box-shadow: 0 0 10px rgba(125, 255, 176, 1);
  animation: fx-blip 3.2s ease-out infinite; animation-delay: var(--d, 0s);
  opacity: 0;
}
@keyframes fx-radar { to { transform: rotate(360deg); } }
@keyframes fx-blip { 0% { opacity: 0; } 6% { opacity: 1; } 45% { opacity: 0.25; } 100% { opacity: 0; } }

/* ---------- データルーム帯 ---------- */
.dataroom {
  display: flex; gap: clamp(16px, 3vw, 30px); align-items: center;
  padding: clamp(16px, 3vw, 26px) clamp(18px, 3.4vw, 30px);
  margin-bottom: 26px;
}
.dataroom__read { min-width: 0; }
.scout-line {
  font-family: Consolas, "Courier New", monospace;
  color: #0f7a4d; font-weight: 700; letter-spacing: 0.04em;
  margin: 0 0 6px; font-size: clamp(0.85rem, 2.4vw, 1.02rem);
}
.scout-line--sub { color: #5d6f63; font-weight: 400; font-size: 0.82rem; }
.scout-line .cursor { display: inline-block; width: 0.55em; height: 1em;
  background: #0f7a4d; vertical-align: text-bottom; margin-left: 2px;
  animation: fx-led 1s steps(2, start) infinite; }

/* ---------- 索敵HUD（測定演出） ---------- */
.scout { position: relative; }
.scout__beam {
  position: absolute; left: -4%; right: -4%; height: 30%; top: -35%;
  background: linear-gradient(180deg, transparent, rgba(125, 255, 176, 0.4) 45%,
                              rgba(125, 255, 176, 0.75) 50%, rgba(125, 255, 176, 0.4) 55%, transparent);
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
}
.scout.is-scanning .scout__beam { animation: fx-scanbeam 1.05s ease-in-out both; }
.reticle { position: absolute; inset: 4%; opacity: 0; pointer-events: none; }
.reticle i, .reticle::before, .reticle::after {
  content: ""; position: absolute; width: 24px; height: 24px;
  border: 3px solid #7dffb0; filter: drop-shadow(0 0 6px rgba(125, 255, 176, 0.9));
}
.reticle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.reticle::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.reticle i:first-child { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.reticle i:last-child { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.scout.is-lock .reticle, .vs-stage.is-lock .reticle { animation: fx-lock 0.38s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.scout__readout {
  margin-top: 10px; font-family: Consolas, "Courier New", monospace;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em;
  color: #0f7a4d; min-height: 1.5em;
}
.scout__readout .r-scan, .scout__readout .r-done { display: none; }
.scout.is-scanning .scout__readout .r-scan { display: inline; }
.scout.is-done .scout__readout .r-scan { display: none; }
.scout.is-done .scout__readout .r-done { display: inline; animation: fx-rise 0.4s var(--ease) both; }
@keyframes fx-scanbeam { from { top: -35%; opacity: 1; } to { top: 105%; opacity: 1; } }
@keyframes fx-lock {
  from { opacity: 0; transform: scale(1.45); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .radar__sweep, .radar__blip, .mecha-led, .scout-line .cursor { animation: none; }
  .radar__blip { opacity: 0.7; }
  .scout.is-scanning .scout__beam,
  .scout.is-lock .reticle, .vs-stage.is-lock .reticle,
  .scout.is-done .scout__readout .r-done { animation: none; }
  .reticle { opacity: 1; }
}