/* ============================================================
   Heart Reaction — コアスタイル（プラグイン移植用）
   テーマ変更はこの CSS 変数を上書きするだけで OK
   ============================================================ */
:root {
  --hr-primary: #e0245e;                 /* ハート・アクセント色 */
  --hr-button-size: 72px;                /* ボタン直径 */
  --hr-button-bg: #ffffff;               /* ボタン背景 */
  --hr-button-shadow: 0 6px 24px rgba(224, 36, 94, 0.35);
  --hr-offset-x: 24px;                   /* 画面端からの距離（横） */
  --hr-offset-y: 24px;                   /* 画面端からの距離（縦） */
  --hr-z: 9990;                          /* 重ね順 */
}

/* ---- フローティングエリア（ボタン＋そえ文字、スクロール追走） ---- */
.hr-wrap {
  position: fixed;
  bottom: var(--hr-offset-y);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: var(--hr-z);
}
.hr-wrap.hr-pos-right { right: var(--hr-offset-x); }
.hr-wrap.hr-pos-left  { left: var(--hr-offset-x); }

.hr-button {
  width: var(--hr-button-size);
  height: var(--hr-button-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--hr-button-bg);
  box-shadow: var(--hr-button-shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* スマホで連打してもダブルタップ拡大させない */
}

/* ---- そえ文字（吹き出し風） ---- */
.hr-label {
  position: relative;
  background: var(--hr-button-bg);
  color: var(--hr-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  animation: hr-label-bob 2.6s ease-in-out infinite;
}
.hr-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--hr-button-bg);
  transform: translateY(-50%) rotate(45deg);
}
.hr-label.hr-label-left  { order: -1; }              /* ボタンの左に */
.hr-label.hr-label-left::after  { right: -3px; }     /* しっぽはボタン側 */
.hr-label.hr-label-right::after { left: -3px; }

@keyframes hr-label-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---- お礼の吹き出し（連打すると時々出る） ---- */
.hr-thanks {
  position: absolute;
  bottom: calc(100% + 14px);
  background: var(--hr-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  padding: 9px 14px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  pointer-events: none;
  animation: hr-thanks 2.6s ease forwards;
}
.hr-wrap.hr-pos-right .hr-thanks { right: 0; }
.hr-wrap.hr-pos-left  .hr-thanks { left: 0; }
.hr-thanks::after {
  content: '';
  position: absolute;
  bottom: -4px;
  width: 10px;
  height: 10px;
  background: var(--hr-primary);
  transform: rotate(45deg);
}
.hr-wrap.hr-pos-right .hr-thanks::after { right: 28px; }
.hr-wrap.hr-pos-left  .hr-thanks::after { left: 28px; }

@keyframes hr-thanks {
  0%   { opacity: 0; transform: translateY(6px) scale(0.6); }
  10%  { opacity: 1; transform: translateY(0) scale(1.06); }
  16%  { transform: scale(1); }
  82%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.hr-button svg,
.hr-button img {
  width: 56%;
  height: 56%;
  transform-origin: center;
  animation: hr-beat 2.6s ease-in-out infinite;
}
.hr-button svg { fill: var(--hr-primary); } /* fillは子のpath/ellipseに継承される */
.hr-button img { object-fit: contain; }

/* 待機中の鼓動 */
@keyframes hr-beat {
  0%, 44%, 100% { transform: scale(1); }
  8%  { transform: scale(1.14); }
  16% { transform: scale(1); }
  24% { transform: scale(1.08); }
  32% { transform: scale(1); }
}

/* クリック時のぷにっ */
.hr-button.hr-pop { animation: hr-pop 0.3s ease; }
@keyframes hr-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.82); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---- エフェクト用オーバーレイ（クリックを邪魔しない） ---- */
.hr-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: calc(var(--hr-z) - 1);
}

.hr-heart {
  position: absolute;
  width: var(--size);
  height: var(--size);
  will-change: transform, opacity;
}
.hr-heart svg,
.hr-heart img {
  display: block;
  width: 100%;
  height: 100%;
}
.hr-heart svg { fill: var(--c, var(--hr-primary)); }
.hr-heart img { object-fit: contain; }

/* ---- 広がるアニメ：ボタン中心から上方向へ飛び散る ---- */
.hr-burst {
  left: var(--x);
  top: var(--y);
  animation: hr-burst var(--dur, 0.9s) ease-out forwards;
}
@keyframes hr-burst {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  15%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.6);
    opacity: 0;
  }
}

/* 波紋リング */
.hr-ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border: 3px solid var(--hr-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.8;
  animation: hr-ring 0.7s ease-out forwards;
}
@keyframes hr-ring {
  to { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}

/* ---- 降ってくるアニメ ---- */
.hr-fall {
  left: var(--x);
  top: 0;
  transform: translateY(-80px);
  animation: hr-fall var(--dur) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
@keyframes hr-fall {
  from { transform: translateY(-80px); }
  to   { transform: translateY(var(--land)); }
}

/* 落下中のひらひら（横揺れ＋回転） */
.hr-fall .hr-sway {
  display: block;
  width: 100%;
  height: 100%;
  animation: hr-sway var(--sway-dur, 1.4s) ease-in-out infinite alternate;
}
@keyframes hr-sway {
  from { transform: translateX(calc(var(--sway, 16px) * -1)) rotate(-14deg); }
  to   { transform: translateX(var(--sway, 16px)) rotate(14deg); }
}

/* 着地後：揺れを止めてランダムな傾きで静止 */
.hr-fall.hr-landed .hr-sway {
  animation: none;
  transform: rotate(var(--tilt, 0deg));
}

/* ゆっくり消える／掃除時のフェード */
.hr-heart.hr-fade {
  transition: opacity 2.2s ease;
  opacity: 0;
}

/* ---- マイルストーン演出（Pro） ---- */
.hr-thanks.hr-milestone {
  font-size: 15px;
  padding: 12px 18px;
  animation-duration: 4.5s;
}

/* 紙吹雪 */
.hr-confetti {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--w, 8px);
  height: var(--h, 12px);
  background: var(--c, var(--hr-primary));
  border-radius: 2px;
  opacity: 0.95;
  will-change: transform, opacity;
  animation: hr-confetti var(--dur, 2.5s) ease-in forwards;
}
@keyframes hr-confetti {
  to {
    transform: translateY(105vh) rotate(var(--spin, 720deg));
    opacity: 0.7;
  }
}