/* Magic Fortune — стили.
   Все размеры внутри сцены считаются в единице --u (1% ширины сцены), поэтому всё масштабируется. */

.mf-wrap {
	--mf-gold: #e9c46a;
	--mf-gold-deep: #b7892f;
	--mf-ink: #3a2410;
	position: relative;
	/* 70% от прежних 640px; можно переопределить: .mf-wrap { --mf-max-width: 560px; } */
	max-width: var(--mf-max-width, 448px);
	margin: 2em auto;
	text-align: center;
	line-height: 1.4;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.mf-wrap *,
.mf-wrap *::before,
.mf-wrap *::after {
	box-sizing: border-box;
}
@supports (width: 1cqw) {
	.mf-wrap {
		container-type: inline-size;
	}
}

/* ---------- Сцена ---------- */

.mf-stage {
	--u: 5px;
	--cy: 43;
	position: relative;
	width: 70%;
	aspect-ratio: 10 / 9;
	overflow: hidden;
	isolation: isolate;
	border-radius: calc(var(--u) * 3);
	background: radial-gradient(ellipse at 50% 48%, #44217f 0%, #231049 46%, #0c0622 100%);
	box-shadow:
		0 12px 36px rgba(20, 5, 50, 0.45),
		inset 0 0 0 1px rgba(233, 196, 106, 0.28),
		inset 0 0 calc(var(--u) * 6) rgba(0, 0, 0, 0.55);
	-webkit-tap-highlight-color: transparent;
}
@supports (width: 1cqw) {
	.mf-stage {
		--u: calc(100cqw / 100);
	}
}
@media (max-width: 520px) {
	.mf-stage {
		aspect-ratio: 1 / 1;
		--cy: 46;
	}
}

/* Звёзды на фоне */
.mf-stars {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.mf-stars::before,
.mf-stars::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: repeat;
}
.mf-stars::before {
	background-image:
		radial-gradient(1px 1px at 20px 30px, #fff, transparent),
		radial-gradient(1.5px 1.5px at 120px 80px, #ffe9b0, transparent),
		radial-gradient(1px 1px at 190px 150px, #cfe0ff, transparent),
		radial-gradient(1px 1px at 70px 170px, #fff, transparent);
	background-size: 220px 200px;
	animation: mf-twinkle 3.6s ease-in-out infinite alternate;
}
.mf-stars::after {
	background-image:
		radial-gradient(1.5px 1.5px at 50px 110px, #fff, transparent),
		radial-gradient(1px 1px at 160px 20px, #ffe9b0, transparent),
		radial-gradient(2px 2px at 100px 190px, #d9c8ff, transparent);
	background-size: 260px 230px;
	animation: mf-twinkle 5s ease-in-out -2s infinite alternate;
}
@keyframes mf-twinkle {
	from { opacity: 0.25; }
	to   { opacity: 0.95; }
}

/* Свечение вокруг шара (яркость и размер задаёт JS) */
.mf-aura {
	position: absolute;
	left: 50%;
	top: calc(var(--u) * var(--cy));
	width: calc(var(--u) * 72);
	height: calc(var(--u) * 72);
	margin: calc(var(--u) * -36) 0 0 calc(var(--u) * -36);
	border-radius: 50%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	background: radial-gradient(circle, rgba(170, 120, 255, 0.55) 0%, rgba(120, 70, 220, 0.25) 40%, transparent 68%);
	will-change: transform, opacity;
}

/* Подставка шара */
.mf-base {
	position: absolute;
	left: 50%;
	top: calc(var(--u) * (var(--cy) + 19));
	width: calc(var(--u) * 36);
	height: calc(var(--u) * 15);
	margin-left: calc(var(--u) * -18);
	z-index: 2;
	background:
		linear-gradient(90deg, #5e3f10 0%, #c8993a 18%, #fff1b8 34%, #e9c46a 50%, #b7892f 72%, #5e3f10 100%);
	clip-path: polygon(14% 0, 86% 0, 66% 38%, 60% 58%, 94% 90%, 94% 100%, 6% 100%, 6% 90%, 40% 58%, 34% 38%);
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

/* ---------- Шар ---------- */

.mf-ball {
	position: absolute;
	left: 50%;
	top: calc(var(--u) * var(--cy));
	width: calc(var(--u) * 44);
	height: calc(var(--u) * 44);
	margin: calc(var(--u) * -22) 0 0 calc(var(--u) * -22);
	border-radius: 50%;
	overflow: hidden;
	z-index: 3;
	background: #0e0528;
	box-shadow:
		inset 0 0 calc(var(--u) * 3) rgba(180, 140, 255, 0.55),
		inset 0 calc(var(--u) * -2) calc(var(--u) * 4) rgba(90, 200, 255, 0.25),
		0 0 calc(var(--u) * 2.5) rgba(150, 110, 255, 0.5);
}
.mf-ball-canvas {
	display: block;
	width: 100%;
	height: 100%;
}
/* Блик и тёмный ободок стекла */
.mf-ball::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient(ellipse 38% 24% at 32% 20%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
		radial-gradient(circle at 50% 50%, transparent 62%, rgba(10, 0, 40, 0.55) 100%),
		radial-gradient(ellipse 50% 14% at 50% 96%, rgba(120, 200, 255, 0.35), transparent 70%);
}

.mf-sparks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	pointer-events: none;
}

/* Вспышка при появлении предсказания */
.mf-flash {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at 50% calc(var(--u) * var(--cy)), rgba(255, 250, 225, 0.95) 0%, rgba(255, 226, 150, 0.6) 30%, rgba(255, 200, 120, 0) 70%);
}

/* ---------- Карты ---------- */

.mf-card {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--u) * 11);
	height: calc(var(--u) * 17);
	perspective: calc(var(--u) * 60);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
}
.mf-wrap.is-spinning .mf-card {
	visibility: visible;
}
.mf-card-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}
.mf-face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: calc(var(--u) * 1);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow:
		inset 0 0 0 calc(var(--u) * 0.45) var(--mf-gold),
		0 0 calc(var(--u) * 1.6) rgba(233, 196, 106, 0.5);
}
.mf-face--back {
	background:
		repeating-linear-gradient(45deg, rgba(233, 196, 106, 0.2) 0 1px, transparent 1px calc(var(--u) * 1.3)),
		repeating-linear-gradient(-45deg, rgba(233, 196, 106, 0.2) 0 1px, transparent 1px calc(var(--u) * 1.3)),
		linear-gradient(160deg, #5a27a8, #1b0a40);
}
.mf-face--back::before {
	content: "";
	position: absolute;
	inset: calc(var(--u) * 1.2);
	border: 1px solid rgba(233, 196, 106, 0.75);
	border-radius: calc(var(--u) * 0.6);
}
.mf-face--back::after {
	content: "";
	width: calc(var(--u) * 4.6);
	height: calc(var(--u) * 4.6);
	border: 1.5px solid var(--mf-gold);
	background: radial-gradient(circle, var(--mf-gold) 0 14%, transparent 16%);
	transform: rotate(45deg);
	box-shadow: 0 0 calc(var(--u) * 1) rgba(233, 196, 106, 0.6);
}
.mf-face--front {
	transform: rotateY(180deg);
	color: #5b3410;
	background: linear-gradient(160deg, #fff4d6, #ecd29a);
}
.mf-face--front::before {
	content: "";
	position: absolute;
	inset: calc(var(--u) * 1.2);
	border: 1px solid rgba(91, 52, 16, 0.45);
	border-radius: calc(var(--u) * 0.6);
}
.mf-face--front svg {
	width: calc(var(--u) * 6.5);
	height: calc(var(--u) * 6.5);
	stroke-width: 1.4;
}

/* ---------- Папирус ---------- */

.mf-papyrus {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--u) * 78);
	transform: translate(-50%, -50%);
	z-index: 8;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease 0.15s, visibility 0s linear 0.55s;
	filter: drop-shadow(0 calc(var(--u) * 1.2) calc(var(--u) * 2) rgba(0, 0, 0, 0.55));
}
.mf-papyrus.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0s;
}

/* Свёрнутые края свитка */
.mf-rod {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	height: calc(var(--u) * 3.2);
	border-radius: calc(var(--u) * 1.6);
	background: linear-gradient(180deg, #f6e6b6 0%, #d9b86f 30%, #b98a43 62%, #7d5421 100%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.55),
		inset 0 -2px 3px rgba(60, 28, 4, 0.55),
		0 2px 4px rgba(0, 0, 0, 0.35);
}
.mf-rod::before,
.mf-rod::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(var(--u) * 3.6);
	height: calc(var(--u) * 3.6);
	margin-top: calc(var(--u) * -1.8);
	border-radius: 50%;
	background: repeating-radial-gradient(circle, #f1dba0 0 calc(var(--u) * 0.35), #9a6f2c calc(var(--u) * 0.35) calc(var(--u) * 0.6));
	box-shadow: 0 0 0 1px rgba(70, 35, 5, 0.6);
}
.mf-rod::before { left: calc(var(--u) * -1); }
.mf-rod::after  { right: calc(var(--u) * -1); }

/* Лист папируса: высоту при разворачивании задаёт JS */
.mf-sheet {
	position: relative;
	flex: 0 0 auto;
	height: 0;
	/* лист чуть заходит под валики, чтобы рваный край не торчал над ними */
	margin: calc(var(--u) * -0.9) calc(var(--u) * 1.6);
	transition: height 1.5s cubic-bezier(0.25, 0.75, 0.25, 1);
}
.mf-papyrus.is-closing .mf-sheet {
	transition-duration: 0.5s;
}
.mf-sheet::before {
	content: "";
	position: absolute;
	inset: 0;
	/* волокна, пятна и сама бумага; края делает SVG-фильтр #mf-rough */
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.7' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0.05 1.6 0 0 0 -0.62'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.6 0.014' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0.05 1.4 0 0 0 -0.55'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
		radial-gradient(circle at 18% 22%, rgba(120, 70, 20, 0.2), transparent 18%),
		radial-gradient(circle at 82% 72%, rgba(120, 70, 20, 0.22), transparent 22%),
		radial-gradient(ellipse at 50% 50%, #f1dda8 0%, #e5c98b 55%, #c99e5a 100%);
	box-shadow:
		inset 0 0 calc(var(--u) * 5) rgba(110, 60, 10, 0.55),
		inset 0 0 calc(var(--u) * 1.2) rgba(80, 40, 5, 0.6);
	filter: url(#mf-rough);
}
.mf-sheet-clip {
	position: relative;
	z-index: 1;
	height: 100%;
	overflow: hidden;
}
.mf-sheet-clip.is-scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #9a6f2c transparent;
}
.mf-wrap .mf-sheet-inner {
	padding: calc(var(--u) * 4.5) calc(var(--u) * 6);
	color: var(--mf-ink);
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
}
.mf-wrap .mf-title {
	margin: 0 0 calc(var(--u) * 1);
	padding: 0;
	border: 0;
	color: #6a3d12;
	font-family: inherit;
	font-size: max(12px, calc(var(--u) * 3));
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(255, 245, 210, 0.5);
}
.mf-ornament {
	position: relative;
	height: 2px;
	width: 62%;
	margin: 0 auto calc(var(--u) * 2.6);
	background: linear-gradient(90deg, transparent, #8a5a20 25%, #8a5a20 75%, transparent);
}
.mf-ornament::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--u) * 1.5);
	height: calc(var(--u) * 1.5);
	margin: calc(var(--u) * -0.75) 0 0 calc(var(--u) * -0.75);
	background: #e5c98b;
	border: 2px solid #8a5a20;
	transform: rotate(45deg);
}
.mf-wrap .mf-text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(15px, calc(var(--u) * 3.5));
	font-style: italic;
	line-height: 1.5;
	text-shadow: 0 0 1px rgba(60, 30, 5, 0.25);
}
.mf-word {
	display: inline-block;
}
.mf-papyrus.is-open .mf-word {
	animation: mf-ink 0.8s ease both;
}
@keyframes mf-ink {
	from { opacity: 0; filter: blur(5px); transform: translateY(0.2em); }
	to   { opacity: 1; filter: blur(0);   transform: none; }
}

/* ---------- Малыши в нижних углах ---------- */

.mf-kid {
	position: absolute;
	bottom: 0;
	width: calc(var(--u) * 23);
	z-index: 7; /* ниже папируса: малыши выглядывают из-за свитка */
	pointer-events: none;
	transform: translateY(108%);
	transition: transform 0.75s cubic-bezier(0.3, 1.55, 0.5, 1);
	filter: drop-shadow(0 calc(var(--u) * 0.4) calc(var(--u) * 0.8) rgba(0, 0, 0, 0.45));
}
.mf-kid svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.mf-kid--girl { left: calc(var(--u) * 1.2); }
.mf-kid--boy  { right: calc(var(--u) * 1.2); transition-delay: 0.3s; }
.mf-wrap.is-kids .mf-kid {
	transform: translateY(6%);
}
.mf-kid-arm {
	animation: mf-wave 0.9s ease-in-out infinite alternate;
}
.mf-kid-arm--l { transform-origin: 22px 102px; }
.mf-kid-arm--r { transform-origin: 78px 102px; animation-delay: -0.45s; }
.mf-kid-eyes {
	transform-origin: 50px 53px;
	animation: mf-blink 4s infinite;
}
@keyframes mf-wave {
	from { transform: rotate(-10deg); }
	to   { transform: rotate(14deg); }
}
@keyframes mf-blink {
	0%, 92%, 100% { transform: scaleY(1); }
	95%           { transform: scaleY(0.1); }
}

/* ---------- Кнопка ---------- */

.mf-wrap .mf-actions {
	margin-top: 1.3em;
}
.mf-wrap .mf-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 0.95em 2.4em;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	color: #2a1245;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background: linear-gradient(180deg, #ffe9a8, #e9c46a 55%, #c99a38);
	box-shadow:
		0 4px 0 #8f6a1f,
		0 10px 24px rgba(120, 80, 220, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
	animation: mf-glow 2.4s ease-in-out infinite;
}
.mf-wrap .mf-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	filter: brightness(1.06);
}
.mf-wrap .mf-btn:active:not(:disabled) {
	transform: translateY(3px);
	box-shadow: 0 1px 0 #8f6a1f, 0 6px 16px rgba(120, 80, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.mf-wrap .mf-btn:focus-visible {
	outline: 3px solid #8e6bff;
	outline-offset: 3px;
}
.mf-wrap .mf-btn:disabled {
	cursor: progress;
	filter: saturate(0.7) brightness(0.92);
	animation: none;
}
@keyframes mf-glow {
	0%, 100% { box-shadow: 0 4px 0 #8f6a1f, 0 10px 24px rgba(120, 80, 220, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
	50%      { box-shadow: 0 4px 0 #8f6a1f, 0 10px 34px rgba(160, 110, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
}
.mf-noscript {
	margin-top: 1em;
	font-size: 0.9em;
	opacity: 0.8;
}

/* ---------- Для тех, у кого отключены анимации ---------- */

@media (prefers-reduced-motion: reduce) {
	.mf-card { display: none !important; }
	.mf-stars::before,
	.mf-stars::after,
	.mf-wrap .mf-btn { animation: none; }
	.mf-papyrus,
	.mf-sheet { transition: none !important; }
	.mf-papyrus.is-open .mf-word { animation: none; }
	.mf-kid { transition: none; }
	.mf-kid-arm,
	.mf-kid-eyes { animation: none; }
}