/* فال ورق — همه‌ی استایل‌ها با پیشوند .fv- محدود شده‌اند. رنگ‌ها از تنظیمات پیشخوان می‌آیند. */
.fv-root {
	--fv-ink: #2a2118;
	--fv-gold: #d9a21b;
	--fv-felt: #14513d;
	--fv-felt-2: #0c3a2b;
	--fv-text: #fdf6e3;
	--fv-back: #7d1d2c;
	--fv-radius: 18px;
	--fv-maxw: 820px;
	max-width: var(--fv-maxw);
	margin: 1.5rem auto;
	padding: 1.25rem;
	border-radius: var(--fv-radius);
	background: radial-gradient(ellipse at 50% 0%, var(--fv-felt) 0%, var(--fv-felt-2) 100%);
	color: var(--fv-text);
	font-family: inherit;
	line-height: 1.9;
	box-sizing: border-box;
	text-align: center;
}
.fv-root *,
.fv-root *::before,
.fv-root *::after { box-sizing: border-box; }

.fv-title { margin: 0 0 .25rem; font-size: 1.6rem; color: var(--fv-gold); }
.fv-intro { margin: 0 auto 1rem; max-width: 560px; font-size: .95rem; opacity: .92; color: inherit; }

/* انتخاب مدل */
.fv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 1rem; }
.fv-chip {
	padding: .3rem .9rem;
	border: 1px solid var(--fv-gold);
	border-radius: 999px;
	background: transparent;
	color: var(--fv-text);
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.fv-chip:hover { background: rgba(255, 255, 255, .12); }
.fv-chip-on { background: var(--fv-gold); color: #2a2118; font-weight: 700; }
.fv-chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.fv-btn {
	display: inline-block;
	padding: .65rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--fv-gold);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
	color: #2a2118;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .3);
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.fv-btn:hover { transform: translateY(-1px); }
.fv-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.fv-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fv-btn[disabled] { opacity: .55; cursor: wait; }

.fv-error {
	margin: 1rem auto 0;
	max-width: 520px;
	padding: .6rem 1rem;
	border-radius: 10px;
	background: #7a1f1f;
	color: #fff;
	font-size: .92rem;
}

/* میز */
.fv-board { position: relative; margin: 1.25rem 0 .5rem; }
.fv-board--horseshoe { height: 370px; }
.fv-board--row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	height: auto;
}
.fv-board--row .fv-slot { position: static; transform: none; width: 130px; }
.fv-board--row.fv-n1 .fv-slot { width: 160px; }
.fv-board--row.fv-n5 .fv-slot { width: 112px; }

.fv-slot {
	position: absolute;
	width: 13.5%;
	right: var(--x);
	top: var(--y);
	transform: translateX(50%);
}
.fv-slot-label {
	display: block;
	margin-top: .35rem;
	font-size: .78rem;
	color: var(--fv-gold);
	min-height: 1.4em;
}
.fv-card { perspective: 800px; aspect-ratio: 2 / 3; width: 100%; }
.fv-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
	transform-style: preserve-3d;
}
.fv-flipped .fv-card-inner { transform: rotateY(180deg); }
.fv-face,
.fv-back {
	position: absolute;
	inset: 0;
	border-radius: 7px;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
}
.fv-face { transform: rotateY(180deg); background: #fffdf6; }
.fv-face svg { display: block; width: 100%; height: 100%; }

/* پشت کارت */
.fv-back {
	border: 3px solid #fffdf6;
	background-color: var(--fv-back);
}
.fv-root[data-pattern="stripes"] .fv-back {
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 4px, transparent 4px 9px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 4px, transparent 4px 9px);
}
.fv-root[data-pattern="dots"] .fv-back {
	background-image: radial-gradient(rgba(255, 255, 255, .3) 1.6px, transparent 2px);
	background-size: 11px 11px;
}
.fv-root[data-pattern="diamonds"] .fv-back {
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, .16) 25%, transparent 25%),
		linear-gradient(225deg, rgba(255, 255, 255, .16) 25%, transparent 25%),
		linear-gradient(315deg, rgba(255, 255, 255, .16) 25%, transparent 25%),
		linear-gradient(45deg, rgba(255, 255, 255, .16) 25%, transparent 25%);
	background-size: 14px 14px;
}
.fv-back::after {
	content: "";
	position: absolute;
	inset: 18%;
	border: 2px solid var(--fv-gold);
	border-radius: 50%;
	opacity: .8;
}

/* نتیجه */
.fv-verdict {
	margin: 1rem auto 0;
	max-width: 560px;
	padding: .8rem 1rem;
	border-radius: 12px;
	background: var(--fv-gold);
	color: #2a2118;
	font-weight: 700;
}
.fv-results { margin: 1.25rem 0 0; padding: 0; list-style: none; text-align: right; display: grid; gap: .6rem; }
.fv-item {
	padding: .7rem 1rem;
	border-radius: 12px;
	background: rgba(255, 253, 246, .96);
	color: var(--fv-ink);
	border-right: 5px solid var(--fv-gold);
}
.fv-item-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.fv-item-pos { font-weight: 700; color: #8a6410; }
.fv-item-name { font-weight: 700; }
.fv-item-hint { font-size: .82rem; opacity: .7; }
.fv-item-text { margin: .15rem 0 0; font-size: .95rem; }

.fv-summary {
	margin: 1rem 0 0;
	padding: .8rem 1rem;
	border-radius: 12px;
	background: rgba(0, 0, 0, .28);
	border: 1px dashed var(--fv-gold);
	text-align: right;
}
.fv-summary strong { color: var(--fv-gold); }
.fv-note { margin: 1rem 0 0; font-size: .78rem; opacity: .7; }
.fv-actions { margin: 0 0 .25rem; }

@media (max-width: 640px) {
	.fv-root { padding: 1rem .75rem; }
	.fv-board--horseshoe { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; height: auto; }
	.fv-board--horseshoe .fv-slot { position: static; transform: none; width: calc(25% - .6rem); }
	.fv-board--horseshoe .fv-slot-label { font-size: .68rem; }
	.fv-board--row { gap: .6rem; }
	.fv-board--row .fv-slot { width: 28%; }
	.fv-board--row.fv-n1 .fv-slot { width: 45%; }
	.fv-board--row.fv-n5 .fv-slot { width: calc(33% - .6rem); }
}

@media (prefers-reduced-motion: reduce) {
	.fv-card-inner,
	.fv-btn,
	.fv-chip { transition: none; }
}