/* 演出の見た目（fx.js と組みで使う）。どのデザイン案でも共通。 */

/* ---- 3Dサイコロ ---- */
.dice-tray { display: inline-flex; gap: 14px; perspective: 600px; }
.die3d { width: 44px; height: 44px; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 6px;
  background: #f7f3ea; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -3px 6px rgba(0,0,0,.12);
}
.face i { width: 7px; height: 7px; margin: auto; border-radius: 50%; }
.face i.on { background: #1b1b1b; }
.face.front { transform: translateZ(22px); }
.face.back { transform: rotateY(180deg) translateZ(22px); }
.face.right { transform: rotateY(90deg) translateZ(22px); }
.face.left { transform: rotateY(-90deg) translateZ(22px); }
.face.top { transform: rotateX(90deg) translateZ(22px); }
.face.bottom { transform: rotateX(-90deg) translateZ(22px); }
/* 1の目だけ赤く */
.face.front i.on { background: #c0392b; width: 11px; height: 11px; }

/* ---- 結果の大きな表示 ---- */
.fx-outcome {
  position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 50;
  animation: fx-fade 1.3s ease forwards;
}
.fx-outcome span {
  font-family: var(--font-title); font-size: clamp(40px, 9vw, 96px); letter-spacing: .08em;
  padding: .1em .6em; animation: fx-pop-in .5s cubic-bezier(.2,1.6,.4,1) both;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.fx-outcome.success span { color: #ffd76a; text-shadow: 0 0 30px rgba(255,215,106,.7), 0 4px 20px rgba(0,0,0,.6); }
.fx-outcome.partial span { color: #f0c27a; }
.fx-outcome.fail span { color: #ff6b6b; }
.fx-outcome.impossible span { color: #b9b4c9; font-size: clamp(28px, 6vw, 60px); }
@keyframes fx-pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fx-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---- 数値の変化 ---- */
.fx-pop {
  position: fixed; z-index: 60; transform: translate(-50%, -100%); pointer-events: none;
  font: 700 22px var(--font-ui); animation: fx-float 1.4s ease-out forwards; text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.fx-pop.bad { color: #ff6b6b; } .fx-pop.good { color: #7ee38f; }
@keyframes fx-float { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -48px; } }
.fx-flash { animation: fx-flash .8s ease; }
@keyframes fx-flash { 0%, 100% { filter: none; } 30% { filter: brightness(1.8) saturate(1.5); } }

/* ダメージを受けたときの赤いふち */
body.fx-hurt::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
  box-shadow: inset 0 0 min(18vw, 160px) rgba(220, 30, 30, .65); animation: fx-fade .7s ease forwards;
}
.fx-shake { animation: fx-shake .45s ease; }
@keyframes fx-shake {
  0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* 正気度が低い・義体負荷が高いなど、心が揺らいでいるときの文字 */
.fx-unstable .story-text p:last-child { animation: fx-unstable 3.2s ease-in-out infinite; }
@keyframes fx-unstable {
  0%, 100% { text-shadow: none; filter: none; }
  45% { text-shadow: 2px 0 rgba(255,0,60,.35), -2px 0 rgba(0,200,255,.35); }
  50% { filter: blur(.6px); }
}

/* 1文字ずつ表示している間のカーソル */
.typing p:last-child::after { content: "▍"; opacity: .6; animation: fx-blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes fx-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fx-outcome, .fx-outcome span, .fx-pop, .fx-flash, .fx-shake, .fx-unstable .story-text p:last-child { animation: none !important; }
}