/* ============================================================
   精錬トーンの共通部品 (rf-tone.css)

   読み込むページ: box-gacha.html / relic-gacha.html
   （refine.html と同じデザイン言語。refine.html 自体はこのファイルを読まない）
   読み込み順: common.css → rf-tone.css → ページ固有 <style>

   ここに置くもの
     トークン / body / 中央の演出ステージ（後光・波・白いプレート・フラッシュ）/ 開封・使用パネル /
     ボタンの土台 / 暗い半透明の枠（.rf-box）と見出し / リセットボタン
   大きさ（ステージの高さ・後光の直径など）と色の違いはページ側で上書きする。
   ============================================================ */
:root {
  --orange-1: #ffb347; --orange-2: #ff8a1f; --orange-3: #ef6f12;
  --blue-1: #5aa6f0; --blue-2: #3a7fd6; --blue-3: #285fb0;
  --panel-bg: #eef4fd; --panel-edge: #cdddf3; --panel-ink: #2b3a57; --panel-sub: #5a6b89;
  --sky-btn: #6ba6e8;
}

/* リセット・text-size-adjust は common.css。背景は夜空（common.css の --bg-night） */
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #eaf1ff;
  min-height: 100vh;
  background: var(--bg-night);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ---------- 中央の演出ステージ ---------- */
.rf-stage { display: flex; justify-content: center; }
.rf-center {
  position: relative;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 230, 246, .55), transparent 46%),
    radial-gradient(circle at 70% 60%, rgba(225, 232, 255, .55), transparent 50%),
    radial-gradient(circle at 50% 46%, #ffffff 0%, #eef4fc 54%, #e2ebf7 100%);
  box-shadow: inset 0 0 30px rgba(175, 198, 238, .4);
  border: 1px solid #dde8f7;
}
.rf-orbit { position: relative; display: grid; place-items: center; }
.rf-orbit > * { grid-area: 1 / 1; }

/* 後光：放射状スポーク */
.rf-rays {
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(178, 198, 238, 0) 0 5deg, rgba(178, 198, 238, .22) 5deg 6deg, rgba(178, 198, 238, 0) 6deg 11deg);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 58%, transparent 85%);
  mask: radial-gradient(circle, transparent 40%, #000 58%, transparent 85%);
  animation: raysBreath 6.5s ease-in-out infinite;
}
@keyframes raysBreath { 0%, 100% { opacity: .4; transform: scale(.98); } 50% { opacity: .78; transform: scale(1.02); } }

/* 後光：波のように外へ広がる縁 */
.rf-wave {
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(170, 196, 240, .65);
  box-shadow: 0 0 14px rgba(182, 206, 246, .6);
  opacity: 0;
  animation: waveOut 5s ease-out infinite;
}
.rf-wave.w2 { animation-delay: 2.5s; }
@keyframes waveOut { 0% { transform: scale(.66); opacity: 0; } 16% { opacity: .6; } 100% { transform: scale(1.55); opacity: 0; } }

/* アイテム（白い角丸プレートの上にアイコン） */
.rf-item { position: relative; z-index: 3; display: grid; place-items: center; }
.rf-item .plate {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(160deg, #ffffff, #eef3fb);
  border: 3px solid #c3d6ef;
  box-shadow: 0 4px 12px rgba(90, 125, 185, .28), inset 0 1px 2px rgba(255, 255, 255, .95);
}

/* 開封・使用時のフラッシュ（色はページ側） */
.rf-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
.rf-flash.fire { animation: flashFx .6s ease-out; }
@keyframes flashFx { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 開封・使用パネル ---------- */
.rf-panel {
  /* 明るいパネル上では common.css の金色のフォーカス枠が見えないので濃い青にする */
  --focus-ring: #2a64c4;
  background: var(--panel-bg);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(5, 15, 40, .5);
  color: var(--panel-ink);
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* 見出し帯の色と字間はページ側（box=青 / relic=紫） */
.rf-panel__head {
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 11px;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.rf-panel__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 13px; }

/* ---------- ボタンの土台（形・幅・字間はページ側） ---------- */
.rf-btn {
  border: 0;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18), 0 6px 13px rgba(0, 0, 0, .22);
  transition: transform .08s, box-shadow .08s;
  position: relative;
  overflow: hidden;
}
.rf-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 4px 9px rgba(0, 0, 0, .2); }
.rf-btn:disabled { filter: grayscale(.5) brightness(.92); cursor: not-allowed; }
.rf-btn--use { background: linear-gradient(180deg, var(--orange-1), var(--orange-2) 55%, var(--orange-3)); }

/* ---------- 暗い半透明の枠（結果・履歴・サマリー） ---------- */
.rf-box {
  background: rgba(11, 24, 56, .62);
  border: 1px solid rgba(150, 185, 255, .24);
  border-radius: 16px;
  padding: 14px 16px;
}
.rf-box h2 {
  margin: 0 0 11px;
  font-size: var(--fs-md);
  letter-spacing: .1em;
  color: #bcd2ff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-box h2 .ln { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(150, 190, 255, .5), transparent); }

.rf-reset-btn {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(160, 190, 255, .35);
  color: #cfe0ff;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: .15s;
}
.rf-reset-btn:hover { background: rgba(255, 255, 255, .16); }
.rf-reset-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .rf-rays, .rf-wave, .rf-flash.fire { animation: none !important; }
  .rf-rays { opacity: .6; }
}