/* Карта лиц — тёмная база. Цвета из токенов сайта. */

.mg-faces-main {
	padding: clamp(2rem, 5vw, 4rem) var(--mg-gutter, 1.25rem) clamp(3rem, 7vw, 6rem);
}

.mg-faces {
	max-width: 56rem;
	margin: 0 auto;
}

.mg-faces__head {
	text-align: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mg-faces__head h1 {
	margin: 0 0 .6rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 500;
	color: var(--mg-ink, #f3ebe0);
}

.mg-faces__intro {
	margin: 0;
	font-family: var(--mg-serif, Georgia, serif);
	font-style: italic;
	color: var(--mg-gold, #c4a574);
	font-size: 1.15rem;
	line-height: 1.45;
}

.mg-face-tile__soon {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mg-surface, #1a1612) 80%, transparent);
	border: 1px solid color-mix(in srgb, var(--mg-gran-accent) 45%, transparent);
	color: var(--mg-muted, #9a8f7e);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.mg-face-tile__sil-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mg-face-card__path-hint {
	margin: 0 0 .85rem;
	color: var(--mg-muted, #9a8f7e);
	font-style: italic;
}

.mg-faces__tropa-live {
	margin-top: 1.5rem;
}

.mg-faces__tropa-live-title {
	margin: 0 0 .85rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--mg-gold, #c4a574);
}


.mg-faces section {
	margin-top: clamp(2.4rem, 5vw, 3.6rem);
}

.mg-faces section > h2 {
	margin: 0 0 1.2rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	font-weight: 500;
	color: var(--mg-ink, #f3ebe0);
}

.mg-faces__hint,
.mg-faces__demo-note {
	color: var(--mg-muted, #9a8f7e);
	font-size: .95rem;
	line-height: 1.5;
}

.mg-faces__gate {
	max-width: 36rem;
	margin: 0 auto;
	padding: 1.6rem;
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
	text-align: center;
}

.mg-faces__gate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.2rem;
}

/* Липкая навигация по граням */
.mg-faces__nav {
	position: sticky;
	top: var(--mg-head-h, 0px);
	z-index: 10;
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	padding: .85rem 0;
	margin: 0 0 1.5rem;
	background: color-mix(in srgb, var(--global-palette9, var(--mg-paper, #0b0a08)) 92%, transparent);
	border-bottom: 1px solid var(--global-palette7, var(--mg-line, rgba(196, 165, 116, .28)));
	scrollbar-width: thin;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.mg-faces__nav a {
	flex-shrink: 0;
	padding: .45rem .95rem;
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--global-palette5, var(--mg-muted, #9a8f7e));
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .2s, border-color .2s, color .2s;
}

.mg-faces__nav a.is-active,
.mg-faces__nav a:hover {
	background: var(--global-palette8, color-mix(in srgb, var(--mg-surface, #1a1612) 80%, transparent));
	border-color: var(--global-palette1, var(--mg-gold, #c4a574));
	color: var(--global-palette3, var(--mg-ink, #f3ebe0));
}

.mg-faces__label {
	display: block;
	margin-bottom: .55rem;
	font-family: var(--mg-sans, system-ui, sans-serif);
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-gold, #c4a574);
}

/* Карточка */
.mg-face-card {
	display: grid;
	gap: 1.4rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
	background: color-mix(in srgb, var(--mg-surface, #1a1612) 80%, transparent);
}

@media (min-width: 720px) {
	}

.mg-face-card__portrait {
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 3 / 4;
	background: #12100e;
}

.mg-face-card__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mg-face-card__name {
	margin: 0 0 1.2rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: clamp(1.6rem, 2.8vw, 2rem);
	color: var(--mg-gold, #c4a574);
}

.mg-face-card__list {
	margin: 0 0 1rem;
	padding: 0;
}

.mg-face-card__list > div {
	margin: 0 0 1rem;
}

.mg-face-card__list dt {
	margin: 0 0 .3rem;
	font-family: var(--mg-sans, system-ui, sans-serif);
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-gold, #c4a574);
}

.mg-face-card__list dd {
	margin: 0;
	line-height: 1.55;
	color: var(--mg-text, #d7cbb8);
}

.mg-face-card__key dd,
.mg-face-card__key p {
	font-family: var(--mg-serif, Georgia, serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--mg-ink, #f3ebe0);
}

.mg-face-card__question {
	margin: 0 0 1.2rem;
	padding: .9rem 1rem;
	border-left: 2px solid var(--mg-gold, #c4a574);
	line-height: 1.5;
	color: var(--mg-ink, #f3ebe0);
	font-style: italic;
}

.mg-face-card__bridge {
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--mg-line-gold, rgba(196, 165, 116, .4));
}

.mg-face-card__bridge p {
	margin: 0 0 .85rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-style: italic;
}

.mg-face-card__meta {
	margin: .8rem 0 0;
	font-size: .85rem;
	color: var(--mg-muted, #9a8f7e);
}

.mg-face-card.is-personal {
	margin-bottom: 1.2rem;
}

.mg-face-card__label {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--mg-sans, system-ui, sans-serif);
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-gold, #c4a574);
}

.mg-face-card p {
	margin: 0 0 1.1rem;
	line-height: 1.55;
	color: var(--mg-text, #d7cbb8);
}

.mg-face-card__back {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mg-line-gold, rgba(196, 165, 116, .4));
}

.mg-face-card__field {
	margin-top: 1rem;
	display: grid;
	gap: .7rem;
}

.mg-face-card__field label {
	font-size: .9rem;
	color: var(--mg-muted, #9a8f7e);
}

.mg-face-card__field textarea,
.mg-tropa__answer textarea {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
	background: color-mix(in srgb, var(--mg-paper, #0b0a08) 70%, transparent);
	color: var(--mg-ink, #f3ebe0);
	font: inherit;
	resize: vertical;
}

.mg-face-card__status,
.mg-tropa__status,
.mg-opros__status {
	font-size: .85rem;
	color: var(--mg-muted, #9a8f7e);
}

.mg-face-card__locked {
	color: var(--mg-muted, #9a8f7e);
	font-style: italic;
}

/* ===== Карта: визуальная сетка ===== */
.mg-faces__gran {
	--mg-gran-accent: var(--mg-gold, #c4a574);
	margin-bottom: 2.4rem;
	padding-bottom: 1.8rem;
	border-bottom: 1px solid var(--mg-line, rgba(196, 165, 116, .22));
}

.mg-faces__gran:last-child { border-bottom: none; }

.mg-faces__gran[data-gran="ten"] { --mg-gran-accent: #4a6fa5; }
.mg-faces__gran[data-gran="maska"] { --mg-gran-accent: #c4a574; }
.mg-faces__gran[data-gran="ranenyy"] { --mg-gran-accent: #8b3a4a; }
.mg-faces__gran[data-gran="celitel"] { --mg-gran-accent: #5a8f6a; }
.mg-faces__gran[data-gran="voin"] { --mg-gran-accent: #a84a3a; }
.mg-faces__gran[data-gran="rebjonok"] { --mg-gran-accent: #c9a84a; }
.mg-faces__gran[data-gran="tvorec"] { --mg-gran-accent: #c47a3a; }
.mg-faces__gran[data-gran="svidetel"] { --mg-gran-accent: #c8d0d8; }

.mg-faces__gran-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 0 1.15rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.mg-faces__gran-head:focus-visible {
	outline: 2px solid var(--mg-gran-accent);
	outline-offset: 4px;
}

.mg-faces__gran-title {
	margin: 0;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--mg-gran-accent);
	letter-spacing: -.01em;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.mg-faces__gran-done {
	color: var(--mg-gold, #c4a574);
	font-size: 1rem;
}

.mg-faces__gran-pair-hint {
	margin: -.4rem 0 1rem;
}

.mg-faces__gran-progress {
	display: flex;
	gap: 6px;
}

.mg-faces__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mg-gran-accent) 25%, transparent);
	transition: background .3s ease, box-shadow .3s ease;
}

.mg-faces__dot.is-filled {
	background: var(--mg-gran-accent);
	box-shadow: 0 0 8px color-mix(in srgb, var(--mg-gran-accent) 55%, transparent);
}

.mg-faces__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem;
}

@media (min-width: 760px) {
	.mg-faces__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 1100px) {
	.mg-faces__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.mg-faces__gran[data-collapsed="1"] .mg-faces__grid {
	display: none;
}

.mg-face-tile {
	--mg-tile-delay: 0ms;
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 3 / 4;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--mg-gran-accent, var(--mg-gold)) 35%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--mg-surface, #1a1612) 85%, transparent);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	opacity: 0;
	animation: mg-tile-in .5s ease forwards;
	animation-delay: var(--mg-tile-delay);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .3s ease;
}

.mg-face-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35);
	border-color: var(--mg-gran-accent, var(--mg-gold));
}

.mg-face-tile.is-marked:hover {
	transform: rotate(-1.2deg);
}

.mg-face-tile:focus-visible {
	outline: 2px solid var(--mg-gran-accent, var(--mg-gold));
	outline-offset: 3px;
}

.mg-face-tile__image {
	display: block;
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--mg-paper, #0b0a08) 70%, transparent);
}

.mg-face-tile__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease, filter .3s ease;
}

.mg-face-tile:hover .mg-face-tile__image img {
	transform: scale(1.04);
}

.mg-face-tile__placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--mg-gran-accent) 35%, #1a1a2e) 0%, #0f0f1a 100%);
}

.mg-face-tile__sil--ten     { background: radial-gradient(circle at 50% 30%, #1a1a2e 0%, #0f0f1a 100%); }
.mg-face-tile__sil--maska   { background: radial-gradient(circle at 50% 30%, #d4a24e 0%, #8a6b2e 100%); }
.mg-face-tile__sil--ranenyy { background: radial-gradient(circle at 50% 30%, #7a2830 0%, #3d1014 100%); }
.mg-face-tile__sil--celitel { background: radial-gradient(circle at 50% 30%, #2d5a3d 0%, #152b1c 100%); }
.mg-face-tile__sil--voin    { background: radial-gradient(circle at 50% 30%, #8a3a1a 0%, #3d1808 100%); }
.mg-face-tile__sil--rebjonok{ background: radial-gradient(circle at 50% 30%, #e8c060 0%, #8a6b2e 100%); }
.mg-face-tile__sil--tvorec  { background: radial-gradient(circle at 50% 30%, #d87a1a 0%, #6b3808 100%); }
.mg-face-tile__sil--svidetel{ background: radial-gradient(circle at 50% 30%, #d8d8e8 0%, #6a6a7a 100%); }

.mg-face-tile__placeholder::before {
	content: attr(data-initial);
	position: relative;
	z-index: 1;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 500;
	letter-spacing: .04em;
	color: color-mix(in srgb, #fff 72%, transparent);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.mg-face-tile__placeholder::after {
	content: "";
	position: absolute;
	inset: 16% 26% 26%;
	border-radius: 50% 50% 42% 42% / 55% 55% 40% 40%;
	border: 1.5px solid color-mix(in srgb, #fff 28%, transparent);
	box-shadow: inset 0 -18px 28px rgba(0, 0, 0, .18);
	opacity: .85;
}

.mg-faces__gran[data-gran="maska"] .mg-face-tile__placeholder::after {
	border-radius: 42% 42% 18% 18%;
	inset: 22% 22% 30%;
}
.mg-faces__gran[data-gran="ranenyy"] .mg-face-tile__placeholder::after {
	clip-path: polygon(50% 8%, 92% 88%, 8% 88%);
	border-radius: 0;
	inset: 18% 22% 22%;
}
.mg-faces__gran[data-gran="celitel"] .mg-face-tile__placeholder::after {
	border-radius: 50%;
	inset: 22% 24% 28%;
}
.mg-faces__gran[data-gran="voin"] .mg-face-tile__placeholder::after {
	clip-path: polygon(50% 10%, 88% 35%, 78% 88%, 22% 88%, 12% 35%);
	border-radius: 0;
}
.mg-faces__gran[data-gran="svidetel"] .mg-face-tile__placeholder::after {
	border-radius: 50%;
	inset: 28% 28% 34%;
	box-shadow: 0 0 0 6px color-mix(in srgb, #fff 12%, transparent);
}

.mg-face-tile__name {
	display: block;
	padding: .7rem .75rem .45rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mg-ink, #f3ebe0);
}

.mg-face-tile.is-closed {
	opacity: 0;
}

.mg-face-tile.is-closed.is-visible,
.mg-face-tile.is-closed {
	/* финальная opacity после анимации */
}

@keyframes mg-tile-in {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.mg-face-tile.is-closed {
	animation-name: mg-tile-in-closed;
}

@keyframes mg-tile-in-closed {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to { opacity: .55; transform: translateY(0) scale(1); }
}

.mg-face-tile.is-closed .mg-face-tile__image img,
.mg-face-tile.is-closed .mg-face-tile__placeholder {
	filter: grayscale(.85) blur(1.2px) brightness(.75);
}

.mg-face-tile.is-closed .mg-face-tile__name {
	color: var(--mg-muted, #9a8f7e);
}

.mg-face-tile.is-closed:hover {
	opacity: .72;
}

.mg-face-tile.is-closed.is-shake {
	animation: mg-tile-shake .4s ease;
}

@keyframes mg-tile-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

.mg-face-tile.is-open {
	border-color: var(--global-palette1, var(--mg-gran-accent, var(--mg-gold)));
	box-shadow:
		0 0 0 3px var(--global-palette1, var(--mg-gold, #c4a574)),
		0 12px 30px -12px rgba(0, 0, 0, .3),
		0 0 20px color-mix(in srgb, var(--global-palette1, var(--mg-gold)) 35%, transparent);
	animation: mg-tile-in .5s ease forwards, mg-pulse 2.5s ease-in-out .5s infinite;
}

@keyframes mg-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 3px var(--global-palette1, var(--mg-gold, #c4a574)),
			0 12px 30px -12px rgba(0, 0, 0, .3),
			0 0 14px color-mix(in srgb, var(--global-palette1, var(--mg-gold)) 28%, transparent);
	}
	50% {
		box-shadow:
			0 0 0 5px color-mix(in srgb, var(--global-palette1, var(--mg-gold)) 55%, transparent),
			0 12px 30px -12px rgba(0, 0, 0, .3),
			0 0 28px color-mix(in srgb, var(--global-palette1, var(--mg-gold)) 45%, transparent);
	}
}

.mg-face-tile.is-marked {
	border-color: var(--mg-gran-accent, var(--mg-gold));
	background: linear-gradient(180deg, var(--global-palette9, color-mix(in srgb, var(--mg-gran-accent) 16%, #1a1612)) 0%, var(--global-palette8, color-mix(in srgb, var(--mg-surface, #1a1612) 88%, transparent)) 100%);
	box-shadow: 0 0 0 2px var(--global-palette1, var(--mg-gold, #c4a574)) inset;
}

.mg-face-tile.is-flash {
	animation: mg-tile-flash .55s ease;
}

@keyframes mg-tile-flash {
	0% { filter: brightness(1); }
	40% { filter: brightness(1.35); }
	100% { filter: brightness(1); }
}

.mg-face-tile__mark {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mg-gran-accent, var(--mg-gold));
	color: #0b0a08;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

.mg-face-tile__lock {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--global-palette7, color-mix(in srgb, var(--mg-surface, #1a1612) 70%, #000));
	color: var(--global-palette5, var(--mg-muted, #9a8f7e));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .75rem;
	opacity: .9;
	line-height: 1;
}

.mg-face-tile__lock svg {
	display: block;
}

.mg-face-tile__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--global-palette1, var(--mg-gran-accent, var(--mg-gold)));
	color: #0b0a08;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.mg-face-tile__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0 .75rem .75rem;
	font-size: .7rem;
	line-height: 1.35;
	color: var(--mg-muted, #9a8f7e);
	font-style: italic;
}

.mg-face-tooltip {
	position: absolute;
	transform: translateX(-50%) translateY(8px);
	max-width: 240px;
	padding: .55rem .85rem;
	border-radius: 8px;
	background: var(--mg-ink, #f3ebe0);
	color: #1a1612;
	font-size: .8rem;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	transition: opacity .2s, transform .2s;
	pointer-events: none;
	z-index: 9999;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.mg-face-tooltip.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.mg-face-tooltip__action {
	display: inline-block;
	margin-top: .45rem;
	pointer-events: auto;
	color: #1a1612;
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.mg-faces__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .7rem;
	}
	.mg-face-tile__name {
		font-size: .8rem;
		padding: .5rem;
	}
	.mg-faces__gran {
		margin-bottom: 1.6rem;
		padding-bottom: 1.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mg-face-tile,
	.mg-face-tile.is-open,
	.mg-face-tile__image img,
	.mg-faces__dot,
	.mg-face-tooltip {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
	}
	.mg-face-tile.is-closed {
		opacity: .55 !important;
	}
}

/* Тропа */
.mg-tropa {
	margin-bottom: 1.5rem;
	padding: 1.3rem;
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
}

.mg-tropa h3 {
	margin: 0 0 .4rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: 1.35rem;
}

.mg-tropa__intro {
	margin: 0 0 1rem;
	color: var(--mg-muted, #9a8f7e);
}

.mg-tropa__steps {
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}

.mg-tropa__step {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: .6rem 1rem;
	align-items: start;
	margin-bottom: 1rem;
	opacity: .55;
}

.mg-tropa__step.is-open {
	opacity: 1;
}

.mg-tropa__step-num {
	font-family: var(--mg-serif, Georgia, serif);
	font-size: 1.4rem;
	color: var(--mg-gold, #c4a574);
}

.mg-tropa__answer {
	display: grid;
	gap: .7rem;
}

.mg-tropa__done {
	color: var(--mg-gold, #c4a574);
	font-style: italic;
}

/* Опрос */
.mg-opros {
	padding: 1.6rem;
	border: 1px solid var(--mg-line-gold, rgba(196, 165, 116, .45));
	text-align: center;
	margin-bottom: 2rem;
}

.mg-opros h2 {
	margin: 0 0 .5rem;
	font-family: var(--mg-serif, Georgia, serif);
}

.mg-opros__intro {
	margin: 0 0 1.2rem;
	color: var(--mg-muted, #9a8f7e);
}

.mg-opros__options {
	display: grid;
	gap: .85rem;
	text-align: left;
}

.mg-opros__option {
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
	border-radius: 10px;
	background: color-mix(in srgb, var(--mg-surface, #1a1612) 70%, transparent);
	color: var(--mg-ink, #f3ebe0);
	font: inherit;
	font-size: 1.02rem;
	line-height: 1.45;
	cursor: pointer;
	transition: border-color .2s, transform .2s, background .2s;
}

.mg-opros__option:hover,
.mg-opros__option:focus-visible {
	border-color: var(--mg-gold, #c4a574);
	background: color-mix(in srgb, var(--mg-gold, #c4a574) 10%, transparent);
	transform: translateY(-1px);
	outline: none;
}

.mg-pair.is-open {
	padding: 1.3rem;
	border: 1px solid var(--mg-line-gold, rgba(196, 165, 116, .45));
	margin-bottom: 1rem;
}

.mg-pair h3 {
	margin: 0 0 .45rem;
	font-family: var(--mg-serif, Georgia, serif);
	color: var(--mg-gold, #c4a574);
}

.mg-pair__intro {
	margin: 0 0 .9rem;
	color: var(--mg-muted, #9a8f7e);
	font-style: italic;
}

.mg-pair__text p {
	margin: 0;
	line-height: 1.55;
	color: var(--mg-text, #d7cbb8);
}

.mg-btn--ghost {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .65rem 1.1rem;
	border: 1px solid var(--mg-line-gold, rgba(196, 165, 116, .45));
	background: transparent;
	color: var(--mg-ink, #f3ebe0);
	text-decoration: none;
	font: inherit;
	cursor: pointer;
}

.mg-btn--ghost:hover {
	border-color: var(--mg-gold, #c4a574);
}

/* Мост к практике */
.mg-faces__intro-mini {
	max-width: 40rem;
	margin: 1.1rem auto 0;
	padding: 1rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--mg-gold, #d4a24e) 28%, transparent);
	background: color-mix(in srgb, var(--mg-surface, #14110d) 80%, transparent);
	font-size: .95rem;
	line-height: 1.55;
	color: var(--mg-text, #d2c6b4);
	text-align: left;
}

.mg-faces__intro-mini p {
	margin: 0 0 .45rem;
}

.mg-faces__intro-mini strong {
	color: var(--mg-ink, #f2e8d5);
	font-weight: 600;
}

.mg-faces__help-link,
.mg-faces__help a {
	color: var(--mg-gold, #d4a24e);
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}

.mg-faces__help {
	text-align: center;
	font-size: .9rem;
	color: var(--mg-muted, #8a8175);
	margin: 2rem 0 0;
}

/* === Панель роли (§6.2) === */
.mg-role-panel { position: fixed; inset: 0; z-index: 900; }
.mg-role-panel[hidden] { display: none; }
.mg-role-panel__backdrop {
	position: absolute; inset: 0; background: rgba(10, 14, 20, .5);
}
.mg-role-panel__body {
	position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw;
	background: #faf6ef; color: #2d3748; overflow-y: auto; padding: 1.5rem;
	box-shadow: -12px 0 40px rgba(0,0,0,.18);
}
.mg-role-panel__inner { position: relative; }
.mg-role-panel__close {
	position: absolute; top: .25rem; right: .25rem; width: 36px; height: 36px;
	border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: inherit;
}
.mg-role-panel__tabs {
	display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem;
	padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.08);
}
.mg-role-panel__tabs button {
	border: 1px solid rgba(0,0,0,.14); background: transparent; padding: .4rem .7rem;
	border-radius: 999px; cursor: pointer; font: inherit; color: inherit;
}
.mg-role-panel__tabs button.is-active { background: #2d3748; color: #faf6ef; border-color: #2d3748; }

@media (max-width: 1023px) {
	.mg-role-panel__body { top: auto; left: 0; width: 100%; height: 92vh; border-radius: 16px 16px 0 0; }
}

/* === Состояния плиток (§6.2) === */
.mg-face-tile.is-idle { opacity: .4; }
.mg-face-tile.is-idle .mg-face-tile__image img,
.mg-face-tile.is-idle .mg-face-tile__placeholder { filter: grayscale(.3); }
.mg-face-tile.is-idle .mg-face-tile__name { color: var(--mg-muted, #9a8f7e); }

.mg-face-tile.is-seen { border-color: var(--mg-gran-accent, var(--mg-gold)); }
.mg-face-tile__seen-dot {
	position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
	border-radius: 50%; background: var(--mg-gran-accent, var(--mg-gold));
}

.mg-face-tile.is-me { border-color: var(--mg-gran-accent, var(--mg-gold)); }
.mg-face-tile.is-me.s-1 { background: color-mix(in srgb, var(--mg-gran-accent, var(--mg-gold)) 12%, var(--mg-surface, #1a1612)); }
.mg-face-tile.is-me.s-2 { background: color-mix(in srgb, var(--mg-gran-accent, var(--mg-gold)) 22%, var(--mg-surface, #1a1612)); }
.mg-face-tile.is-me.s-3 { background: color-mix(in srgb, var(--mg-gran-accent, var(--mg-gold)) 34%, var(--mg-surface, #1a1612)); }

.mg-face-tile__explored {
	position: absolute; top: 8px; left: 8px; font-size: .8rem; color: var(--mg-gold, #d4a24e);
}
.mg-face-tile.is-met { box-shadow: 0 0 0 2px var(--mg-gold, #d4a24e); }

.mg-face-tile.is-soon { cursor: default; opacity: .5; }
.mg-face-tile.is-soon .mg-face-tile__image img,
.mg-face-tile.is-soon .mg-face-tile__placeholder { filter: grayscale(.5) blur(1px); }


/* Вкладки граней (под-шаг 5) */
.mg-faces__tabs {
	border-bottom: 1px solid var(--global-palette7, var(--mg-line, rgba(196, 165, 116, .28)));
	padding-bottom: .85rem;
	margin-bottom: 1.5rem;
}

.mg-faces__tab {
	margin: 0 .5rem .5rem 0;
	padding: .45rem .95rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--global-palette5, var(--mg-muted, #9a8f7e));
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s, opacity .2s;
}

.mg-faces__tab:hover {
	opacity: 1;
}

.mg-faces__tab.is-active {
	background: var(--global-palette8, color-mix(in srgb, var(--mg-surface, #1a1612) 80%, transparent));
	border-color: var(--global-palette1, var(--mg-gold, #c4a574));
	color: var(--global-palette3, var(--mg-ink, #f3ebe0));
}

.mg-faces__tab-soon {
	margin-left: .4rem;
	opacity: .6;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.mg-faces__gran-soon {
	padding: 2.2rem 1.5rem;
	border: 1px dashed color-mix(in srgb, var(--mg-gold, #c4a574) 35%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--mg-surface, #1a1612) 45%, transparent);
	text-align: center;
}

.mg-faces__gran-soon h2 {
	margin: 0 0 .6rem;
	font-family: var(--mg-serif, Georgia, serif);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--mg-ink, #f3ebe0);
}

.mg-faces__gran-soon p {
	margin: 0 0 1.2rem;
	color: var(--mg-muted, #9a8f7e);
	line-height: 1.5;
}

.mg-faces__gran-soon-status {
	margin-top: .8rem;
	font-size: .85rem;
	color: var(--mg-muted, #9a8f7e);
}

.mg-faces__gran-soon-status.is-ok {
	color: var(--mg-gold, #c4a574);
}


/* Профиль «Громче всего» (под-шаг 2) */
.mg-faces__profile {
	margin: -.6rem 0 1.2rem;
	text-align: center;
}

.mg-faces__profile-text {
	margin: 0;
	color: var(--mg-muted, #9a8f7e);
	font-family: var(--mg-serif, Georgia, serif);
	font-size: 1.05rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.mg-faces__profile-text a {
	color: var(--mg-gold, #c4a574);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--mg-gold, #c4a574) 45%, transparent);
}

.mg-faces__profile-text a:hover {
	color: var(--mg-ink, #f3ebe0);
}


/* Заголовок роли в шторке: тёмная тема — чернила, светлая — бронза (в faces-light.css). */
.mg-role-panel__body .mg-face-card__name {
	color: var(--mg-ink, #f2e8d5);
}


/* Отклики (под-шаг 1h). Карточка тематическая (--mg-surface): тёмная в dark, светлая в light. */
.mg-replies__list { margin-bottom: 1rem; }
.mg-replies__empty { color: var(--mg-muted, #8a8175); font-size: .9rem; }
.mg-reply {
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
	border-radius: 10px;
	padding: .8rem .9rem;
	margin-bottom: .7rem;
	background: color-mix(in srgb, var(--mg-surface, #1a1612) 70%, transparent);
}
.mg-reply.is-author {
	border-left: 3px solid var(--mg-gold, #d4a24e);
}
.mg-reply.is-pending { opacity: .72; }
.mg-reply__meta { font-size: .78rem; color: var(--mg-muted, #8a8175); margin-bottom: .4rem; }
.mg-reply.is-author .mg-reply__meta { color: var(--mg-gold, #d4a24e); }
.mg-reply__text { margin: 0 0 .5rem; color: var(--mg-text, #cfc4b0); line-height: 1.5; }
.mg-reply__react {
	background: transparent;
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
	border-radius: 999px;
	padding: .25rem .6rem;
	cursor: pointer;
	color: var(--mg-muted, #8a8175);
	font-size: .78rem;
}
.mg-reply__react.is-reacted { color: var(--mg-gold, #d4a24e); border-color: var(--mg-gold, #d4a24e); }
.mg-replies__form textarea {
	width: 100%;
	background: var(--mg-surface, #1a1612);
	color: var(--mg-text, #cfc4b0);
	border: 1px solid var(--mg-line, rgba(196, 165, 116, .28));
	border-radius: 8px;
	padding: .6rem;
	margin-bottom: .5rem;
	font: inherit;
}
.mg-replies__name { display: block; font-size: .85rem; color: var(--mg-muted, #8a8175); margin-bottom: .6rem; }
.mg-replies__note { font-size: .8rem; color: var(--mg-muted, #8a8175); margin-top: .8rem; line-height: 1.4; }

/* Сцена-крючок: наследовал цвет панели #2d3748 — нечитаем на тёмной карточке в dark (flash A6). */
.mg-scene-row__hook { color: var(--mg-text, #cfc4b0); }
.mg-scene-row__mark { color: var(--mg-gold, #d4a24e); }


/* Ответить на отклик */
.mg-reply__reply {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--mg-muted, #8a8175);
	font-size: .78rem;
	margin-left: .6rem;
}
.mg-reply__reply:hover { color: var(--mg-gold, #d4a24e); }
.mg-replies__replyto { font-size: .78rem; color: var(--mg-muted, #8a8175); }


.mg-reply.is-child { margin-left: 1.3rem; border-left: 2px solid var(--mg-line, rgba(196, 165, 116, .28)); }

/* ==========================================================================
   PREMIUM — карта ролей (ночная смена)
   ========================================================================== */

.mg-face-card {
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(242, 232, 213, .04) inset, 0 16px 36px -22px rgba(0, 0, 0, .6);
	transition: border-color .22s ease, box-shadow .22s ease;
}

.mg-face-card:hover {
	border-color: var(--mg-line-gold, rgba(196, 165, 116, .45));
	box-shadow: 0 1px 0 rgba(242, 232, 213, .05) inset, 0 22px 48px -24px rgba(0, 0, 0, .7);
}

/* «Подробнее о роли» — тихая золотая ссылка со стрелкой. */
.mg-face-card__more {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin: .7rem 0 .25rem;
	font-size: .86rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--mg-gold, #c4a574);
	transition: color .2s ease, transform .2s ease;
}

.mg-face-card__more::after {
	content: "→";
	transition: transform .2s ease;
}

.mg-face-card__more:hover,
.mg-face-card__more:focus-visible {
	color: var(--mg-gold-soft, #e0be88);
	text-decoration: none;
}

.mg-face-card__more:hover::after {
	transform: translateX(3px);
}

.mg-face-card__more:focus-visible {
	outline: 2px solid var(--mg-gold, #c4a574);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ==========================================================================
   PREMIUM — мелкие текстовые ссылки ≥24px (ночная смена, финал)
   ========================================================================== */

.mg-faces__help-link,
.mg-faces__help a,
.mg-faces__profile-text a {
	display: inline-block;
	padding: .3rem 0;
	min-height: 24px;
}