/* ==================================================
   RPG系 強調演出フレームワーク
   クラス名にハイフンなし
================================================== */

/* ---------- 基本変数 ---------- */
:root {
	--fxGold: #ffd447;
	--fxGoldDark: #9b6500;
	--fxRed: #ff3b32;
	--fxOrange: #ffa632;
	--fxBlue: #27b8ff;
	--fxGreen: #42d96b;
	--fxWhite: #fff7dc;
	--fxBlack: #050505;

	--fxShadow: rgba(0, 0, 0, 0.85);
	--fxGlowGold: rgba(255, 210, 65, 0.75);
	--fxGlowRed: rgba(255, 55, 45, 0.7);
	--fxGlowBlue: rgba(39, 184, 255, 0.7);
}

/* ---------- 共通の太字・黒影 ---------- */
.fxText {
	font-weight: 900;
	letter-spacing: 0.04em;
	color: var(--fxWhite);
	text-shadow:
		2px 2px 0 var(--fxBlack),
		0 0 8px rgba(255, 255, 255, 0.18);
}

/* ---------- 数字や重要語句用 ---------- */
.fxStrong {
	display: inline-block;
	font-weight: 1000;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-shadow:
		2px 2px 0 var(--fxBlack),
		0 0 8px currentColor;
}

/* ---------- 色パターン ---------- */
.fxGold {
	color: var(--fxGold);
	-webkit-text-stroke: 0;
	text-shadow:
		2px 2px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		0 0 8px var(--fxGlowGold),
		0 0 16px rgba(255, 170, 0, 0.45);
}

.fxRed {
	color: var(--fxRed);
	-webkit-text-stroke: 0;
	text-shadow:
		2px 2px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		0 0 8px var(--fxGlowRed),
		0 0 16px rgba(255, 180, 60, 0.45);
}

.fxOrange {
	color: var(--fxOrange);
	-webkit-text-stroke: 0;
	text-shadow:
		2px 2px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		0 0 8px var(--fxGlowRed),
		0 0 16px rgba(255, 180, 60, 0.45);
}

.fxBlue {
	color: var(--fxBlue);
	-webkit-text-stroke: 0;
	text-shadow:
		2px 2px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		0 0 8px var(--fxGlowBlue),
		0 0 16px rgba(39, 184, 255, 0.45);
}

.fxGreen {
	color: var(--fxGreen);
	-webkit-text-stroke: 0;
	text-shadow:
		2px 2px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		0 0 8px rgba(66, 217, 107, 0.75),
		0 0 16px rgba(66, 217, 107, 0.45);
}

.fxWhite {
	color: #fff;
	-webkit-text-stroke: 1px #111;
	text-shadow:
		2px 2px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		0 0 8px rgba(255, 255, 255, 0.55);
}

/* ---------- サイズ ---------- */
.fxSizeS {
	font-size: 1.15em;
}

.fxSizeM {
	font-size: 1.35em;
}

.fxSizeL {
	font-size: 1.8em;
}

.fxSizeXl {
	font-size: 2.4em;
}

.fxSizeMax {
	font-size: clamp(36px, 8vw, 64px);
}

/* ---------- 光る ---------- */
.fxGlow {
	animation: fxGlow 2s ease-in-out infinite;
}

/* ---------- ゆっくり拡大縮小 ---------- */
.fxPulse {
	animation: fxPulse 1.8s ease-in-out infinite;
}

/* ---------- ドンッと登場 ---------- */
.fxPop {
	animation: fxPop 0.55s cubic-bezier(.18, 1.45, .35, 1) both;
}

/* ---------- 左右に軽く揺れる ---------- */
.fxSwing {
	animation: fxSwing 2.2s ease-in-out infinite;
}

/* ---------- キラッと光が走る ---------- */
.fxShine {
	position: relative;
	overflow: hidden;
}

.fxShine::after {
	content: "";
	position: absolute;
	top: -20%;
	left: -45%;
	width: 30%;
	height: 140%;
	background: linear-gradient(100deg,
			transparent,
			rgba(255, 255, 255, 0.8),
			rgba(255, 235, 120, 0.75),
			transparent);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
	animation: fxShine 3.2s ease-in-out infinite;
}

/* ---------- 文字そのものに光を走らせたい時 ---------- */
.fxTextShine {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.fxTextShine::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 35%;
	height: 100%;
	background: linear-gradient(100deg,
			transparent,
			rgba(255, 255, 255, 0.9),
			rgba(255, 238, 120, 0.8),
			transparent);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
	animation: fxShine 2.8s ease-in-out infinite;
}

/* ---------- 黒金パネル ---------- */
.fxPanel {
	position: relative;
	padding: 18px 16px;
	margin: 16px auto;
	text-align: center;
	color: var(--fxWhite);
	background:
		linear-gradient(180deg, #261907 0%, #0b0906 100%);
	border: 2px solid #b98518;
	border-radius: 12px;
	box-shadow:
		0 0 0 3px #050505,
		0 5px 0 #5a3507,
		0 10px 18px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 0 18px rgba(255, 200, 55, 0.12);
}

/* ---------- 薄い金フチだけ欲しい時 ---------- */
.fxFrame {
	border: 2px solid #c99424;
	border-radius: 12px;
	box-shadow:
		0 0 0 2px #050505,
		0 0 12px rgba(255, 205, 65, 0.28);
}

/* ---------- 豪華パネル ---------- */
.fxPanelRare {
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 225, 95, 0.24), transparent 42%),
		linear-gradient(180deg, #3a2508 0%, #0b0906 100%);
	border-color: #ffda63;
	box-shadow:
		0 0 0 3px #050505,
		0 6px 0 #6b3c04,
		0 0 22px rgba(255, 210, 65, 0.45),
		inset 0 0 22px rgba(255, 210, 65, 0.18);
}

/* ---------- 横線 ---------- */
.fxLine {
	width: 70%;
	height: 2px;
	margin: 22px auto;
	background: linear-gradient(90deg,
			transparent,
			#8a5a13,
			#ffd95a,
			#fff3a0,
			#ffd95a,
			#8a5a13,
			transparent);
	box-shadow: 0 0 10px rgba(255, 208, 65, 0.55);
}

/* ---------- アニメーション定義 ---------- */
@keyframes fxGlow {

	0%,
	100% {
		filter: brightness(1);
	}

	50% {
		filter: brightness(1.25);
	}
}

@keyframes fxPulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.07);
	}
}

@keyframes fxPop {
	0% {
		opacity: 0;
		transform: scale(0.75) translateY(10px);
		filter: brightness(0.8);
	}

	65% {
		opacity: 1;
		transform: scale(1.12) translateY(-2px);
		filter: brightness(1.28);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
		filter: brightness(1);
	}
}

@keyframes fxSwing {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(1.5deg);
	}

	75% {
		transform: rotate(-1.5deg);
	}
}

@keyframes fxShine {
	0% {
		left: -45%;
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	30% {
		left: 115%;
		opacity: 0;
	}

	100% {
		left: 115%;
		opacity: 0;
	}
}

/* ---------- スマホ調整 ---------- */
@media screen and (max-width: 600px) {
	.fxPanel {
		padding: 15px 10px;
		margin: 14px auto;
	}

	.fxSizeL {
		font-size: 1.55em;
	}

	.fxSizeXl {
		font-size: 2em;
	}

	.fxSizeMax {
		font-size: clamp(34px, 11vw, 54px);
	}
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {

	.fxGlow,
	.fxPulse,
	.fxPop,
	.fxSwing,
	.fxShine::after,
	.fxTextShine::after {
		animation: none !important;
	}
}