/* ---------- パリィのエフェクト ----------
   画面は揺らさない。短く鋭い光と、ラベル＋ステータスチップで結果を伝える。
   成功 = 白金（光の十字と火花）/ パリィされた = 赤（斬撃で石が割れる）/ 空振り = 青灰（鈍い波紋） */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#fx > * { position: absolute; will-change: transform, opacity; }
.fx-shard.black { background: linear-gradient(135deg, #6a6a6a, #111); }
.fx-shard.white { background: linear-gradient(135deg, #fff, #cfcac0); }
.fx-half { border-radius: 50%; }
.fx-half.black { background: radial-gradient(circle at 35% 30%, #555 0%, #111 55%); }
.fx-half.white { background: radial-gradient(circle at 35% 30%, #fff 0%, #f7f5f0 50%, #cfcac0 100%); }
.fx-ring { border-radius: 50%; border: 2px solid; }
.fx-glint { height: 2px; border-radius: 2px; }
.fx-spark { height: 2px; border-radius: 2px; transform-origin: 0 50%; }
.fx-core { border-radius: 50%; }
.fx-vignette { inset: 0; border-radius: 10px; }

/* 結果ラベル: 大きな単語＋下線＋ステータスチップ */
.fx-label {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fx-label .word {
  font-size: clamp(24px, 7.5vw, 36px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .16em;
  padding-left: .16em; /* letter-spacing の右余白と釣り合わせる */
  -webkit-text-stroke: 5px rgba(10, 10, 14, .7);
  paint-order: stroke fill;
}
.fx-label .bar { width: 100%; height: 3px; border-radius: 2px; transform-origin: 0 50%; }
.fx-label .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid;
  border-radius: 6px;
  background: rgba(14, 14, 18, .86);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.fx-label .chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.fx-label.parry .word   { color: #fff; text-shadow: 0 0 18px rgba(255, 214, 102, .95); }
.fx-label.parry .bar    { background: linear-gradient(90deg, #fff, #ffd666); box-shadow: 0 0 10px #ffd666; }
.fx-label.parry .chip   { color: #ffe39a; border-color: rgba(255, 214, 102, .55); }
.fx-label.parried .word { color: #ff4d5e; text-shadow: 0 0 16px rgba(255, 50, 70, .8); }
.fx-label.parried .bar  { background: #ff4d5e; box-shadow: 0 0 10px rgba(255, 50, 70, .8); }
.fx-label.parried .chip { color: #ff8a95; border-color: rgba(255, 77, 94, .55); }
.fx-label.miss .word    { color: #b8c4da; }
.fx-label.miss .bar     { background: #7d8aa3; }
.fx-label.miss .chip    { color: #a9c1ff; border-color: rgba(125, 150, 220, .5); }

/* ---------- 盤の下のドパ演出 ----------
   盛り上がる時はクソデカレインボー、やらかした時は水色で冷笑 */
#dopaArea {
  flex: 1;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#dopa {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* 勝ったときは結果のぶん文字の場所を詰める */
#dopaArea.has-result #dopa { flex: none; height: 80px; min-height: 0; }

.dopa-text {
  position: absolute;
  white-space: nowrap;
  line-height: 1;
}
/* クソデカレインボー（ﾊﾟﾘｨｨｯ!! / ﾄﾞﾊﾟｧ～ｯ!!） */
.dopa-text.rainbow {
  font-family: "Dela Gothic One", "Hiragino Sans", sans-serif;
  font-size: clamp(54px, 17vw, 96px);
  letter-spacing: -.02em;
  background: linear-gradient(90deg, #ff3b5c, #ff9f1a, #ffe11a, #36d36b, #1aa8ff, #7a5cff, #ff3bd4, #ff3b5c);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000) drop-shadow(5px 5px 0 #000);
  animation: rainbow 1.2s linear infinite;
}
.dopa-text.rainbow.huge { font-size: clamp(60px, 19vw, 110px); }
/* 水色の冷笑（うおw / どわーw） */
.dopa-text.sneer {
  font-family: "Zen Kurenaido", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: clamp(40px, 12vw, 64px);
  color: #8fdcff;
  /* 線が細いフォントなので、うっすら縁を足して暗い背景でも読めるようにする */
  -webkit-text-stroke: .6px #8fdcff;
  text-shadow: 0 2px 12px rgba(127, 211, 255, .4);
}