/* ============================================================
   YOSSY式 トレーダー適性研究所 — components.css
   役割：ページ横断で再利用する部品
   （ボタン／HUD背景／フォイルパネル／バッジ／メダリオン／プログレスバー）
   ============================================================ */

/* ---------------------------------------------
   1. Buttons
--------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
  transition: transform var(--dur-fast) var(--ease-lab),
              box-shadow var(--dur-fast) var(--ease-lab),
              background var(--dur-fast) var(--ease-lab),
              color var(--dur-fast) var(--ease-lab);
}

.btn:active {
  transform: scale(0.96);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-lab);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

/* Large variant — 最終CTAなど「決断の一手」にだけ使う */
.btn--lg {
  padding: var(--space-5) var(--space-7);
  font-size: var(--fs-h4);
}

.btn--primary {
  background: linear-gradient(120deg, var(--color-gold-bright), var(--color-gold) 55%, var(--color-gold-deep));
  color: #16130A;
  box-shadow: 0 0 0 1px rgba(201, 170, 94, 0.4), 0 10px 30px -12px rgba(201, 170, 94, 0.5);
}

.btn--primary:hover {
  box-shadow: 0 0 0 1px var(--color-neon), var(--glow-neon-md), 0 10px 30px -10px rgba(201, 170, 94, 0.4);
}

.btn--ghost {
  border: 1px solid var(--color-card-border);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.02);
}

.btn--ghost:hover {
  border-color: var(--color-neon);
  box-shadow: var(--glow-neon-sm);
  color: var(--color-neon);
}

/* Small secondary button — used for "back" style navigation */
.btn--text {
  padding: var(--space-2) var(--space-1);
  font-size: var(--fs-body-s);
  color: var(--color-text-faint);
}

.btn--text:hover {
  color: var(--color-neon);
}

/* ---------------------------------------------
   2. Lab Field — reusable HUD/analysis background
   Drop <div class="lab-field"> (+ children below) into any
   position:relative; isolation:isolate container (hero,
   question header, loading screen, ...) for the quiet
   "research lab" backdrop: grid, scanline, radar, HUD corners.
--------------------------------------------- */
.lab-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.lab-field__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(201, 170, 94, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 170, 94, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 55% at 50% 38%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 38%, #000 0%, transparent 72%);
}

.lab-field__scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-neon-soft) 25%, var(--color-neon) 50%, var(--color-neon-soft) 75%, transparent);
  box-shadow: 0 0 14px 1px var(--color-neon-soft);
  /* 「動いている」ことだけ伝われば十分なので、遅く・薄く走らせる */
  animation: scan-sweep 14s ease-in-out infinite;
  opacity: 0.2;
}

@keyframes scan-sweep {
  0%   { top: 8%;  opacity: 0; }
  8%   { opacity: 0.2; }
  50%  { top: 92%; opacity: 0.2; }
  58%  { opacity: 0; }
  100% { top: 92%; opacity: 0; }
}

/* HUD corner brackets + micro readout labels — quiet lab-instrument detail */
.lab-field__hud {
  position: absolute;
  inset: 26px;
  opacity: 0.5;
}

.lab-field__hud-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-gold-soft);
  opacity: 0.4;
}

.lab-field__hud-corner--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.lab-field__hud-corner--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.lab-field__hud-corner--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.lab-field__hud-corner--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.lab-field__hud-label {
  position: absolute;
  font-family: var(--font-en);
  font-size: var(--fs-label-s);
  letter-spacing: var(--tracking-en);
  color: var(--color-neon);
  opacity: 0.28;
}

.lab-field__hud-label--tl { top: 6px; left: 28px; }
.lab-field__hud-label--br { bottom: 6px; right: 28px; }

@media (max-width: 700px) {
  .lab-field__hud-label { display: none; }
}

/* Faint radar / hologram ring — quiet analysis-device detail */
.lab-field__radar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(640px, 90vw);
  height: min(640px, 90vw);
  transform: translate(-50%, -50%);
  opacity: 0.04;
}

.lab-field__radar-sweep {
  transform-origin: 300px 300px;
  animation: radar-spin 14s linear infinite;
}

.lab-field__radar-sweep path {
  opacity: 0.6;
}

@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------------------------------------------
   3. Panel — premium foil card shell
   The decorative "trading card" shell used by the researcher
   cards on the home page and the question card. Combine with
   a content block's own BEM classes, e.g.:
   <li class="researcher-card panel panel--foil">
   Accepts optional --accent-a / --accent-b custom properties
   for the gold/neon foil mix; falls back to brand defaults.
--------------------------------------------- */
.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--color-card);
  box-shadow: var(--shadow-inset-hairline), var(--shadow-card);
}

.panel--foil {
  border: 1px solid transparent;
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%),
    linear-gradient(200deg, rgba(0, 0, 0, 0.35), transparent 60%),
    linear-gradient(180deg, var(--color-card), var(--color-card)),
    linear-gradient(135deg, var(--accent-a, var(--color-gold)) 0%, rgba(255, 255, 255, 0.08) 42%, var(--accent-b, var(--color-neon)) 100%);
  background-origin: padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
  transition: transform var(--dur-fast) var(--ease-lab),
              box-shadow var(--dur-fast) var(--ease-lab);
}

/* Corner bracket frame — thin HUD-style marks, like a premium membership card */
.panel--foil::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent-a, var(--color-gold)), var(--accent-a, var(--color-gold))),
    linear-gradient(var(--accent-a, var(--color-gold)), var(--accent-a, var(--color-gold))),
    linear-gradient(var(--accent-a, var(--color-gold)), var(--accent-a, var(--color-gold))),
    linear-gradient(var(--accent-a, var(--color-gold)), var(--accent-a, var(--color-gold))),
    linear-gradient(var(--accent-b, var(--color-neon)), var(--accent-b, var(--color-neon))),
    linear-gradient(var(--accent-b, var(--color-neon)), var(--accent-b, var(--color-neon))),
    linear-gradient(var(--accent-b, var(--color-neon)), var(--accent-b, var(--color-neon))),
    linear-gradient(var(--accent-b, var(--color-neon)), var(--accent-b, var(--color-neon)));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  /* 通常時はごく薄く。ホバーで初めて枠がはっきり立ち上がる */
  opacity: 0.28;
  transition: opacity var(--dur-fast) var(--ease-lab);
}

/* Holographic shine sweep — subtle premium-card light pass on hover */
.panel--foil::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 55%;
  height: 220%;
  background: linear-gradient(75deg, transparent 30%, rgba(255, 255, 255, 0.10) 48%, rgba(255, 255, 255, 0.02) 60%, transparent 72%);
  transform: translateX(-30%);
  transition: transform var(--dur-slow) var(--ease-lab);
  mix-blend-mode: screen;
  pointer-events: none;
}

.panel--foil:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-inset-hairline), var(--shadow-card-hover), var(--glow-neon-md);
}

.panel--foil:hover::before {
  opacity: 1;
}

.panel--foil:hover::after {
  transform: translateX(280%);
}

/* Static variant — same foil frame, no hover lift (for non-interactive panels) */
.panel--static {
  transition: none;
}

.panel--static:hover {
  transform: none;
}

/* ---------------------------------------------
   4. Badge — small bordered label chip
   Used for card numbers ("No.01"), progress counters
   ("Q 12 / 33"), and other short HUD-style tags.
--------------------------------------------- */
.badge {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  padding: 3px 9px;
  border: 1px solid rgba(201, 170, 94, 0.32);
  border-radius: 4px;
  background: rgba(201, 170, 94, 0.06);
}

/* ---------------------------------------------
   5. Medallion — circular ring-framed portrait/icon slot
   Default size 92px; override with --medallion-size on the
   element itself for other contexts.
--------------------------------------------- */
.medallion {
  position: relative;
  width: var(--medallion-size, 92px);
  height: var(--medallion-size, 92px);
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.06), transparent 62%), var(--color-bg-deep);
  /* 通常時はリングのみ。発光はホバー時に立ち上げる */
  box-shadow: 0 0 0 1px var(--accent-a, var(--color-gold)) inset,
              0 0 0 4px rgba(11, 13, 18, 0.6),
              var(--glow-gold-rest);
  transition: box-shadow var(--dur-fast) var(--ease-lab);
}

.medallion__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
}

.panel--foil:hover .medallion {
  box-shadow: 0 0 0 1px var(--accent-a, var(--color-gold)) inset,
              0 0 0 4px rgba(11, 13, 18, 0.6),
              0 0 26px -4px var(--accent-b, var(--color-neon));
}

/* ---------------------------------------------
   6. Progress Bar
   Used on the question flow; the gradient fill and glow
   reuse the same gold → neon language as the rest of the site.
--------------------------------------------- */
.progress-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-bar__track {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.progress-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-gold), var(--color-neon));
  box-shadow: var(--glow-neon-sm);
  transition: width var(--dur-mid) var(--ease-lab);
}

.progress-bar__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-en);
}

.progress-bar__count {
  font-size: var(--fs-body-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.progress-bar__count-current {
  color: var(--color-neon);
  text-shadow: var(--glow-neon-sm);
}

/* 残量の表示。33問は長いので、あと何問かと何％かの両方を見せる。
   「残りN問」は具体的な量、「％」は全体の中の位置を伝える。 */
.progress-bar__state {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.progress-bar__remaining {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}

/* ％は計測値なのでネオンブルー。Loadingの解析率と同じ役割。 */
.progress-bar__percent {
  font-size: var(--fs-body-s);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-neon);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------
   7. Step List — 番号付きの縦積みリスト
   「受け取る3つのもの」「診断の流れ」など、
   順序のある短い説明をまとめるための共通部品。
   将来 result.html の「解析ステップ」でもそのまま使える。

   構造:
   <ol class="step-list">
     <li class="step-list__item">
       <span class="step-list__index">01</span>
       <div class="step-list__body">
         <h3 class="step-list__title">…</h3>
         <p class="step-list__text">…</p>
       </div>
     </li>
   </ol>
--------------------------------------------- */
.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.step-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid rgba(201, 170, 94, 0.12);
  transition: background var(--dur-fast) var(--ease-lab);
}

/* 最後の項目にだけ下線を足して、リスト全体を1枚の面として閉じる */
.step-list__item:last-child {
  border-bottom: 1px solid rgba(201, 170, 94, 0.12);
}

.step-list__item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.step-list__index {
  font-family: var(--font-en);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-lab),
              color var(--dur-fast) var(--ease-lab);
}

.step-list__item:hover .step-list__index {
  opacity: 1;
  color: var(--color-neon);
}

.step-list__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-ja);
  margin-bottom: var(--space-2);
}

.step-list__text {
  font-size: var(--fs-body-s);
  line-height: 2;
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .step-list__item {
    grid-template-columns: 40px 1fr;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-2);
  }
}

/* ---------------------------------------------
   8. Talent ID — あなただけの解析記録番号
   Loading / Result / PDF で同じ見た目のまま使う。
   値は diagnosis-engine.js が発行する（例: 2026-001245）。

   構造:
   <div class="talent-id">
     <p class="talent-id__label">TALENT ID</p>
     <p class="talent-id__value">2026-001245</p>
     <p class="talent-id__note">…</p>
   </div>
--------------------------------------------- */
.talent-id {
  text-align: center;
}

.talent-id__label {
  font-family: var(--font-en);
  font-size: var(--fs-label-s);
  font-weight: 600;
  letter-spacing: var(--tracking-en-wide);
  color: var(--color-gold);
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.talent-id__value {
  font-family: var(--font-en);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-text);
  /* 桁が確定していく感じを出すため、等幅で揃える */
  font-variant-numeric: tabular-nums;
}

.talent-id__note {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}

/* ---------------------------------------------
   9. HUD Ring — 円形の解析メーター
   中央に数値、外周に進捗リング。
   進捗は JS から --hud-progress（0〜1）を書き換えて動かす。
   Result ページのスコアリングにもそのまま流用できる。

   サイズは --hud-ring-size で外から指定する。

   構造:
   <div class="hud-ring" style="--hud-ring-size:280px">
     <svg class="hud-ring__svg" viewBox="0 0 240 240">…</svg>
     <div class="hud-ring__center">…</div>
   </div>
--------------------------------------------- */
.hud-ring {
  position: relative;
  width: var(--hud-ring-size, 280px);
  height: var(--hud-ring-size, 280px);
  flex-shrink: 0;
}

.hud-ring__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 外周の目盛りリング。ごくゆっくり流れて「動いている」ことだけを伝える */
.hud-ring__ticks {
  transform-origin: 120px 120px;
  animation: hud-drift 90s linear infinite;
  opacity: 0.35;
}

@keyframes hud-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hud-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 2;
}

/* 進捗リング。12時から時計回りに満ちる。
   stroke-dashoffset は --hud-circumference と --hud-progress から算出する。 */
.hud-ring__progress {
  fill: none;
  stroke: url(#hudProgressGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--hud-circumference, 603.19);
  stroke-dashoffset: calc(var(--hud-circumference, 603.19) * (1 - var(--hud-progress, 0)));
  /* 12時の位置から時計回りに満ちるように起点を回す */
  transform: rotate(-90deg);
  transform-origin: 120px 120px;
}

.hud-ring__guide {
  fill: none;
  stroke: var(--color-gold);
  opacity: 0.12;
}

.hud-ring__cross {
  stroke: var(--color-gold);
  stroke-width: 0.6;
  opacity: 0.1;
}

/* 中央の数値エリア */
.hud-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: opacity var(--dur-mid) var(--ease-lab),
              transform var(--dur-mid) var(--ease-lab);
}

.hud-ring__value {
  font-family: var(--font-en);
  font-size: clamp(34px, 9vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.hud-ring__unit {
  font-size: 0.45em;
  margin-left: 2px;
  color: var(--color-text-muted);
}

.hud-ring__caption {
  font-family: var(--font-en);
  font-size: var(--fs-label-s);
  letter-spacing: var(--tracking-en-wide);
  color: var(--color-gold);
  opacity: 0.7;
}

/* ---------------------------------------------
   10. Analysis Log — 解析ログの1行表示
   JS が文言を差し替えるとき、いったん .is-hidden を付けて
   フェードアウト → 文言差し替え → クラス解除 の順で動かす。
--------------------------------------------- */
.analysis-log {
  min-height: 1.9em;
  text-align: center;
  font-size: var(--fs-body-s);
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease-lab),
              transform var(--dur-fast) var(--ease-lab);
}

.analysis-log.is-hidden {
  opacity: 0;
  transform: translateY(6px);
}

/* ---------------------------------------------
   11. Radar Chart — 9軸レーダー
   描画は js/radar-chart.js が担当し、ここは見た目だけを持つ。
   SVGなので、そのまま PDF にも流用できる。
--------------------------------------------- */
.radar-chart {
  position: relative;
  width: 100%;
  max-width: var(--radar-size, 340px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.radar-chart__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 目盛りリング。証拠の背景なので、限界まで薄くする */
.radar-chart__ring {
  fill: none;
  stroke: rgba(201, 170, 94, 0.14);
  stroke-width: 1;
}

.radar-chart__axis {
  stroke: rgba(201, 170, 94, 0.1);
  stroke-width: 1;
}

/* データの面。輪郭が描かれたあとに、遅れて満ちる */
.radar-chart__area {
  fill: var(--color-gold);
  opacity: 0;
  transition: opacity 0.9s var(--ease-lab) 0.9s;
}

.radar-chart__svg.is-drawn .radar-chart__area {
  opacity: 0.1;
}

.radar-chart__outline {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* 各軸の頂点。スコアがスクロールで通過したときに光る */
.radar-chart__dot {
  fill: var(--color-bg-deep);
  stroke: var(--color-gold);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity 0.5s var(--ease-lab) 1.2s,
              r 0.3s var(--ease-lab),
              fill 0.3s var(--ease-lab);
}

.radar-chart__svg.is-drawn .radar-chart__dot {
  opacity: 1;
}

.radar-chart__dot.is-active {
  fill: var(--color-gold-bright);
  r: 4.5;
}

.radar-chart__label {
  font-family: var(--font-ja);
  font-size: 11px;
  letter-spacing: 0.04em;
  fill: var(--color-text-faint);
}

/* ---------------------------------------------
   12. Score Bar — 数値つきの横棒
   レーダーの数値を1軸ずつ読ませるための部品。
   Result / PDF で共用する。

   構造:
   <li class="score-bar">
     <span class="score-bar__label">再現性</span>
     <span class="score-bar__track"><span class="score-bar__fill"></span></span>
     <span class="score-bar__value">92</span>
   </li>
--------------------------------------------- */
.score-bar {
  display: grid;
  grid-template-columns: 5.5em 1fr 2.5em;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.score-bar__label {
  font-size: var(--fs-body-s);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-lab);
}

.score-bar__track {
  position: relative;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

/* 既定は計測値の色＝ネオンブルー。
   金は「あなたの武器」に取っておき、3位以下はデータとして青で引く。
   細い線に低い彩度で敷くので、常時ネオンが光っている印象にはならない。 */
.score-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
              rgba(50, 200, 255, 0.22),
              rgba(50, 200, 255, 0.68));
  transition: width 0.9s var(--ease-lab);
}

.score-bar__value {
  font-family: var(--font-en);
  font-size: var(--fs-body-s);
  font-weight: 700;
  text-align: right;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-lab);
}

/* 1位。いちばん明るい金で、迷いなく主役だとわかるようにする。 */
.score-bar--primary .score-bar__label,
.score-bar--primary .score-bar__value {
  color: var(--color-gold-bright);
  font-weight: 700;
}

.score-bar--primary .score-bar__fill {
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-bright));
}

/* 2位。金だが1位より一段落とす。
   ここが金なのは、僅差のときに 04.5「もう一つの武器」として
   同じ人の才能を出すため。青にすると別物に見えてしまう。 */
.score-bar--second .score-bar__label,
.score-bar--second .score-bar__value {
  color: var(--color-gold);
}

.score-bar--second .score-bar__fill {
  background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold));
}

/* いま読まれている行（スクロールで画面中央を通過中） */
.score-bar.is-reading .score-bar__label,
.score-bar.is-reading .score-bar__value {
  color: var(--color-text);
}

/* ---------------------------------------------
   13. 再利用アニメーション
   演出用の共通キーフレーム。ページ側は animation プロパティで
   呼び出すだけにして、動きの定義をここに集約する。
--------------------------------------------- */

/* 下からそっと現れる */
@keyframes fade-up-soft {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ごくゆっくり明滅する（生きている感じの表現） */
@keyframes breathe-soft {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* 中心から静かに広がる輪 */
@keyframes ring-expand {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}