/* Хогвартс — главная страница сайта
 *
 * Иллюстрации лежат в images/home/ (их можно заменить файлами с теми же именами):
 *   hero-castle.jpg  — сцена с замком на первом экране
 *   envelope.webp    — письмо с печатью (прозрачный фон)
 *   feature-*.webp   — восемь иконок возможностей (прозрачный фон)
 *   cabinet-bg.jpg   — фон кабинета ученика
 *   card-welcome.jpg — картинка в карточке приветствия
 *   card-forum.jpg   — картинка в карточке «Форум»
 *   parchment.jpg    — бесшовная текстура пергамента (её же можно брать для форума)
 */

:root {
	--ink: #060a16;
	--night: #0b1424;
	--night-2: #12203a;
	--parchment: #f3e2bb;
	--gilt: #d9a752;
	--gilt-hi: #f6d48a;
	--gilt-line: rgba(217, 167, 82, .55);
	--wax: #8e1820;
	--emerald: #48b884;
	--text: #ece3cf;
	--muted: #b9b09c;
	--house: #d9a752;
	--house-2: #8e1820;
	--display: "Cormorant Garamond", "Times New Roman", serif;
	--body: "Philosopher", Georgia, serif;
}

body.faculty-gryffindor { --house: #c9332a; --house-2: #e8b340; }
body.faculty-slytherin  { --house: #2f8a55; --house-2: #c7ccd1; }
body.faculty-ravenclaw  { --house: #3c5fb8; --house-2: #c4924a; }
body.faculty-hufflepuff { --house: #e3b33b; --house-2: #3b2f27; }

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ink); }
body {
	margin: 0;
	min-height: 100vh;
	color: var(--text);
	font: 18px/1.6 var(--body);
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(40, 70, 120, .35), transparent 70%),
		linear-gradient(180deg, #08101f 0%, var(--ink) 60%, #04070f 100%);
	background-attachment: fixed;
	overflow-x: hidden;
}

a { color: var(--gilt-hi); }
a:hover { color: #fff1cf; }
:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 3px; border-radius: 4px; }

.sky {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.topbar, main, .foot { position: relative; z-index: 1; }
.topbar { z-index: 5; }
.counter dd, .online-big, .journey-steps li::before, .steps li::before, .welcome-meta, .latest span { font-variant-numeric: lining-nums; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; }
h2 {
	font-size: clamp(30px, 4vw, 42px);
	color: var(--parchment);
	text-align: center;
	margin-bottom: 40px;
}

/* ---------- Верхняя полоса ---------- */

.topbar {
	display: flex;
	justify-content: flex-end;
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 32px;
}
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.topnav a { color: var(--text); text-decoration: none; font-size: 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.topnav a:hover { color: var(--gilt-hi); }
.topnav .topnav-cta {
	padding: 7px 18px;
	border: 1px solid var(--gilt);
	border-radius: 999px;
	color: var(--gilt-hi);
	background: rgba(6, 10, 22, .45);
}
.badge {
	display: inline-block;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--wax);
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	text-shadow: none;
}

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

.btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	font: 700 17px/1 var(--body);
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s;
}
.btn-gold {
	background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 60%, #ad7a30);
	color: #2b1606;
	box-shadow: 0 0 22px rgba(246, 212, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-gold:hover { color: #2b1606; transform: translateY(-2px); box-shadow: 0 0 34px rgba(246, 212, 138, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-ghost {
	border: 1px solid rgba(243, 226, 187, .45);
	color: var(--parchment);
	background: rgba(6, 10, 22, .4);
}
.btn-ghost:hover { border-color: var(--gilt-hi); color: var(--gilt-hi); }

/* ---------- Первый экран гостя ---------- */

.stage { max-width: 1180px; margin: -84px auto 0; padding: 0 0 40px; }

.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	align-items: start;
	gap: 30px;
	aspect-ratio: 1180 / 760;
	padding: 96px 70px 0;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(images/home/hero-castle.jpg) center bottom / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);
	mask-composite: intersect;
}
.hero > * { position: relative; z-index: 1; }

.hero-kicker {
	margin: 0 0 12px;
	font: italic 500 22px/1.2 var(--display);
	color: var(--gilt);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.hero h1 {
	font-size: clamp(42px, 5vw, 66px);
	font-weight: 700;
	line-height: 1.05;
	background: linear-gradient(180deg, #fff6dc 0%, var(--gilt-hi) 50%, #c58f43 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .7));
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.counters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
	margin: 22px 0 0;
}
.counter dt { font-size: 13px; color: var(--muted); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.counter dd {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 2px 0 0;
	font: 700 30px/1.1 var(--display);
	color: var(--parchment);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.pulse {
	position: relative;
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--emerald);
	box-shadow: 0 0 10px var(--emerald);
}
.pulse::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--emerald);
	opacity: 0;
	animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
	0% { transform: scale(.4); opacity: .8; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Письмо ---------- */

.letter {
	justify-self: center;
	display: block;
	width: min(400px, 100%);
	margin-top: 10px;
	text-align: center;
	text-decoration: none;
	animation: letter-arrive 1.6s cubic-bezier(.2, .8, .2, 1) both;
}
.letter img {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-5deg);
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .65)) drop-shadow(0 0 0 rgba(255, 214, 140, 0));
	transition: filter .6s ease, transform .6s ease;
}
.letter:hover img, .letter:focus-visible img {
	transform: rotate(-5deg) translateY(-6px);
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(255, 214, 140, .75)) drop-shadow(0 0 60px rgba(255, 196, 110, .45));
}
.letter-hint {
	display: inline-block;
	margin-top: 18px;
	font: italic 600 19px/1.2 var(--display);
	color: var(--gilt-hi);
	transform: rotate(-3deg);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
	transition: color .4s, text-shadow .4s;
}
.letter:hover .letter-hint { color: #fff0c8; text-shadow: 0 0 14px rgba(255, 214, 140, .7); }
@keyframes letter-arrive {
	0% { opacity: 0; transform: translateY(-50px) rotate(-8deg); }
	100% { opacity: 1; transform: none; }
}

/* ---------- Возможности ---------- */

.features {
	position: relative;
	margin: 0 70px;
	padding-top: 6px;
}
.features::before, .features::after {
	content: "";
	position: absolute;
	top: 0;
}
.features::before {
	left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gilt) 8%, var(--gilt) 92%, transparent);
}
.features::after {
	left: 50%;
	width: 9px; height: 9px;
	margin: -4px 0 0 -5px;
	transform: rotate(45deg);
	border: 1px solid var(--gilt-hi);
	background: var(--ink);
}
.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.feature-grid li {
	position: relative;
	padding: 14px 16px 26px;
	text-align: center;
}
.feature-grid li:not(:nth-child(4n+1)) { border-left: 1px solid rgba(217, 167, 82, .28); }
.feature-grid li:nth-child(n+5) { border-top: 1px solid rgba(217, 167, 82, .28); }
.feature-grid li:nth-child(n+6)::before {
	content: "";
	position: absolute;
	top: -5px; left: -5px;
	width: 7px; height: 7px;
	transform: rotate(45deg);
	border: 1px solid var(--gilt);
	background: var(--ink);
}
.feature-grid img {
	display: block;
	width: 100%;
	max-width: 230px;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	margin: 0 auto 10px;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6));
}
.feature-grid h3 { font-size: 21px; font-weight: 700; color: var(--gilt-hi); }
.feature-grid p { margin: 8px auto 0; max-width: 17em; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------- Путь новичка ---------- */

.path { margin: 0 auto; padding: 90px 70px 40px; }
.steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.steps::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gilt) 10%, var(--gilt) 90%, transparent);
	opacity: .5;
}
.steps li { position: relative; text-align: center; counter-increment: step; }
.steps li::before {
	content: counter(step);
	position: relative;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--ink);
	border: 1px solid var(--gilt);
	font: 700 22px/1 var(--display);
	color: var(--gilt-hi);
}
.steps li:last-child::before {
	background: radial-gradient(circle at 35% 30%, var(--gilt-hi), var(--gilt));
	color: #2b1606;
}
.steps h3 { font-size: 21px; color: var(--parchment); }
.steps p { margin: 6px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- Общие рамки и пергамент ---------- */

.frame, .welcome, .place-main, .side-block {
	border: 1px solid var(--gilt-line);
	border-radius: 14px;
	background-color: rgba(8, 14, 28, .86);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .55),
		inset 0 0 0 1px rgba(255, 225, 160, .07),
		0 14px 40px rgba(0, 0, 0, .55);
}

/* Пергамент: класс .hw-parchment можно использовать и на форуме */
.hw-parchment, .journey {
	background: #ecd6a6 url(images/home/parchment.jpg) center / 640px repeat;
	color: #3b2410;
	border: 1px solid #b88d4c;
	border-radius: 10px;
	box-shadow:
		inset 0 0 70px rgba(122, 72, 20, .45),
		inset 0 0 14px rgba(90, 50, 10, .35),
		0 0 0 1px rgba(0, 0, 0, .5),
		0 14px 40px rgba(0, 0, 0, .55);
}

/* ---------- Кабинет ученика ---------- */

body.is-student {
	background:
		linear-gradient(180deg, rgba(4, 7, 15, .35), rgba(4, 7, 15, .7) 70%),
		url(images/home/cabinet-bg.jpg) center top / cover no-repeat fixed,
		var(--ink);
}
body.is-student .sky { display: none; }

.cabinet { max-width: 1060px; margin: 0 auto; padding: 4px 24px 80px; }

.welcome {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 180px;
	padding: 30px 36px;
	background:
		linear-gradient(90deg, rgba(8, 14, 28, .97) 0%, rgba(8, 14, 28, .9) 38%, rgba(8, 14, 28, .1) 78%),
		url(images/home/card-welcome.jpg) right center / auto 100% no-repeat,
		rgba(8, 14, 28, .9);
	overflow: hidden;
}
.welcome-avatar img, .avatar-initial {
	display: grid;
	place-items: center;
	width: 96px; height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--house-2);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .45), 0 0 18px rgba(0, 0, 0, .6);
	background: radial-gradient(circle at 40% 35%, #26306a, #121940);
	font: 700 44px/1 var(--display);
	color: var(--parchment);
}
.welcome-greet { margin: 0; font: italic 500 23px/1.2 var(--display); color: var(--gilt); }
.welcome h1 { font-size: clamp(34px, 4.6vw, 52px); color: var(--parchment); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.welcome-meta { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.welcome-meta .sep {
	display: inline-block;
	width: 4px; height: 4px;
	margin: 0 10px;
	border-radius: 50%;
	background: var(--gilt);
	vertical-align: middle;
}
.crest {
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 88px; height: 106px;
	clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
	background: linear-gradient(160deg, var(--house), color-mix(in srgb, var(--house) 55%, #000));
	box-shadow: inset 0 0 0 3px var(--house-2);
	font: 700 44px/1 var(--display);
	color: var(--house-2);
}

.journey { margin-top: 22px; padding: 30px 36px; }
.journey h2 { color: #4a1c0c; text-align: left; margin-bottom: 24px; font-size: 32px; font-weight: 700; }
.journey-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: j;
}
.journey-steps li {
	position: relative;
	padding-top: 44px;
	counter-increment: j;
	font-size: 15px;
	color: #6e4e2e;
}
.journey-steps li::before {
	content: counter(j);
	position: absolute;
	top: 0; left: 0;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid #a57a40;
	font: 700 18px/1 var(--display);
	color: #6e4e2e;
	background: rgba(255, 246, 220, .45);
}
.journey-steps li::after {
	content: "";
	position: absolute;
	top: 17px; left: 42px; right: 4px;
	height: 1px;
	background: #b8935a;
}
.journey-steps li:last-child::after { display: none; }
.journey-steps li.done { color: #3b2410; }
.journey-steps li.done::before { content: "✓"; background: #2f7a4a; border-color: #2f7a4a; color: #fff; box-shadow: 0 0 0 3px rgba(47, 122, 74, .2); }
.journey-steps li.now { color: #4a1c0c; font-weight: 700; }
.journey-steps li.now::before {
	background: radial-gradient(circle at 38% 32%, #c43a42, var(--wax) 55%, #4a080d);
	border-color: #5e0c12;
	color: #ffe3d0;
	box-shadow: 0 0 0 5px rgba(142, 24, 32, .18), 0 2px 6px rgba(60, 10, 10, .4);
}
.journey-next { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.journey-next p { margin: 0; max-width: 46em; }
.journey-revise { max-width: 46em; }
.journey-revise blockquote { margin: 8px 0 0; padding: 8px 14px; border-left: 3px solid #8e1820; background: rgba(142, 24, 32, .07); font-style: italic; }
.journey .btn-ghost, .journey .btn-gold {
	border: 1px solid #9b6f33;
	background: linear-gradient(180deg, #fff2cc, #ecc982 70%, #d6a95c);
	color: #3a1d08;
	box-shadow: 0 3px 10px rgba(90, 50, 10, .3), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.journey .btn-ghost:hover, .journey .btn-gold:hover { color: #3a1d08; transform: translateY(-1px); box-shadow: 0 0 18px rgba(255, 214, 140, .7), inset 0 1px 0 rgba(255, 255, 255, .7); }

.cabinet-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	margin-top: 26px;
}
.places h2, .side h2 { text-align: left; font-size: 30px; margin-bottom: 16px; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }

.place-main {
	position: relative;
	display: block;
	padding: 30px 34px 26px;
	text-decoration: none;
	color: var(--text);
	background:
		linear-gradient(90deg, rgba(8, 14, 28, .97) 0%, rgba(8, 14, 28, .88) 45%, rgba(8, 14, 28, .1) 85%),
		url(images/home/card-forum.jpg) right center / auto 100% no-repeat,
		rgba(8, 14, 28, .9);
	transition: border-color .25s, box-shadow .25s;
}
.place-main:hover {
	color: var(--text);
	border-color: var(--gilt-hi);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 26px rgba(246, 212, 138, .3), 0 14px 40px rgba(0, 0, 0, .55);
}
.place-main h3 { font-size: 40px; font-weight: 700; color: var(--parchment); }
.place-main p { margin: 6px 0 16px; max-width: 26em; color: var(--muted); }
.place-go { font-weight: 700; color: var(--gilt-hi); text-decoration: underline; text-underline-offset: 4px; }

.soon {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 9px;
	border-radius: 999px;
	border: 1px solid rgba(217, 167, 82, .5);
	font: italic 500 14px/1.4 var(--display);
	color: var(--gilt);
	vertical-align: middle;
}
.place-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 28px;
	margin-top: 22px;
}
.place-col-title {
	margin: 0 0 8px;
	font: italic 600 20px/1.2 var(--display);
	color: var(--gilt);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.place-list {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.place-list a, .place-list div {
	display: block;
	padding: 11px 0 11px 16px;
	border-left: 2px solid color-mix(in srgb, var(--house) 80%, transparent);
	text-decoration: none;
	color: var(--text);
	background: linear-gradient(90deg, rgba(6, 10, 22, .6), transparent);
}
.place-list a:hover { border-left-color: var(--gilt-hi); background: linear-gradient(90deg, rgba(246, 212, 138, .12), transparent); }
.place-list h3 { font-size: 21px; font-weight: 700; color: var(--parchment); }
.place-list p { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
.place-list .is-soon div { border-left-style: dashed; border-left-color: rgba(217, 167, 82, .6); }
.place-list .is-locked div { border-left-color: rgba(185, 176, 156, .3); opacity: .6; }
.place-list .is-locked h3 { color: var(--muted); }
.place-list .is-locked h3::after {
	content: "";
	display: inline-block;
	width: 11px; height: 13px;
	margin-left: 9px;
	vertical-align: 1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2 6V4a3.5 3.5 0 0 1 7 0v2h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2 6V4a3.5 3.5 0 0 1 7 0v2h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.side-block { padding: 22px 24px; margin-bottom: 20px; }
.side-block h2 { font-size: 24px; margin-bottom: 10px; }
.online-big { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 42px/1 var(--display); color: var(--parchment); }
.side-note { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.latest { margin: 0; padding: 0; list-style: none; }
.latest li { padding: 9px 0; border-bottom: 1px solid rgba(217, 167, 82, .16); }
.latest a { display: block; text-decoration: none; color: var(--parchment); line-height: 1.35; }
.latest a:hover { color: var(--gilt-hi); }
.latest span { font-size: 13px; color: var(--muted); }
.side-link { display: inline-block; margin-top: 12px; font-size: 15px; }

/* ---------- Подвал ---------- */

.foot {
	max-width: 1040px;
	margin: 0 auto;
	padding: 34px 24px 42px;
	border-top: 1px solid rgba(217, 167, 82, .2);
	color: var(--muted);
	font-size: 14px;
	text-align: center;
}
.foot p { margin: 4px 0; }
.foot-links a { margin: 0 10px; }

/* ---------- Адаптивность ---------- */

@media (max-width: 1000px) {
	.stage { margin-top: -70px; }
	.hero { grid-template-columns: 1fr; aspect-ratio: auto; min-height: 0; padding: 100px 32px 300px; }
	.hero::before { background-position: center bottom; background-size: auto 100%; }
	.letter { order: -1; width: min(330px, 80vw); margin: 0 0 6px; }
	.features { margin: 0 24px; }
	.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feature-grid li:not(:nth-child(4n+1)) { border-left: 0; }
	.feature-grid li:nth-child(n+5) { border-top: 0; }
	.feature-grid li:nth-child(n+6)::before { display: none; }
	.feature-grid li:nth-child(even) { border-left: 1px solid rgba(217, 167, 82, .28); }
	.feature-grid li:nth-child(n+3) { border-top: 1px solid rgba(217, 167, 82, .28); }
	.path { padding: 70px 24px 30px; }
	.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
	.steps::before { display: none; }
	.cabinet-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	body { font-size: 17px; }
	.topbar { padding: 16px; }
	.topnav { gap: 6px 14px; }
	.hero { padding: 90px 16px 240px; }
	.hero-kicker { font-size: 19px; }
	.counters { gap: 12px 24px; }
	.counter dd { font-size: 26px; }
	.features { margin: 0 16px; }
	.feature-grid li { padding: 12px 8px 20px; }
	.feature-grid h3 { font-size: 18px; }
	.feature-grid p { font-size: 14px; }
	.path { padding: 60px 16px 20px; }
	.steps { grid-template-columns: 1fr; text-align: left; }
	.steps li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; text-align: left; }
	.steps li::before { grid-row: span 2; margin: 0; }
	.cabinet { padding: 4px 16px 60px; }
	.welcome { flex-wrap: wrap; padding: 22px; gap: 16px; background-size: auto 100%, auto 100%, auto; }
	.crest { display: none; }
	.journey { padding: 22px; }
	.journey-steps { grid-template-columns: 1fr; gap: 14px; }
	.journey-steps li { padding: 4px 0 0 46px; min-height: 34px; }
	.journey-steps li::after { display: none; }
	.place-cols { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.letter { animation: none; }
	.pulse::after { animation: none; }
	.btn, .place-main, .letter img, .letter-hint { transition: none; }
}

/* =====================================================================
   Письмо из Хогвартса и бланк заявления
   ===================================================================== */

body.is-letter::before {
	content: "";
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 70vh;
	z-index: 0;
	pointer-events: none;
	background: url(images/home/hero-castle.jpg) center bottom / cover no-repeat;
	opacity: .32;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
	mask-image: linear-gradient(180deg, transparent, #000 60%);
}

.sheet-wrap { max-width: 800px; margin: 0 auto; padding: 4px 20px 70px; }
.sheet {
	position: relative;
	padding: 60px 72px 54px;
	color: #2b1a0e;
	--ink: #2b1a0e;
	--ink-red: #5a1a12;
	--ink-soft: #6b4a2a;
	--ink-line: #8a6436;
	--ink-error: #a3201c;
}
.sheet a { color: var(--ink-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sheet a:hover { color: #8e1820; }

.btn-wax {
	border: 0;
	cursor: pointer;
	padding: 16px 36px;
	font: 700 21px/1 var(--display);
	letter-spacing: .02em;
	color: #f7e2b5;
	background: radial-gradient(circle at 35% 30%, #c43a42 0%, #8e1820 55%, #4a080d 100%);
	box-shadow: 0 0 0 3px rgba(142, 24, 32, .35), 0 8px 18px rgba(60, 10, 10, .45), inset 0 2px 3px rgba(255, 180, 160, .35), inset 0 -3px 6px rgba(0, 0, 0, .35);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
}
.sheet .btn-wax, .sheet .btn-wax:hover { color: #f7e2b5; text-decoration: none; }
.btn-wax:hover, .btn-wax:focus-visible {
	color: #fff1d0;
	transform: translateY(-2px);
	box-shadow: 0 0 0 3px rgba(142, 24, 32, .35), 0 0 26px rgba(246, 190, 110, .55), 0 10px 22px rgba(60, 10, 10, .45), inset 0 2px 3px rgba(255, 180, 160, .35);
}

/* ---------- Письмо ---------- */

.ls-head { text-align: center; }
.ls-school {
	margin: 0;
	font: 600 19px/1.3 var(--display);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.ls-name { margin: 4px 0 6px; font: 700 clamp(40px, 6vw, 58px)/1.05 var(--display); color: var(--ink-red); }
.ls-director { margin: 0; font: italic 500 19px/1.4 var(--display); color: var(--ink-soft); }
.ls-rule { position: relative; height: 18px; margin: 22px auto 30px; max-width: 360px; }
.ls-rule::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ink-line), transparent);
}
.ls-rule span {
	position: absolute;
	left: 50%; top: 50%;
	width: 9px; height: 9px;
	margin: -5px 0 0 -5px;
	transform: rotate(45deg);
	border: 1px solid var(--ink-line);
	background: #e9d3a2;
}
.ls-hand { --emerald-ink: #0c5a3b; color: var(--emerald-ink); font-family: "Marck Script", "Segoe Script", cursive; }
.ls-greet { margin: 0 0 12px; font-size: 31px; line-height: 1.3; }
.ls-text { margin: 0; font-size: 25px; line-height: 1.6; text-indent: 1.6em; hyphens: auto; }
.ls-sign {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	margin: 26px 0 0;
	font-size: 25px;
	line-height: 1.4;
}
.ls-signature { font-size: 38px; line-height: 1.2; margin: 2px 0; }
.ls-action { margin-top: 40px; text-align: center; }

.letter-sheet .ink { display: inline-block; text-indent: 0; }
.letter-sheet.is-pending .ink, .letter-sheet.is-pending .ls-reveal-block { opacity: 0; }
.letter-sheet.is-writing .ink {
	opacity: 0;
	filter: blur(3px);
	animation: ink-in .9s ease forwards;
}
.letter-sheet.is-writing .ls-reveal-block { opacity: 0; animation: ink-in .8s ease forwards; }
.letter-sheet.is-written .ink, .letter-sheet.is-written .ls-reveal-block { opacity: 1; filter: none; animation: none; }
@keyframes ink-in {
	0% { opacity: 0; filter: blur(3px); transform: translateY(3px); }
	100% { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- Бланк заявления ---------- */

.fs-head { text-align: center; margin-bottom: 26px; }
.fs-kicker { margin: 0 0 6px; font: italic 500 19px/1.3 var(--display); color: var(--ink-soft); }
.fs-head h1 { font: 700 clamp(36px, 5vw, 50px)/1.1 var(--display); color: var(--ink-red); }
.fs-sub { margin: 10px auto 0; max-width: 34em; font-size: 16px; color: var(--ink-soft); }
.fs-center { text-align: center; margin: 30px 0 0; }

.fs-note, .fs-rules, .fs-errors {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.55;
}
.fs-note { background: rgba(255, 250, 235, .45); border: 1px solid rgba(138, 100, 54, .4); }
.fs-rules { background: rgba(255, 250, 235, .38); border: 1px dashed rgba(90, 50, 10, .45); }
.fs-rules h2 { margin: 0 0 8px; text-align: left; font: 700 22px/1.2 var(--display); color: var(--ink-red); }
.fs-rules ol { margin: 0; padding-left: 22px; }
.fs-rules li + li { margin-top: 6px; }
.fs-ref { font-style: italic; }
.fs-errors { background: rgba(163, 32, 28, .08); border-left: 3px solid var(--ink-error); color: #6e1410; }
.fs-errors p { margin: 0; font-weight: 700; }
.fs-errors ul { margin: 6px 0 0; padding-left: 20px; }

.fs-form fieldset { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.fs-form legend {
	width: 100%;
	margin-bottom: 16px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(138, 100, 54, .55);
	font: 700 26px/1.2 var(--display);
	color: var(--ink-red);
}
.fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.field { position: relative; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field > label { font: 700 19px/1.2 var(--display); color: var(--ink); }
.field input, .field select, .fs-captcha input[type="text"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 0;
	border-bottom: 1.5px solid var(--ink-line);
	border-radius: 4px 4px 0 0;
	background-color: rgba(255, 252, 240, .55);
	color: var(--ink);
	font: 17px/1.3 var(--body);
	transition: background-color .2s, box-shadow .2s, border-color .2s;
}
.field input::placeholder { color: rgba(107, 74, 42, .55); font-style: italic; }
.field select {
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a1a12' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}
.field input:focus, .field select:focus, .fs-captcha input[type="text"]:focus {
	outline: none;
	background-color: rgba(255, 255, 255, .78);
	border-bottom-color: var(--ink-red);
	box-shadow: 0 2px 0 var(--ink-red);
}
.field.has-error input, .field.has-error select { border-bottom-color: var(--ink-error); background-color: rgba(255, 235, 225, .6); }
.field-error { margin: 6px 0 0; font: italic 500 15px/1.35 var(--body); color: var(--ink-error); }

.hint { position: relative; display: inline-block; margin-left: 8px; vertical-align: 2px; }
.hint-btn {
	display: inline-grid;
	place-items: center;
	width: 22px; height: 22px;
	padding: 0;
	border: 1px solid var(--ink-line);
	border-radius: 50%;
	background: rgba(255, 250, 235, .5);
	color: var(--ink-red);
	font: 700 14px/1 var(--body);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.hint-btn:hover, .hint-btn[aria-expanded="true"] { background: var(--ink-red); border-color: var(--ink-red); color: #f7e2b5; }
.hint-pop {
	position: absolute;
	left: -12px;
	top: calc(100% + 10px);
	z-index: 20;
	width: min(320px, 78vw);
	padding: 12px 14px;
	border-radius: 8px;
	background: #22170e;
	color: #f3e2bb;
	font: 14px/1.5 var(--body);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.hint-pop::before {
	content: "";
	position: absolute;
	left: 18px; top: -6px;
	width: 12px; height: 12px;
	transform: rotate(45deg);
	background: #22170e;
}
.hint-pop em, .hint-pop strong { color: var(--gilt-hi); }
.sheet .hint-pop a { color: var(--gilt-hi); text-decoration-color: rgba(246, 212, 138, .6); }
.sheet .hint-pop a:hover { color: #fff1d0; }

.fs-captcha .captcha-panel, .fs-captcha .inner, .fs-captcha fieldset { margin: 0; padding: 0; border: 0; background: none; }
.fs-captcha .captcha-title { display: none; }
.fs-captcha dl { margin: 0; }
.fs-captcha dt, .fs-captcha dd { margin: 0 0 8px; }
.fs-captcha label { font: 700 18px/1.2 var(--display); }
.fs-captcha img { border-radius: 4px; max-width: 100%; }
.fs-captcha input[type="text"] { max-width: 260px; display: inline-block; }
.fs-qa-note { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.fs-captcha .field input { max-width: 420px; }
.fs-captcha p, .fs-captcha dd { font-size: 15px; line-height: 1.5; }
.fs-captcha .button2 {
	margin-left: 8px;
	padding: 8px 14px;
	border: 1px solid var(--ink-line);
	border-radius: 999px;
	background: rgba(255, 250, 235, .5);
	color: var(--ink-red);
	font: 600 14px/1 var(--body);
	cursor: pointer;
}
.fs-captcha .button2:hover { background: var(--ink-red); color: #f7e2b5; }

.fs-agree { display: grid; gap: 12px; margin: 4px 0 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #8e1820; }
.check.has-error span { color: var(--ink-error); }

.fs-random {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: -4px 0 18px;
}
.fs-random span { font-size: 14px; color: var(--ink-soft); }
.btn-dice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 12px;
	border: 1px solid var(--ink-line);
	border-radius: 999px;
	background: rgba(255, 250, 235, .55);
	color: var(--ink-red);
	font: 700 16px/1 var(--display);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.btn-dice svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .5s ease; }
.btn-dice:hover { background: var(--ink-red); border-color: var(--ink-red); color: #f7e2b5; }
.btn-dice.is-rolling svg { transform: rotate(360deg); }
.field.is-filled input, .field.is-filled select { animation: fill-ink .8s ease; }
@keyframes fill-ink {
	0% { background-color: rgba(12, 90, 59, .18); }
	100% { background-color: rgba(255, 252, 240, .55); }
}
.fs-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
	.sheet { padding: 36px 22px 34px; }
	.fs-grid { grid-template-columns: 1fr; }
	.ls-text { font-size: 22px; }
	.ls-signature { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.letter-sheet .ink, .letter-sheet .ls-reveal-block { opacity: 1 !important; filter: none !important; animation: none !important; }
}

/* =====================================================================
   КАБИНЕТ ПОСТУПАЮЩЕГО
   ===================================================================== */

body.is-newcomer::before {
	content: "";
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 75vh;
	z-index: 0;
	pointer-events: none;
	background: url(images/home/hero-castle.jpg) center bottom / cover no-repeat;
	opacity: .3;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 65%);
	mask-image: linear-gradient(180deg, transparent, #000 65%);
}
body.nc-modal-open { overflow: hidden; }

.topnav .topnav-owl.has-unread {
	padding: 6px 14px;
	border: 1px solid var(--gilt);
	border-radius: 999px;
	color: var(--gilt-hi);
	background: rgba(6, 10, 22, .55);
	animation: owl-pulse 2.6s ease-in-out infinite;
}
@keyframes owl-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(246, 212, 138, 0); }
	50% { box-shadow: 0 0 18px 2px rgba(246, 212, 138, .45); }
}

.nc { max-width: 980px; margin: 0 auto; padding: 0 24px 70px; }

.nc-hello { display: flex; align-items: center; gap: 22px; margin: 6px 0 30px; }
.nc-avatar img, .nc-avatar .avatar-initial {
	display: grid; place-items: center;
	width: 78px; height: 78px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--gilt);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .45);
	background: radial-gradient(circle at 40% 35%, #26306a, #121940);
	font: 700 36px/1 var(--display);
	color: var(--parchment);
}
.nc-kicker { margin: 0; font: italic 500 21px/1.2 var(--display); color: var(--gilt); }
.nc-hello h1 { font-size: clamp(34px, 5vw, 50px); color: var(--parchment); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }

/* Путь — только шаги */
.nc-path {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	counter-reset: nc;
}
.nc-path::before {
	content: "";
	position: absolute;
	top: 15px; left: 7%; right: 7%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(217, 167, 82, .55) 8%, rgba(217, 167, 82, .55) 92%, transparent);
}
.nc-path li { position: relative; text-align: center; counter-increment: nc; color: var(--muted); }
.nc-dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	margin: 0 auto 8px;
	border-radius: 50%;
	border: 1px solid rgba(217, 167, 82, .5);
	background: var(--ink);
	font: 700 15px/1 var(--display);
	color: var(--muted);
}
.nc-dot::after { content: counter(nc); }
.nc-step-name { font: 600 14px/1.2 var(--display); letter-spacing: .02em; }
.nc-path li.is-done { color: var(--parchment); }
.nc-path li.is-done .nc-dot { background: #2f7a4a; border-color: #4fae72; color: #fff; }
.nc-path li.is-done .nc-dot::after { content: "✓"; }
.nc-path li.is-now { color: var(--gilt-hi); }
.nc-path li.is-now .nc-dot {
	border-color: var(--gilt-hi);
	color: #2b1606;
	background: radial-gradient(circle at 35% 30%, var(--gilt-hi), var(--gilt));
	box-shadow: 0 0 16px rgba(246, 212, 138, .55);
}

.nc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }

.nc-owls, .nc-task {
	padding: 22px 26px;
	border: 1px solid var(--gilt-line);
	border-radius: 14px;
	background: rgba(8, 14, 28, .86);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 225, 160, .07), 0 14px 40px rgba(0, 0, 0, .55);
}
.nc-owls h2, .nc-task h2 { margin: 0; text-align: left; font-size: 26px; color: var(--parchment); }
.nc-owls header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.nc-owl-icon {
	width: 34px; height: 34px;
	background: currentColor;
	color: var(--gilt);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 12h32a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V14a2 2 0 0 1 2-2zm0 3v1l16 11 16-11v-1L24 25z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 12h32a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V14a2 2 0 0 1 2-2zm0 3v1l16 11 16-11v-1L24 25z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nc-owls.has-unread { border-color: var(--gilt-hi); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 30px rgba(246, 212, 138, .28), 0 14px 40px rgba(0, 0, 0, .55); }
.nc-owls.has-unread .nc-owl-icon { color: var(--gilt-hi); }
.nc-owls.flash { animation: nc-flash 1.2s ease; }
@keyframes nc-flash { 0%, 100% { transform: none; } 30% { transform: scale(1.02); box-shadow: 0 0 40px rgba(246, 212, 138, .6); } }
.nc-badge {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--wax);
	color: #fff;
	font: 700 13px/1.3 var(--body);
	box-shadow: 0 0 12px rgba(142, 24, 32, .6);
}
.nc-letters { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.nc-letter {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid rgba(217, 167, 82, .3);
	border-radius: 8px;
	background: rgba(255, 255, 255, .03);
	color: var(--text);
	text-align: left;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.nc-letter:hover { border-color: var(--gilt); background: rgba(246, 212, 138, .07); }
.nc-seal {
	flex: none;
	width: 30px; height: 22px;
	border-radius: 3px;
	background: linear-gradient(160deg, #f0dcae, #cfae6e);
	position: relative;
	opacity: .55;
}
.nc-seal::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 11px; height: 11px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #4fae72, #0c5a3b);
}
.nc-letter.is-unread .nc-seal { opacity: 1; box-shadow: 0 0 10px rgba(246, 212, 138, .6); }
.nc-letter-text { display: flex; flex-direction: column; min-width: 0; }
.nc-letter-text b { font: 600 17px/1.3 var(--display); color: var(--parchment); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-letter.is-unread .nc-letter-text b { color: var(--gilt-hi); font-weight: 700; }
.nc-letter-text small { font-size: 13px; color: var(--muted); }
.nc-empty { margin: 0; color: var(--muted); }

.nc-task { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.nc-progress { width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.nc-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gilt), var(--gilt-hi)); transition: width .5s; }
.nc-count { margin: 0; color: var(--muted); }
.nc-count b { color: var(--gilt-hi); font-size: 20px; }
.btn-locked {
	border: 1px dashed rgba(185, 176, 156, .45);
	color: var(--muted);
	cursor: not-allowed;
	opacity: .7;
}
.nc-comment { margin: 0; padding: 8px 14px; border-left: 3px solid var(--wax); background: rgba(142, 24, 32, .12); font-style: italic; }

/* Документы */
.nc-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nc-doc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 14px 16px;
	border: 1px solid var(--gilt-line);
	border-radius: 12px;
	background: rgba(8, 14, 28, .86);
	color: var(--text);
	text-align: center;
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 10px 26px rgba(0, 0, 0, .5);
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.nc-doc:hover { border-color: var(--gilt-hi); box-shadow: 0 0 22px rgba(246, 212, 138, .25), 0 10px 26px rgba(0, 0, 0, .5); transform: translateY(-2px); }
.nc-doc-icon {
	width: 46px; height: 46px;
	background: currentColor;
	color: var(--gilt);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.nc-doc-statute  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 6h20l6 6v30H12z'/%3E%3Cpath d='M32 6v6h6M17 18h16M17 24h16M17 30h10'/%3E%3C/svg%3E"); }
.nc-doc-rules    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M38 6c-9 2-19 11-24 24l-4 12 8-6c9-5 18-15 20-30z'/%3E%3Cpath d='M14 30l6 2'/%3E%3C/svg%3E"); }
.nc-doc-families { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M24 4l14 6v12c0 10-6 17-14 22-8-5-14-12-14-22V10z'/%3E%3Cpath d='M24 14v18M17 20h14'/%3E%3C/svg%3E"); }
.nc-doc-curator  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M8 10h32v22H22l-9 7v-7H8z'/%3E%3Cpath d='M16 19h16M16 25h10'/%3E%3C/svg%3E"); }
.nc-doc-title { font: 700 19px/1.2 var(--display); color: var(--parchment); }
.nc-doc-desc { font-size: 13px; line-height: 1.4; color: var(--muted); }
.nc-doc-state {
	margin-top: auto;
	padding: 3px 12px;
	border-radius: 999px;
	border: 1px solid rgba(217, 167, 82, .5);
	font: 600 13px var(--body);
	color: var(--gilt);
}
.nc-doc.is-read { border-color: rgba(79, 174, 114, .6); }
.nc-doc.is-read .nc-doc-icon { color: #6fcf95; }
.nc-doc.is-read .nc-doc-state { border-color: #4fae72; background: #2f7a4a; color: #fff; }
.nc-doc.is-read .nc-doc-state::before { content: "✓ "; }
.nc-doc-help .nc-doc-state { border-color: var(--gilt); background: rgba(246, 212, 138, .1); }

/* Окна */
.nc-sheet {
	width: min(880px, calc(100% - 24px));
	max-height: calc(100vh - 40px);
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}
.nc-sheet::backdrop { background: rgba(3, 5, 12, .8); }
.nc-sheet-paper {
	position: relative;
	max-height: calc(100vh - 40px);
	padding: 40px 56px 30px;
	box-sizing: border-box;
	overflow-y: auto;
}
.nc-sheet-paper h2 { margin: 0 0 18px; text-align: center; font: 700 34px/1.15 var(--display); color: #5a1a12; }
.nc-close {
	position: absolute;
	top: 10px; right: 14px;
	z-index: 2;
	width: 36px; height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(90, 26, 18, .12);
	color: #5a1a12;
	font: 26px/1 var(--display);
	cursor: pointer;
}
.nc-close:hover { background: #5a1a12; color: #f7e2b5; }
.nc-doc-body, .nc-letter-body { color: #2b1a0e; font-size: 16px; line-height: 1.6; }
.nc-doc-body a, .nc-letter-body a { color: #6b1f12; }
.nc-doc-body .hw-html, .nc-doc-body .hw-layout { max-width: 100%; overflow-x: auto; }
.nc-doc-body img { max-width: 100%; height: auto; }
.nc-sheet-foot {
	position: sticky;
	bottom: -30px;
	margin: 26px -56px -30px;
	padding: 16px 56px 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	border-top: 1px solid rgba(138, 100, 54, .5);
	background: linear-gradient(180deg, rgba(236, 214, 166, .92), #e6cc95);
}
.nc-ack-check { flex: 1 1 300px; color: #2b1a0e; }
.nc-ack-check input:disabled + span { opacity: .55; }
.nc-ack-hint { flex-basis: 100%; order: 3; margin: 0; font-size: 13px; color: #6b4a2a; font-style: italic; }
.nc-sheet-foot .btn-wax:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.nc-done { margin: 0; color: #2f6a40; font-weight: 700; }
.nc-letter-from { margin: 0 0 4px; text-align: center; font: italic 15px var(--display); color: #6b4a2a; }
.nc-sheet-letter .nc-letter-body { font-family: var(--display); font-size: 19px; }

.nc-chat {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 40px);
	padding: 28px 30px 24px;
	box-sizing: border-box;
	border: 1px solid var(--gilt-line);
	border-radius: 14px;
	background: #0b1222;
	color: var(--text);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}
.nc-chat h2 { margin: 0 0 6px; text-align: left; font-size: 28px; }
.nc-chat .nc-close { background: rgba(255, 255, 255, .06); color: var(--gilt-hi); }
.nc-chat-sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.nc-chat-log {
	flex: 1 1 auto;
	min-height: 160px;
	max-height: 50vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid rgba(217, 167, 82, .25);
	border-radius: 10px;
	background: rgba(255, 255, 255, .02);
}
.nc-msg { max-width: 80%; align-self: flex-start; }
.nc-msg.is-mine { align-self: flex-end; text-align: right; }
.nc-msg-text {
	display: inline-block;
	padding: 9px 13px;
	border-radius: 12px 12px 12px 2px;
	background: #1c2a45;
	text-align: left;
	font-size: 15px;
	line-height: 1.45;
}
.nc-msg.is-mine .nc-msg-text { border-radius: 12px 12px 2px 12px; background: #efe0bf url(images/home/parchment.jpg) center / 500px; color: #2b1a0e; }
.nc-msg small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.nc-chat-empty { margin: auto 0; color: var(--muted); text-align: center; font-style: italic; }
.nc-chat-form { display: flex; gap: 12px; align-items: flex-end; margin-top: 14px; }
.nc-chat-form textarea {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid rgba(217, 167, 82, .45);
	border-radius: 8px;
	background: rgba(255, 255, 255, .05);
	color: var(--text);
	font: 15px/1.4 var(--body);
	resize: vertical;
}
.nc-chat-form textarea:focus { outline: none; border-color: var(--gilt-hi); }
.nc-chat-error { margin: 8px 0 0; color: #f19a9a; font-size: 14px; min-height: 1em; }

@media (max-width: 860px) {
	.nc-grid { grid-template-columns: 1fr; }
	.nc-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nc-path { grid-template-columns: repeat(7, minmax(64px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 560px) {
	.nc { padding: 0 14px 50px; }
	.nc-hello { gap: 14px; }
	.nc-avatar img, .nc-avatar .avatar-initial { width: 58px; height: 58px; font-size: 26px; }
	.nc-step-name { font-size: 12px; }
	.nc-sheet-paper { padding: 34px 20px 24px; }
	.nc-sheet-foot { margin: 20px -20px -24px; padding: 14px 20px 18px; bottom: -24px; }
	.nc-chat { padding: 24px 16px 18px; }
	.nc-chat-form { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
	.topnav .topnav-owl.has-unread, .nc-owls.flash { animation: none; }
}

/* Документ внутри окна: старое оформление постов приводим к листу пергамента */
.nc-sheet .nc-doc-body * {
	position: static !important;
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: none !important;
	border-color: rgba(138, 100, 54, .4) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #2b1a0e !important;
	font-family: "Philosopher", Georgia, serif !important;
	letter-spacing: normal !important;
	transform: none !important;
	overflow: visible !important;
	white-space: normal !important;
}
.nc-doc-body { font-size: 16px; line-height: 1.6; text-align: left; }
.nc-doc-body h1, .nc-doc-body h2, .nc-doc-body h3, .nc-doc-body h4,
.nc-doc-body [style*="text-align:center"], .nc-doc-body [style*="text-align: center"] {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	color: #5a1a12 !important;
}
.nc-doc-body h1, .nc-doc-body h2 { font-size: 26px !important; margin: 22px 0 10px !important; }
.nc-doc-body h3, .nc-doc-body h4 { font-size: 21px !important; margin: 18px 0 8px !important; }
.nc-doc-body p { margin: 0 0 10px !important; }
.nc-doc-body a { color: #6b1f12 !important; text-decoration: underline !important; }
.nc-doc-body img { display: none !important; }
.nc-doc-body table { width: 100% !important; border-collapse: collapse; }
.nc-doc-body td, .nc-doc-body th { padding: 4px 8px !important; border: 1px solid rgba(138, 100, 54, .35) !important; }
.nc-doc-body > *:first-child h2:first-child, .nc-doc-body > h2:first-child { display: none; }

/* Старые заголовки были «прозрачным текстом с градиентом» — возвращаем чернила */
.nc-sheet .nc-doc-body *, .nc-sheet .nc-letter-body * {
	-webkit-text-fill-color: currentColor !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	opacity: 1 !important;
	filter: none !important;
}
.nc-doc-body h1, .nc-doc-body h2, .nc-doc-body h3, .nc-doc-body h4, .nc-doc-body h5,
.nc-doc-body [style*="text-align:center"], .nc-doc-body [style*="text-align: center"],
.nc-doc-body [align="center"], .nc-doc-body center {
	color: #6b1f12 !important;
	font-weight: 700 !important;
	text-align: center !important;
	letter-spacing: .04em !important;
}
.nc-sheet .nc-doc-body a, .nc-sheet .nc-doc-body a *, .nc-sheet .nc-letter-body a {
	color: #8e1820 !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(142, 24, 32, .45) !important;
	text-underline-offset: 3px;
}
.nc-doc-body a:hover { color: #4a080d !important; }
.nc-doc.just-read { animation: nc-done 1.2s ease; }
@keyframes nc-done { 0% { box-shadow: 0 0 0 0 rgba(79, 174, 114, .0); } 40% { box-shadow: 0 0 30px 4px rgba(79, 174, 114, .55); } 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 10px 26px rgba(0, 0, 0, .5); } }
.nc-doc-trunkicon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='6' y='16' width='36' height='24' rx='3'/%3E%3Cpath d='M6 24h36M18 16v-4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4M21 24v5h6v-5'/%3E%3C/svg%3E"); }
.nc-docs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
a.nc-doc { text-decoration: none; }
@media (max-width: 1000px) { .nc-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .nc-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   БАГАЖНИК
   ===================================================================== */

.trunk-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 70px; }
.trunk-head {
	position: relative;
	padding: 26px 30px 22px;
	border: 1px solid var(--gilt);
	border-radius: 14px 14px 0 0;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 46px),
		linear-gradient(180deg, #5a3417, #3a1f0c);
	box-shadow: inset 0 0 0 3px rgba(217, 167, 82, .35), inset 0 -10px 22px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .55);
	text-align: center;
}
.trunk-lid {
	position: absolute;
	left: 50%; top: -12px;
	width: 70px; height: 22px;
	margin-left: -35px;
	border: 2px solid var(--gilt);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
}
.trunk-head h1 { font-size: 40px; color: var(--gilt-hi); text-shadow: 0 2px 6px #000; }
.trunk-head p { margin: 2px 0 12px; font: italic 500 19px var(--display); color: #f3e2bb; }
.trunk-money { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; color: #f3e2bb; font-size: 15px; }
.trunk-money span { display: inline-flex; align-items: center; gap: 6px; }
.coin { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; background: url("images/bank/coin-g.webp") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.coin-s { background-image: url("images/bank/coin-s.webp"); }
.coin-k { background-image: url("images/bank/coin-k.webp"); }

.trunk-tabs {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--gilt);
	border-top: 0;
	background: #1d1209;
}
.trunk-tabs button {
	flex: 1 1 150px;
	padding: 12px 10px;
	border: 0;
	border-right: 1px solid rgba(217, 167, 82, .3);
	background: none;
	color: var(--muted);
	font: 700 16px/1.2 var(--display);
	cursor: pointer;
}
.trunk-tabs button:last-child { border-right: 0; }
.trunk-tabs button:hover { color: var(--gilt-hi); }
.trunk-tabs button[aria-selected="true"] { color: var(--gilt-hi); background: rgba(246, 212, 138, .1); box-shadow: inset 0 -3px 0 var(--gilt); }
.trunk-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--gilt); color: #2b1606; font: 700 12px/20px var(--body); }

.trunk-sec { padding: 26px 30px; border-radius: 0 0 10px 10px; min-height: 160px; }
.trunk-items { margin: 0; padding: 0; list-style: none; }
.trunk-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px dashed rgba(138, 100, 54, .4); color: #2b1a0e; }
.trunk-item:last-child { border-bottom: 0; }
.trunk-icon {
	flex: none;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid #a57a40;
	background: rgba(255, 246, 220, .5);
	position: relative;
}
.trunk-icon::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: #6b1f12; font-size: 16px; }
.trunk-pet .trunk-icon::after { content: "❦"; }
.trunk-wand .trunk-icon::after { content: "⟋"; font-weight: 700; }
.trunk-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.trunk-text b { font: 700 18px/1.3 var(--display); }
.trunk-text small { font-size: 14px; color: #6b4a2a; }
.trunk-item time { font-size: 13px; color: #6b4a2a; }
.trunk-empty { margin: 30px 0; text-align: center; font: italic 17px/1.5 var(--display); color: #6b4a2a; }
.trunk-back { margin-top: 18px; text-align: center; }
@media (max-width: 560px) { .trunk-sec { padding: 18px 16px; } .trunk-tabs button { flex-basis: 45%; } }

.nc-sheet .nc-doc-body .nc-h {
	display: block;
	margin: 22px 0 10px !important;
	color: #6b1f12 !important;
	font: 700 22px/1.25 "Cormorant Garamond", Georgia, serif !important;
	letter-spacing: .06em !important;
	text-align: center !important;
	text-transform: uppercase !important;
}
.nc-sheet .nc-doc-body .nc-h::after {
	content: "";
	display: block;
	width: 120px; height: 1px;
	margin: 8px auto 0;
	background: linear-gradient(90deg, transparent, #8a6436, transparent);
}
.nc-sheet .nc-doc-body br + br { display: none; }
.nc-doc-plot { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 8h22a4 4 0 0 1 4 4v26a4 4 0 0 1-4 4H14'/%3E%3Cpath d='M12 8a4 4 0 0 0-4 4v4h8v-4a4 4 0 0 0-4-4zM16 16v22a4 4 0 0 1-4 4 4 4 0 0 1-4-4v-2h8'/%3E%3Cpath d='M22 18h10M22 24h10M22 30h7'/%3E%3C/svg%3E"); }

/* =====================================================================
   АНКЕТА ПЕРСОНАЖА в кабинете
   ===================================================================== */

.af-wrap { max-width: 900px; }
.af-wrap .sheet { padding-left: 64px; padding-right: 64px; }

.af-num {
	display: inline-grid;
	place-items: center;
	width: 34px; height: 34px;
	margin-right: 10px;
	border: 1px solid var(--ink-line);
	border-radius: 50%;
	font: 700 15px/1 var(--display);
	color: var(--ink-soft);
	vertical-align: 3px;
}
.af-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.af-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }

.field textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid rgba(138, 100, 54, .45);
	border-radius: 4px;
	background: rgba(255, 252, 240, .55);
	color: var(--ink);
	font: 17px/1.6 var(--body);
	resize: vertical;
	transition: background-color .2s, border-color .2s;
}
.field textarea::placeholder { color: rgba(107, 74, 42, .55); font-style: italic; }
.field textarea:focus { outline: none; background: rgba(255, 255, 255, .78); border-color: var(--ink-red); box-shadow: 0 0 0 1px var(--ink-red); }
.field.has-error textarea { border-color: var(--ink-error); background: rgba(255, 235, 225, .6); }
.field > label small { font: 500 15px var(--body); color: var(--ink-soft); }
.af-long { margin-top: 22px; }

.af-note { margin: 6px 0 0; font: italic 15px/1.4 var(--body); color: var(--ink-soft); }
.af-note.is-bad { color: var(--ink-error); }
.af-note.is-good { color: #1d5e3c; }

/* Пояснения «Как заполнить» */
.af-help { margin: 8px 0 4px; font-size: 15px; line-height: 1.55; }
.af-help summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font: italic 600 16px/1.3 var(--display);
	color: var(--ink-red);
	border-bottom: 1px dashed rgba(90, 26, 18, .5);
}
.af-help summary::-webkit-details-marker { display: none; }
.af-help summary::before { content: "✒ "; font-style: normal; }
.af-help[open] summary { margin-bottom: 8px; }
.af-help p {
	margin: 0;
	padding: 10px 14px;
	border-left: 2px solid var(--ink-line);
	background: rgba(255, 250, 235, .45);
	color: #3b2614;
}

/* Состояния */
.af-state, .af-revise { margin: 0 0 28px; padding: 18px 22px; border-radius: 6px; line-height: 1.55; }
.af-state { text-align: center; background: rgba(255, 250, 235, .45); border: 1px solid rgba(138, 100, 54, .4); }
.af-state .fs-center { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.af-revise { background: rgba(163, 32, 28, .07); border-left: 3px solid var(--ink-error); }
.af-state-title { margin: 0 0 6px; font: 700 23px/1.2 var(--display); color: var(--ink-red); }
.af-revise blockquote {
	margin: 10px 0;
	padding: 10px 14px;
	background: rgba(255, 252, 240, .6);
	border-radius: 4px;
	font: 18px/1.5 "Marck Script", "Segoe Script", cursive;
	color: #0c5a3b;
}
.af-revise p { margin: 0; }

.sheet .af-ghost {
	border: 1px solid var(--ink-line);
	background: rgba(255, 250, 235, .45);
	color: var(--ink-red);
	cursor: pointer;
}
.sheet .af-ghost:hover { border-color: var(--ink-red); background: var(--ink-red); color: #f7e2b5; text-decoration: none; }
.af-ghost:focus-within { outline: 2px solid var(--ink-red); outline-offset: 2px; }

/* Прогресс — тонкая чернильная линия */
.af-progress { margin: 0 0 30px; text-align: center; }
.af-progress-bar { height: 6px; border-radius: 3px; background: rgba(138, 100, 54, .2); overflow: hidden; }
.af-progress-bar span { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6e1a14, #a83a1e); transition: width .4s ease; }
.af-progress p { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.af-progress b { font: 700 18px var(--display); color: var(--ink-red); }

/* Фишки выбора */
.af-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.af-chip {
	padding: 7px 14px;
	border: 1px solid rgba(138, 100, 54, .55);
	border-radius: 999px;
	background: rgba(255, 252, 240, .5);
	color: var(--ink);
	font: 15px/1.2 var(--body);
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.af-chip:hover:not(:disabled) { border-color: var(--ink-red); }
.af-chip[aria-pressed="true"] { background: var(--ink-red); border-color: var(--ink-red); color: #f7e2b5; }
.af-chip[aria-pressed="true"]::before { content: "✓ "; }
.af-chip:disabled { opacity: .4; cursor: not-allowed; }
.af-chip:focus-visible { outline: 2px solid var(--ink-red); outline-offset: 2px; }
.field.has-error .af-chips { padding: 6px; border-radius: 6px; background: rgba(255, 235, 225, .6); }

/* Ползунки */
.field input[type="range"] { padding: 0; height: 28px; border: 0; background: none; box-shadow: none; accent-color: var(--ink-red); }
.field input[type="range"]:focus { box-shadow: none; background: none; }
.field output { font-weight: 700; color: var(--ink-red); }

/* Счётчик предложений */
.af-counter { margin: 6px 0 0; text-align: right; font: italic 14px var(--body); color: var(--ink-soft); }
.af-counter.is-done { color: #1d5e3c; }
.af-counter.is-done::before { content: "✓ "; font-style: normal; }

/* Портрет */
.af-photo-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.af-photo-frame {
	display: grid;
	place-items: center;
	width: 200px; height: 200px;
	margin: 10px 0 12px;
	padding: 6px;
	border: 1px solid var(--ink-line);
	outline: 1px solid rgba(138, 100, 54, .4);
	outline-offset: 4px;
	background: rgba(255, 252, 240, .5);
	color: var(--ink-soft);
	font: italic 15px var(--body);
	text-align: center;
}
.af-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field.has-error .af-photo-frame { border-color: var(--ink-error); background: rgba(255, 235, 225, .6); }
.af-photo-pick { padding: 10px 20px; font-size: 15px; }
.af-photo-side { display: grid; gap: 20px; }

/* Распределяющая шляпа */
.af-hat {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin: 22px 0 22px;
	padding: 16px 20px;
	border-radius: 8px;
	background: #22170e;
	color: #f3e2bb;
	box-shadow: inset 0 0 0 1px rgba(217, 167, 82, .35);
}
.af-hat-icon {
	width: 64px; height: 64px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d9a752' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 50c8-4 18-5 26-5s18 1 26 5c-6 4-16 6-26 6S12 54 6 50z'/%3E%3Cpath d='M16 47c2-12 6-22 12-30 3-4 7-9 12-9-2 4-3 7-2 10 2 9 6 18 8 29'/%3E%3Cpath d='M23 36c3 1 6 1 8-1M33 35c2 2 5 2 8 1M27 42c3 2 7 2 10 0'/%3E%3C/svg%3E") center / contain no-repeat;
	transform-origin: 50% 90%;
}
.af-hat.is-thinking .af-hat-icon { animation: hat-think 2.6s ease-in-out infinite; }
@keyframes hat-think { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.af-hat-title { margin: 0 0 10px; font: italic 600 19px/1.2 var(--display); color: var(--gilt-hi); }
.af-houses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; }
.af-house span { display: block; margin-bottom: 4px; font-size: 13px; color: #d7c7a3; }
.af-house { position: relative; }
.af-house::after { content: ""; display: block; height: 5px; border-radius: 3px; background: rgba(243, 226, 187, .14); }
.af-house i { position: absolute; left: 0; bottom: 0; height: 5px; width: 0; border-radius: 3px; transition: width .5s ease; }
.h-g i { background: #c9332a; }
.h-s i { background: #2f8a55; }
.h-r i { background: #4a73d6; }
.h-h i { background: #e3b33b; }
.af-hat-say { margin: 10px 0 0; font: italic 16px/1.45 var(--body); color: #efe2c4; }

.af-back { margin-top: 14px; font-size: 15px; }

/* Обрезка портрета */
.af-crop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 14, .82); }
.af-crop-box {
	max-width: 420px;
	padding: 24px 28px;
	border-radius: 8px;
	background: #f3e2bb;
	color: #2b1a0e;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.af-crop-box h2 { margin: 0 0 6px; font: 700 26px var(--display); color: #5a1a12; }
.af-crop-box p { margin: 0 0 14px; font-size: 14px; color: #6b4a2a; }
.af-crop-stage { margin: 0 auto 14px; border: 2px solid #5a1a12; touch-action: none; }
.af-crop-stage canvas { display: block; cursor: grab; }
.af-crop-stage canvas:active { cursor: grabbing; }
.af-crop-zoom-label { display: block; font-size: 14px; color: #6b4a2a; }
.af-crop-zoom { display: block; width: 100%; accent-color: #5a1a12; }
.af-crop-msg { min-height: 1em; }
.af-crop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.af-crop-box .af-ghost { border: 1px solid #8a6436; background: transparent; color: #5a1a12; cursor: pointer; }
.af-crop-box .btn { padding: 12px 22px; font-size: 17px; }

@media (max-width: 760px) {
	.af-wrap .sheet { padding-left: 22px; padding-right: 22px; }
	.af-grid3, .af-grid4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.af-photo-row { grid-template-columns: 1fr; }
	.af-houses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.af-hat { grid-template-columns: 1fr; text-align: center; }
	.af-hat-icon { margin: 0 auto; }
}
@media (max-width: 520px) {
	.af-grid3, .af-grid4, .af-wrap .fs-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.af-hat.is-thinking .af-hat-icon { animation: none; }
	.af-progress-bar span, .af-house i { transition: none; }
}
.nc-task-note { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.nc-task-note a { color: var(--gilt-hi); }
.field input[hidden], .af-photo-pick input { display: none; }
.field > label.af-photo-pick { font: 700 15px/1 var(--body); color: var(--ink-red); display: inline-block; }
.af-session { margin: 0 0 22px; padding: 14px 18px; border-radius: 6px; background: #5a1a12; color: #f7e2b5; font-size: 15px; line-height: 1.5; }
.nc-next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nc-next .btn { padding: 12px 20px; font-size: 15px; }

/* =====================================================================
   БАНК ГРИНГОТТС — светлый мраморный зал, золото и бронза
   ===================================================================== */

/* Монеты — общие для банка, переулка и кабинета (картинки монет) */
.gb-coins i, .gb-mini, .gb-x-coin i, .da-c i, .da-mini {
	display: inline-block;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: url("images/bank/coin-g.webp") center / contain no-repeat;
	filter: drop-shadow(0 2px 2px rgba(60, 35, 5, .45));
	vertical-align: middle;
}
.gb-coin-s i, .gb-mini-s, .da-c-s i, .da-mini-s { background-image: url("images/bank/coin-s.webp"); }
.gb-coin-k i, .gb-mini-k, .da-c-k i, .da-mini-k, .nc-purse .nc-mini-k { background-image: url("images/bank/coin-k.webp"); }

body.is-bank {
	--marble: #f6f1e7;
	--marble-2: #e6dccb;
	--gold: #c99a3e;
	--gold-hi: #f3d58a;
	--gold-deep: #7a5214;
	--ink-b: #3a2612;
	--ink-b-soft: #6b5134;
	color: var(--ink-b);
	background: #f1ebe0 url("images/bank/marble.jpg") center top / 1024px repeat;
	background-attachment: fixed;
}
body.is-bank::before {
	/* мрамор под лёгкой светлой вуалью, чтобы блоки читались */
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(246, 241, 232, .55);
	pointer-events: none;
}
body.is-bank .sky { display: none; }

/* Меню — светлая мраморная плашка с золотой каймой, как на образце */
body.is-bank .topbar { padding-top: 14px; }
body.is-bank .topnav {
	width: max-content;
	max-width: calc(100% - 32px);
	margin: 0 auto;
	padding: 6px 8px 6px 18px;
	border: 1px solid rgba(201, 154, 62, .75);
	border-radius: 999px;
	background: rgba(255, 252, 245, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 8px 20px rgba(90, 60, 20, .22), inset 0 1px 0 #fff;
}
body.is-bank .topnav a { color: var(--ink-b); text-shadow: none; }
body.is-bank .topnav a:hover { color: var(--gold-deep); }
body.is-bank .topnav a.topnav-owl {
	background: linear-gradient(180deg, #6b4520, #3e260f);
	border: 1px solid #e3b65c !important;
	color: #fbe6b6 !important;
	box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), 0 2px 6px rgba(60, 35, 5, .35);
}
body.is-bank .foot { color: var(--ink-b-soft); border-top-color: rgba(201, 154, 62, .5); }
body.is-bank .foot a { color: var(--gold-deep); }

/* Иллюстрация зала: только вверху страницы, края растворяются в мраморном фоне */
.gb-hall-bg {
	position: absolute;
	left: 50%; top: 0;
	z-index: 0;
	width: min(2000px, 100%);
	height: 980px;
	transform: translateX(-50%);
	background: url("images/bank/hall.jpg") center top / cover no-repeat;
	/* края растворяются со всех сторон при любой ширине экрана */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, #000 0, #000 50%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, #000 0, #000 50%, transparent 100%);
	mask-composite: intersect;
	pointer-events: none;
}
.gb-hall-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(246, 241, 232, 0) 45%, rgba(246, 241, 232, .9) 92%);
}
@media (max-width: 860px) { .gb-hall-bg { height: 640px; } }

.gb { position: relative; z-index: 1; max-width: 1010px; margin: 0 auto; padding: 0 20px 70px; font-family: var(--body); }
.gb h2 { margin: 0 0 12px; text-align: left; font: 700 30px/1.15 var(--display); color: var(--ink-b); }

/* Заголовок */
.gb-head { padding: 8px 0 18px; text-align: center; }
.gb-crest { display: block; width: 150px; height: auto; margin: 0 auto -10px; filter: drop-shadow(0 6px 10px rgba(80, 50, 10, .45)); }
/* «Гринготтс»: объёмное золото с тиснением — задний слой даёт толщину и тень, передний — блеск */
.gb-name {
	position: relative;
	display: inline-block;
	font: 700 clamp(46px, 11vw, 108px)/1.05 var(--display);
	letter-spacing: .01em;
	color: #8a5a16;
}
.gb-name::before {
	content: attr(data-text);
	position: absolute;
	left: 0; top: 0;
	z-index: 0;
	color: #6b4510;
	text-shadow:
		0 1px 0 #7a5214, 0 2px 0 #6b4510, 0 3px 0 #5e3c0d, 0 4px 0 #52340b, 0 5px 0 #452b08,
		0 8px 10px rgba(40, 22, 2, .45), 0 16px 26px rgba(60, 35, 5, .35);
}
.gb-name span {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, #fff6d0 0%, #f7d97e 22%, #d9a440 42%, #a8701e 52%, #e6b955 64%, #fbe3a0 78%, #b9822c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px rgba(255, 236, 180, .55);
	filter: drop-shadow(0 -1px 0 rgba(255, 250, 225, .8));
}
.gb-sub { margin: 6px 0 0; font: italic 600 21px/1.3 var(--display); color: var(--ink-b); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

/* Мраморная панель в толстой золотой раме с тиснением */
.gb-panel {
	position: relative;
	padding: 30px 34px;
	border: 7px solid transparent;
	border-radius: 6px;
	background:
		linear-gradient(rgba(255, 253, 248, .25), rgba(255, 253, 248, .25)) padding-box,
		url("images/bank/marble.jpg") center / cover padding-box;
	box-shadow:
		0 0 0 1px #6b4510,
		inset 0 0 0 1px rgba(122, 82, 20, .75),
		inset 0 0 0 3px rgba(255, 240, 200, .55),
		inset 0 2px 14px rgba(90, 60, 20, .18),
		0 4px 8px rgba(60, 40, 10, .25),
		0 20px 38px rgba(60, 40, 10, .32);
	color: var(--ink-b);
}
.gb-corner { position: absolute; width: 96px; height: 96px; background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: 2; filter: drop-shadow(0 1px 1px rgba(60, 35, 5, .4)); }
.gb-c-tl { left: -10px; top: -10px; background-image: url("images/bank/corner-tl.png"); }
.gb-c-tr { right: -10px; top: -10px; background-image: url("images/bank/corner-tr.png"); }
.gb-c-bl { left: -10px; bottom: -10px; background-image: url("images/bank/corner-bl.png"); }
.gb-c-br { right: -10px; bottom: -10px; background-image: url("images/bank/corner-br.png"); }

/* Надпись на дверях */
.gb-plaque { max-width: 660px; margin: 0 auto 30px; padding: 20px 40px; text-align: center; }
.gb-plaque p { margin: 0; font: italic 600 19px/1.45 var(--display); color: var(--ink-b); text-wrap: balance; }

.gb-row { display: grid; gap: 22px; margin-bottom: 22px; }
.gb-row-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.gb-row-low { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.gb-closed { max-width: 640px; margin: 0 auto; text-align: center; }
.gb-closed h2 { text-align: center; }

/* Сейф: металлическая панель, дверь — кольцо и штурвал (штурвал крутится) */
.gb-vault {
	display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; overflow: visible;
	background:
		linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) padding-box,
		url("images/bank/metal.jpg") center / cover padding-box;
}
.gb-door { position: relative; width: 190px; height: 190px; filter: drop-shadow(0 10px 14px rgba(40, 25, 5, .45)); }
.gb-ring, .gb-wheel { position: absolute; display: block; }
.gb-ring { inset: 0; width: 100%; height: 100%; }
.gb-wheel { left: 50%; top: 50%; width: 76%; height: 76%; margin: -38% 0 0 -38%; filter: drop-shadow(0 4px 4px rgba(40, 25, 5, .5)); }
.gb-vault.is-spinning .gb-wheel { animation: gb-spin 1.6s cubic-bezier(.45, 0, .2, 1); }
@keyframes gb-spin { 0% { transform: rotate(0); } 70% { transform: rotate(400deg); } 100% { transform: rotate(360deg); } }
.gb-vault.is-full .gb-door { filter: drop-shadow(0 0 18px rgba(243, 213, 138, .95)) drop-shadow(0 10px 14px rgba(40, 25, 5, .45)); }
.gb-vault h2 { margin-bottom: 0; font-size: 32px; }
.gb-vault-owner { margin: 2px 0 14px; font: italic 600 18px var(--display); color: var(--ink-b-soft); }
.gb-coins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gb-coins i { width: 40px; height: 40px; }
.gb-coins li { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border: 1px solid rgba(201, 154, 62, .55); border-radius: 6px; background: linear-gradient(180deg, #fffdf8, #efe6d5); box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(90, 60, 20, .15); }
.gb-coins b { font: 700 30px/1.1 var(--display); color: var(--ink-b); font-variant-numeric: lining-nums tabular-nums; }
.gb-coins span { font-size: 13px; color: var(--ink-b-soft); }
.gb-fall {
	position: absolute;
	top: -30px;
	z-index: 3;
	width: 20px; height: 20px;
	background: url("images/bank/coin-g.webp") center / contain no-repeat;
	filter: drop-shadow(0 2px 2px rgba(80, 50, 10, .4));
	width: 26px; height: 26px;
	animation: gb-fall 1.6s cubic-bezier(.4, 0, .9, .6) forwards;
	pointer-events: none;
}
@keyframes gb-fall { to { transform: translateY(300px) rotate(540deg); opacity: 0; } }

/* Стол банкира */
.gb-desk p { margin: 0 0 16px; line-height: 1.55; }
.gb-btn {
	display: inline-block;
	padding: 14px 26px;
	border: 1px solid #8a5f1a;
	border-radius: 6px;
	background: linear-gradient(180deg, #f6dc94 0%, #d9a94a 45%, #b07a26 100%);
	color: #3a2410;
	font: 700 19px/1 var(--display);
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 240, 200, .7);
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 250, 225, .8), 0 6px 14px rgba(90, 60, 20, .3);
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.sheet .gb-btn, .gb .gb-btn:hover { color: #2a1a08; text-decoration: none; }
.gb-btn:hover, .gb-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 250, 225, .8), 0 0 22px rgba(243, 213, 138, .9); }
.gb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: grayscale(.3); }
.gb-btn[hidden], .gb-next[hidden] { display: none !important; }
.gb-msg { min-height: 1.4em; margin-top: 12px !important; font-style: italic; color: var(--ink-b-soft); }

/* Книга записей */
.gb-ledger {
	background:
		repeating-linear-gradient(180deg, transparent 0 33px, rgba(155, 44, 34, .12) 33px 34px) padding-box,
		linear-gradient(180deg, #fbf4e3, #f1e5c8) padding-box;
}
.gb-ledger table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gb-ledger th { padding: 6px 8px; text-align: left; font: 700 14px var(--body); color: var(--ink-b-soft); border-bottom: 2px solid rgba(155, 44, 34, .45); }
.gb-ledger td { padding: 7px 8px; border-bottom: 1px solid rgba(155, 44, 34, .14); vertical-align: top; font-variant-numeric: lining-nums tabular-nums; }
.gb-ledger td.is-in { color: #1d5e3c; font-weight: 700; white-space: nowrap; }
.gb-ledger td.is-out { color: #a3201c; white-space: nowrap; }
.gb-ledger td.is-swap { color: var(--gold-deep); font-style: italic; }
.gb-ledger tr.is-new { animation: gb-new 1.6s ease; }
@keyframes gb-new { from { background: rgba(243, 213, 138, .7); } to { background: transparent; } }
.gb-empty { font-style: italic; color: var(--ink-b-soft); }

/* Курс и размен */
.gb-rate-list { margin: 0 0 18px; padding: 0; list-style: none; }
.gb-rate-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(201, 154, 62, .35); font-size: 17px; }
.gb-mini { width: 20px; height: 20px; }
.gb-x-title { margin: 0 0 10px; font: 700 22px var(--display); color: var(--ink-b); }
.gb-x { position: relative; }
.gb-x-body { margin: 0; padding: 0; border: 0; min-width: 0; }
.gb-x-lock { display: none; margin: 0 0 10px; font-style: italic; color: var(--ink-b-soft); }
.gb-x.is-locked .gb-x-lock { display: block; }
.gb-x.is-locked .gb-x-body { opacity: .45; }
.gb-x-group { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.gb-x-group legend { margin-bottom: 6px; padding: 0; font: 700 15px var(--body); color: var(--ink-b-soft); }
.gb-x-coins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gb-x-coin {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 8px 4px 6px;
	border: 1px solid rgba(201, 154, 62, .55);
	border-radius: 6px;
	background: rgba(255, 253, 248, .75);
	font-size: 13px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.gb-x-coin input { position: absolute; opacity: 0; pointer-events: none; }
.gb-x-coin i { width: 30px; height: 30px; }
.gb-x-coin small { font: 700 13px var(--body); color: var(--ink-b-soft); }
.gb-x-coin:has(input:checked) { border-color: #8a5f1a; background: linear-gradient(180deg, #fff6d8, #f3dc9c); box-shadow: 0 0 0 2px rgba(201, 154, 62, .55); }
.gb-x-coin:has(input:focus-visible) { outline: 2px solid #8a5f1a; outline-offset: 2px; }
.gb-x-coin.is-off { opacity: .35; cursor: not-allowed; }
.gb-x-amount { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.gb-x-amount input { width: 80px; padding: 7px 8px; border: 1px solid rgba(138, 95, 26, .6); border-radius: 4px; background: #fffdf6; color: var(--ink-b); font: 700 17px var(--body); text-align: center; }
.gb-x-step, .gb-x-all { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid rgba(138, 95, 26, .6); border-radius: 4px; background: #fffaf0; color: var(--ink-b); font: 700 16px var(--body); cursor: pointer; }
.gb-x-step:hover, .gb-x-all:hover { background: #f3dc9c; }
.gb-x-preview { min-height: 2.6em; margin: 4px 0 12px; padding: 8px 10px; border-radius: 4px; background: rgba(243, 220, 156, .35); font-size: 15px; line-height: 1.4; }
.gb-x-preview.is-warn { background: rgba(163, 32, 28, .07); color: #8e1820; }
.gb-x-go { width: 100%; }
.gb-x-msg { min-height: 1.3em; margin: 10px 0 0; font-style: italic; color: #1d5e3c; }

@media (max-width: 860px) {
	.gb-row-top, .gb-row-low { grid-template-columns: 1fr; }
	.gb-vault { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.gb-vault h2 { text-align: center; }
	.gb-hall-bg { height: 620px; }
}
@media (max-width: 480px) {
	.gb { padding: 0 14px 50px; }
	.gb-panel { padding: 22px 18px; }
	.gb-coins b { font-size: 24px; }
	.gb-plaque p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.gb-wheel { transition: none; }
	.gb-vault.is-spinning .gb-wheel, .gb-ledger tr.is-new { animation: none; }
}

/* =====================================================================
   КОСОЙ ПЕРЕУЛОК — иллюстрация улицы, день и вечер
   ===================================================================== */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.is-alley { background: #1d1612 url("images/alley/cobbles.jpg") center top / 384px repeat; }
body.is-alley .sky { display: none; }
body.is-alley::before {
	/* небо над улицей переходит в верх иллюстрации */
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 262px;
	z-index: 0;
	background: linear-gradient(180deg, #3d7fd0 0%, #87bff1 100%);
}
body.is-alley.is-alley-night::before { background: linear-gradient(180deg, #161334 0%, #3a2c63 45%, #8b79a9 100%); }
body.is-alley.is-alley-night { background-color: #0e0a08; background-blend-mode: multiply; }
body.is-alley .topnav a { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

.da { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.da-after { padding-bottom: 60px; }
.da-head { text-align: center; margin: 0 0 4px; }
.da-head h1 { font: 700 clamp(40px, 6vw, 66px)/1.05 var(--display); color: #ffe6a6; text-shadow: 0 2px 0 #6b4510, 0 4px 14px rgba(20, 10, 0, .55); }
.da-head p { margin: 4px 0 0; color: #fff4dc; font-style: italic; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.da-locked { max-width: 620px; margin: 30px auto 60px; padding: 26px; text-align: center; border: 1px solid var(--gilt-line); border-radius: 12px; background: rgba(6, 10, 22, .78); }
.da-locked .btn { margin: 6px; }

.da-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 10px; }
.da-time {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px;
	border: 1px solid rgba(243, 213, 138, .6);
	border-radius: 999px;
	background: rgba(12, 10, 20, .7);
	color: #fff1d0;
	font: 15px var(--body);
	cursor: pointer;
}
.da-time-moon { display: none; }
body.is-alley-night .da-time-moon { display: inline; }
body.is-alley-night .da-time-sun { display: none; }
.da-purse {
	display: flex; align-items: center; gap: 14px;
	padding: 8px 16px;
	border: 1px solid rgba(243, 213, 138, .6);
	border-radius: 999px;
	background: rgba(12, 10, 20, .8);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.da-purse-label { font: italic 600 16px var(--display); color: #cbbd9f; }
.da-c { display: inline-flex; align-items: center; gap: 5px; }
.da-c i { width: 22px; height: 22px; }
.da-c b { font: 700 20px var(--display); color: #fff1d0; font-variant-numeric: lining-nums tabular-nums; }
.da-c small { font-size: 12px; color: #b9ab8c; }
.da-c.is-changed b { animation: da-coin .9s ease; }
@keyframes da-coin { 0% { color: #ff9a7a; transform: translateY(-3px); } 100% { color: #fff1d0; transform: none; } }

/* Сцена: картинка на всю ширину, день и вечер — два слоя */
.da-scene { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 1240px; margin: 0 auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(243, 213, 138, .45), 0 24px 50px rgba(0, 0, 0, .55); }
.da-art { position: relative; aspect-ratio: 2000 / 1429; overflow: hidden; border-radius: 10px; }
.da-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease; }
.da-bg-night { opacity: 0; }
body.is-alley-night .da-bg-night { opacity: 1; }
body.is-alley-night .da-bg-day { opacity: 0; }
.da-art::after {
	/* низ картинки уходит в мостовую */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 9%;
	background: linear-gradient(180deg, transparent, rgba(29, 22, 18, .8));
	pointer-events: none;
	z-index: 1;
}
.da-street-floor { position: relative; z-index: 1; height: 26px; background: linear-gradient(180deg, rgba(29, 22, 18, .8), transparent); }

/* Фонари: вечером пульсируют тёплым светом */
.da-lamps { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s; z-index: 1; }
body.is-alley-night .da-lamps { opacity: 1; }
.da-lamp {
	position: absolute;
	width: calc(var(--s, 1) * 7%);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 246, 210, .95) 0%, rgba(255, 206, 110, .6) 16%, rgba(255, 160, 60, .2) 42%, transparent 68%);
	mix-blend-mode: screen;
	animation: da-lamp 2.8s ease-in-out infinite;
}
@keyframes da-lamp {
	0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(.85); }
	45% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
	60% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
}

/* Здания: при наведении светятся */
.da-spot {
	position: absolute;
	display: block;
	margin: 0; padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 2;
}
.da-glow {
	position: absolute;
	inset: 0;
	opacity: 0;
	-webkit-backdrop-filter: brightness(1.3) saturate(1.3) contrast(1.04);
	backdrop-filter: brightness(1.3) saturate(1.3) contrast(1.04);
	background: radial-gradient(ellipse at 50% 60%, rgba(255, 220, 140, .3), rgba(255, 200, 110, .08) 60%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 52%, #000 55%, transparent 100%);
	mask-image: radial-gradient(ellipse 62% 60% at 50% 52%, #000 55%, transparent 100%);
	transition: opacity .35s ease;
}
.da-spot:hover .da-glow, .da-spot:focus-visible .da-glow { opacity: 1; }
body.is-alley-night .da-glow { -webkit-backdrop-filter: brightness(1.45) saturate(1.35); backdrop-filter: brightness(1.45) saturate(1.35); background: radial-gradient(ellipse at 50% 60%, rgba(255, 196, 100, .35), transparent 72%); }
.da-spot:focus-visible { outline: 3px solid #ffe6a6; outline-offset: -6px; border-radius: 8px; }

/* Вывески. На временной иллюстрации надписи нарисованы — HTML-вывеска прозрачна, видна только метка */
.da-sign {
	position: absolute;
	z-index: 3;
	display: grid;
	gap: 2px;
	min-width: 9%;
	max-width: 13%;
	padding: .55% .9%;
	transform: translate(-50%, -50%);
	border: 2px solid #c9a15a;
	border-radius: 4px;
	background: linear-gradient(180deg, #2a1a0e, #170e07);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
	text-align: center;
	pointer-events: none;
	transition: box-shadow .3s;
}
.da-sign b { font: 700 clamp(11px, 1.2vw, 20px)/1.1 var(--display); color: var(--gilt-hi); }
.da-sign small { font-size: clamp(9px, .75vw, 13px); line-height: 1.2; color: #cbbd9f; }
.da-sign.is-hot { box-shadow: 0 0 26px rgba(255, 214, 140, .8), 0 4px 10px rgba(0, 0, 0, .5); }
.has-art-signs .da-sign { min-width: 10%; min-height: 9%; padding: 0; border-color: transparent; background: none; box-shadow: none; }
.has-art-signs .da-sign b, .has-art-signs .da-sign small { visibility: hidden; }
.has-art-signs .da-sign.is-hot { box-shadow: none; }
.da-badge {
	position: absolute;
	z-index: 4;
	transform: translate(-50%, -50%);
	min-width: 30px; height: 30px;
	padding: 0 7px;
	border-radius: 15px;
	text-align: center;
	pointer-events: none;
	background: radial-gradient(circle at 35% 30%, #c43a42, #8e1820 60%, #4a080d);
	box-shadow: 0 0 0 2px #e2b45c, 0 0 12px rgba(196, 58, 66, .8);
	font: 700 16px/30px var(--body);
	color: #fff1d0;
}

/* Окно лавки: одинаковое для всех, сверху — вывеска-картинка лавки */
.da-dialog { padding: 0; border: 0; background: transparent; width: 100%; max-width: min(640px, calc(100vw - 24px)); }
.da-shop-dialog { max-width: min(960px, calc(100vw - 24px)); }
.da-dialog::backdrop { background: rgba(4, 6, 14, .8); }
.da-panel {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #f3e2bb;
	color: #2b1a0e;
	box-shadow: 0 0 0 2px #8a6436, 0 24px 60px rgba(0, 0, 0, .7);
}
.da-banner {
	--shop: #3a2a3e;
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 190px;
	padding: 20px 24px;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(255, 210, 130, .35), transparent 60%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 18px),
		linear-gradient(180deg, var(--shop), #120c0a);
	color: #fff1d0;
}
.da-banner-malkin { --shop: #5b2a4a; }
.da-banner-flourish { --shop: #24452f; }
.da-banner-ollivander { --shop: #3a2c22; }
.da-banner-cauldrons { --shop: #6b3a1f; }
.da-banner-instruments { --shop: #22324a; }
.da-banner-menagerie { --shop: #4b4a1f; }
.da-banner-eeylops { --shop: #1f3d3f; }
.da-banner-icon { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); opacity: .35; }
.da-banner-icon svg { width: 130px; height: 130px; fill: none; stroke: #ffe6a6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.da-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.da-banner-text { position: relative; padding: 10px 16px; border-radius: 6px; background: linear-gradient(90deg, rgba(10, 6, 4, .75), rgba(10, 6, 4, 0)); }
.da-banner h2 { margin: 0; text-align: left; font: 700 34px/1.1 var(--display); color: #ffe6a6; text-shadow: 0 2px 6px #000; }
.da-banner p { margin: 2px 0 0; font-style: italic; color: #f3e2bb; }
.da-close { width: 38px; height: 38px; border: 1px solid #8a6436; border-radius: 50%; background: rgba(243, 226, 187, .92); color: #5a1a12; font: 22px/1 var(--body); cursor: pointer; }
.da-close:hover { background: #5a1a12; color: #f7e2b5; }
.da-banner .da-close { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* Товары — карточками по несколько в ряд */
.da-goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 0; padding: 20px; list-style: none; max-height: min(60vh, 640px); overflow-y: auto; }
.da-good {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	border: 1px solid rgba(138, 100, 54, .45);
	border-radius: 8px;
	background: linear-gradient(180deg, #fbf3df, #efdfb8);
	box-shadow: 0 3px 8px rgba(80, 50, 20, .18);
	transition: transform .2s, box-shadow .2s;
}
.da-good:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(80, 50, 20, .25); }
.da-good.just-bought { animation: da-bought 1s ease; }
@keyframes da-bought { 0% { box-shadow: 0 0 0 3px #e2b45c, 0 0 24px rgba(243, 213, 138, .9); } 100% { box-shadow: 0 3px 8px rgba(80, 50, 20, .18); } }
.da-good-pic { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fff8e6, #e6cf9a 75%); }
.da-good-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.da-good-ph { position: absolute; inset: 0; display: grid; place-items: center; opacity: .45; }
.da-good-ph svg { width: 46%; height: 46%; fill: none; stroke: #6b4a2a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.da-good-name { font-size: 15px; line-height: 1.3; min-height: 2.6em; }
.da-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #5a1a12; font-variant-numeric: lining-nums; }
.da-mini { width: 16px; height: 16px; vertical-align: -3px; }
.da-need { font-size: 13px; color: #1d5e3c; }
.da-petname { padding: 6px 8px; border: 0; border-bottom: 1.5px solid #8a6436; background: rgba(255, 252, 240, .7); font: 14px var(--body); color: #2b1a0e; }
.da-buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.da-qty { display: inline-flex; align-items: center; border: 1px solid #8a6436; border-radius: 6px; overflow: hidden; background: #fffaf0; }
.da-qty-btn { width: 30px; height: 34px; border: 0; background: transparent; color: #5a1a12; font: 700 17px var(--body); cursor: pointer; }
.da-qty-btn:hover:not(:disabled) { background: #f3dc9c; }
.da-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.da-qty-n { width: 40px; height: 34px; border: 0; border-left: 1px solid rgba(138, 100, 54, .4); border-right: 1px solid rgba(138, 100, 54, .4); background: transparent; text-align: center; font: 700 15px var(--body); color: #2b1a0e; -moz-appearance: textfield; }
.da-qty-n::-webkit-outer-spin-button, .da-qty-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.da-buy {
	flex: 1 1 auto;
	min-height: 36px;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 30%, #c43a42 0%, #8e1820 55%, #4a080d 100%);
	color: #f7e2b5;
	font: 700 15px/1.1 var(--display);
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(60, 10, 10, .3);
}
.da-buy:hover:not(:disabled) { box-shadow: 0 0 16px rgba(246, 190, 110, .7); }
.da-buy:disabled { background: #b9a888; color: #f3e9d4; cursor: not-allowed; box-shadow: none; }
.da-why { min-height: 1.2em; font-size: 12px; font-style: italic; color: #6b4a2a; text-align: center; }
.da-good.is-off .da-good-name, .da-good.is-off .da-price { opacity: .7; }
.da-good.is-locked .da-good-pic img, .da-good.is-locked .da-good-ph { filter: grayscale(.85) brightness(.9); }
.da-lock {
	position: absolute;
	left: 8px; right: 8px; bottom: 8px;
	padding: 5px 8px;
	border-radius: 4px;
	background: rgba(43, 26, 14, .85);
	color: #ffe6a6;
	font-size: 12px;
	text-align: center;
}
.da-shop-msg { min-height: 1.2em; margin: 0; padding: 0 20px 16px; color: #a3201c; font-style: italic; }

/* Кнопка письма */
.da-list-btn {
	position: fixed;
	left: 18px; bottom: 18px;
	z-index: 7;
	padding: 12px 20px 12px 48px;
	border: 1px solid #8a6436;
	border-radius: 6px;
	background: #f3e2bb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a1a12' stroke-width='1.6'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E") 14px center / 24px no-repeat;
	color: #5a1a12;
	font: 700 17px var(--display);
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}
.da-list-btn:hover { box-shadow: 0 0 22px rgba(246, 212, 138, .55); }

/* Письмо со списком */
.da-list-btn {
	position: fixed;
	left: 18px; bottom: 18px;
	z-index: 7;
	padding: 12px 20px 12px 48px;
	border: 1px solid #8a6436;
	border-radius: 6px;
	background: #f3e2bb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a1a12' stroke-width='1.6'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E") 14px center / 24px no-repeat;
	color: #5a1a12;
	font: 700 17px var(--display);
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}
.da-list-btn:hover { box-shadow: 0 0 22px rgba(246, 212, 138, .55); }
.da-letter-dialog { max-width: min(620px, calc(100vw - 24px)); }
.da-letter {
	position: relative;
	padding: 40px 44px 34px;
	border-radius: 4px;
	background:
		radial-gradient(ellipse at 20% 10%, rgba(255, 250, 230, .6), transparent 60%),
		radial-gradient(ellipse at 80% 90%, rgba(150, 100, 40, .25), transparent 60%),
		#ecd8a8;
	color: #2b1a0e;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
	transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease;
}
.da-letter .da-close { position: absolute; top: 12px; right: 12px; }
.da-l-school { margin: 0; text-align: center; font: 700 20px/1.3 "Cormorant SC", var(--display); letter-spacing: .06em; color: #5a1a12; }
.da-l-lead { margin: 10px 0 6px; text-align: center; font-style: italic; color: #6b4a2a; }
.da-letter h3 { margin: 18px 0 6px; font: 700 21px var(--display); color: #5a1a12; }
.da-l-list { margin: 0; padding: 0; list-style: none; }
.da-l-list li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font: 21px/1.35 "Marck Script", "Segoe Script", cursive; color: #0c5a3b; }
.da-l-check { flex: none; position: relative; width: 16px; height: 16px; border: 1.5px solid #6b4a2a; border-radius: 2px; transform: translateY(2px); }
.da-l-list li.is-done > span:not(.da-l-check) { text-decoration: line-through; text-decoration-color: rgba(90, 26, 18, .65); color: #557a66; }
.da-l-list li.is-done .da-l-check::after { content: ""; position: absolute; left: 3px; top: -5px; width: 7px; height: 14px; border: solid #8e1820; border-width: 0 3px 3px 0; transform: rotate(40deg); }
.da-l-list li.just-done .da-l-check::after { animation: da-tick .5s ease; }
@keyframes da-tick { from { opacity: 0; transform: rotate(40deg) scale(.3); } to { opacity: 1; transform: rotate(40deg) scale(1); } }
.da-l-count { margin-left: auto; font: 14px var(--body); color: #6b4a2a; }
.da-l-note { margin: 10px 0 0; font-size: 14px; font-style: italic; color: #6b4a2a; }
.da-l-caps { margin: 14px 0 0; font: 700 13px/1.4 "Cormorant SC", var(--display); letter-spacing: .04em; color: #5a1a12; }
.da-l-stamp {
	position: absolute;
	right: 36px; bottom: 60px;
	padding: 8px 16px;
	border: 3px double #8e1820;
	border-radius: 6px;
	transform: rotate(-12deg) scale(1.6);
	font: 700 22px "Cormorant SC", var(--display);
	color: #8e1820;
	opacity: 0;
	transition: opacity .4s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.da-letter-dialog.is-complete .da-l-stamp { opacity: .9; transform: rotate(-12deg) scale(1); }
.da-letter-dialog.is-fading .da-letter { opacity: 0; transform: translateY(-30px) scale(.96); filter: blur(4px); }

/* Уведомление и палочка */
.da-toast {
	position: fixed;
	left: 50%; bottom: 24px;
	z-index: 1100;
	max-width: min(520px, calc(100vw - 32px));
	padding: 12px 20px;
	transform: translateX(-50%);
	border: 1px solid var(--gilt-line);
	border-radius: 8px;
	background: rgba(12, 10, 20, .94);
	color: #fff1d0;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.da-wand { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 14, .88); }
.da-wand[hidden] { display: none; }
.da-wand-box { position: relative; max-width: 440px; padding: 34px 30px 28px; text-align: center; border: 1px solid var(--gilt-line); border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, #2a2140, #0f0c18); overflow: hidden; }
.da-wand-spark { position: relative; height: 90px; margin-bottom: 10px; }
.da-wand-spark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150px; height: 6px; margin: -3px 0 0 -75px; border-radius: 3px; background: linear-gradient(90deg, #3a2414, #8a5a2b 70%, #e3c48a); transform: rotate(-25deg); animation: da-wave 0.6s ease-in-out infinite alternate; }
.da-wand-spark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -38px 0 0 58px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 20px 8px rgba(255, 220, 140, .8); opacity: .4; animation: da-spark 0.6s ease-in-out infinite alternate; }
.da-wand.is-chosen .da-wand-spark::before { animation: none; }
.da-wand.is-chosen .da-wand-spark::after { opacity: 1; box-shadow: 0 0 40px 22px rgba(255, 220, 140, .9), 0 0 90px 40px rgba(255, 170, 60, .4); animation: none; }
@keyframes da-wave { to { transform: rotate(-12deg); } }
@keyframes da-spark { to { opacity: 1; } }
.da-wand-title { margin: 0 0 8px; font: 700 26px/1.2 var(--display); color: var(--gilt-hi); }
.da-wand-res { min-height: 1.5em; margin: 0 0 18px; font-size: 18px; color: #efe3c8; }


.da-wand-spark { position: relative; height: 110px; margin-bottom: 10px; }
.da-wand-img { position: absolute; left: 50%; top: 50%; width: 300px; max-width: 90%; height: auto; transform: translate(-50%, -50%) rotate(-12deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: da-wand-wave .6s ease-in-out infinite alternate; z-index: 1; }
@keyframes da-wand-wave { to { transform: translate(-50%, -50%) rotate(-4deg); } }
.da-wand-spark:has(.da-wand-img)::before { display: none; }
.da-wand.is-chosen .da-wand-img { animation: none; filter: drop-shadow(0 0 18px rgba(255, 220, 140, .9)); }

@media (max-width: 760px) {
	.da-bar { flex-wrap: wrap; justify-content: center; }
	.da-scene { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.da-art { width: 900px; }
	.da-goods { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 10px; }
	.da-banner { min-height: 140px; }
	.da-banner h2 { font-size: 26px; }
	.da-banner-icon { display: none; }
	.da-letter { padding: 30px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.da-lamp, .da-wand-img { animation: none; }
	.da-bg, .da-glow, .da-letter { transition: none; }
	.da-wand-spark::before, .da-wand-spark::after { animation: none; }
}
.nc-purse { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 5px 14px; border: 1px solid var(--gilt-line); border-radius: 999px; background: rgba(6, 10, 22, .55); color: #fff1d0; font-size: 15px; text-decoration: none; }
.nc-purse:hover { border-color: var(--gilt-hi); color: #fff; }
.nc-purse .da-mini { width: 15px; height: 15px; }
.gb-ledger td:last-child, .gb-ledger td:first-child { white-space: nowrap; }
html:has(body.is-bank) { background: #f1ebe0 url("images/bank/marble.jpg") center top / 1024px repeat; }

.gb-sub { margin-top: 10px; }
@media (max-width: 480px) {
	.gb-corner { width: 50px; height: 50px; }
	.gb-c-tl { left: -10px; top: -10px; } .gb-c-tr { right: -10px; top: -10px; }
	.gb-c-bl { left: -10px; bottom: -10px; } .gb-c-br { right: -10px; bottom: -10px; }
	.gb-plaque { padding: 18px 20px; }
	.gb-plaque p { font-size: 16px; }
	.gb-name::before { text-shadow: 0 1px 0 #7a5214, 0 2px 0 #6b4510, 0 3px 0 #52340b, 0 6px 8px rgba(40, 22, 2, .45); }
}

/* Отступы от завитков уголков */
.gb-panel { padding: 34px 40px; }
.gb-plaque { padding: 24px 56px; }

/* Сейф: дверь и монеты не тесно */
.gb-vault { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
.gb-door { width: 160px; height: 160px; }
.gb-coins { gap: 8px; }
.gb-coins li { min-width: 0; padding: 10px 2px 8px; }
.gb-coins span { font-size: 12px; line-height: 1.2; white-space: nowrap; }
.gb-coins b { font-size: 28px; }

/* Книга записей не длиннее «Курса монет»: лишнее прокручивается */
.gb-row-low { align-items: stretch; }
.gb-ledger { display: flex; flex-direction: column; min-height: 0; }
.gb-ledger-scroll {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
	scrollbar-color: #c99a3e rgba(201, 154, 62, .15);
}
.gb-ledger-scroll:focus-visible { outline: 2px solid #8a5f1a; outline-offset: 2px; }
.gb-ledger-scroll thead th { position: sticky; top: 0; z-index: 1; background: #f8eed8; }
@media (min-width: 861px) {
	.gb-ledger { position: relative; }
	.gb-ledger-scroll { position: absolute; left: 40px; right: 34px; top: 92px; bottom: 30px; }
}
@media (max-width: 860px) {
	.gb-ledger-scroll { flex: none; max-height: 420px; }
}
@media (max-width: 480px) {
	.gb-panel { padding: 28px 22px; }
	.gb-plaque { padding: 20px 24px; }
	.gb-corner { width: 64px; height: 64px; }
	.gb-c-tl { left: -8px; top: -8px; } .gb-c-tr { right: -8px; top: -8px; }
	.gb-c-bl { left: -8px; bottom: -8px; } .gb-c-br { right: -8px; bottom: -8px; }
}

/* =====================================================================
   Банк — рамка-иллюстрация, заголовок-иллюстрация, яркий зал
   ===================================================================== */
.gb-panel {
	border: 8px solid transparent;
	border-image: url("images/bank/frame.webp") 31 / 8px / 0 stretch;
	border-radius: 0;
	box-shadow:
		inset 0 0 0 1px rgba(122, 82, 20, .35),
		inset 0 2px 14px rgba(90, 60, 20, .16),
		0 4px 8px rgba(60, 40, 10, .28),
		0 22px 40px rgba(60, 40, 10, .34);
}
/* уголок: его планки ложатся точно на рамку (планка = 11/100 ширины картинки) */
.gb-corner { width: 72px; height: 72px; filter: drop-shadow(0 1px 2px rgba(60, 35, 5, .45)); }
.gb-c-tl { left: -12px; top: -12px; }
.gb-c-tr { right: -12px; top: -12px; }
.gb-c-bl { left: -12px; bottom: -12px; }
.gb-c-br { right: -12px; bottom: -12px; }
@media (max-width: 480px) {
	.gb-corner { width: 60px; height: 60px; }
	.gb-c-tl { left: -11px; top: -11px; } .gb-c-tr { right: -11px; top: -11px; }
	.gb-c-bl { left: -11px; bottom: -11px; } .gb-c-br { right: -11px; bottom: -11px; }
}

/* Заголовок: грифон поменьше, название — картинкой, за ними тёплое сияние */
.gb-head { position: relative; padding: 4px 0 14px; }
.gb-head::before {
	content: "";
	position: absolute;
	left: 50%; top: 46%;
	z-index: -1;
	width: min(820px, 100%);
	height: 360px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(255, 252, 238, .95) 0%, rgba(255, 244, 210, .7) 35%, rgba(255, 236, 190, .25) 60%, transparent 72%);
	pointer-events: none;
}
.gb-crest { width: 108px; margin: 0 auto 2px; }
.gb-name { display: block; font-size: 0; line-height: 0; }
.gb-name img { display: block; width: min(560px, 86vw); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 14px rgba(70, 40, 5, .35)); }
.gb-name::before { content: none; }
.gb-sub { margin-top: 4px; }

/* Зал — яркий и сочный, растворяется только у самых краёв */
.gb-hall-bg {
	filter: saturate(1.18) contrast(1.06) brightness(1.04);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 0, #000 68%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 0, #000 68%, transparent 100%);
}
.gb-hall-bg::after { content: none; }
.gb-head .gb-sub { margin-top: -6px; }

/* Инвентарь: предметы карточками с картинкой и количеством */
.trunk-wrap { max-width: 980px; }
.trunk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.trunk-card { display: flex; flex-direction: column; align-items: stretch; gap: 3px; border-bottom: 1px solid rgba(138, 100, 54, .45) !important; padding: 10px; border: 1px solid rgba(138, 100, 54, .45); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 250, 235, .7), rgba(236, 216, 168, .6)); box-shadow: 0 3px 8px rgba(80, 50, 20, .15); color: #2b1a0e; text-align: center; }
.trunk-card b { font: 700 15px/1.3 var(--display); }
.trunk-card small { font-size: 13px; color: #6b4a2a; }
.trunk-card time { margin-top: auto; font-size: 12px; color: #8a6a44; }
.trunk-pic { position: relative; aspect-ratio: 1; margin-bottom: 4px; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fff8e6, #e6cf9a 75%); }
.trunk-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.trunk-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; color: rgba(107, 31, 18, .4); }
.trunk-ph::after { content: "✦"; }
.trunk-pet .trunk-ph::after { content: "❦"; }
.trunk-wand .trunk-ph::after { content: "⟋"; font-weight: 700; }
.trunk-n { position: absolute; right: 6px; top: 6px; min-width: 34px; padding: 2px 8px; border-radius: 12px; background: radial-gradient(circle at 35% 30%, #c43a42, #8e1820 60%, #4a080d); box-shadow: 0 0 0 2px #e2b45c; color: #fff1d0; font: 700 14px/20px var(--body); }
@media (max-width: 560px) { .trunk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Косой переулок: доработки ===== */
.da-mini-k, .da-c-k i { background-image: url("images/bank/coin-k.webp"); }
.da-street-floor { display: none; }
.da-scene + .da-street-floor + .da-after { padding-top: 22px; }

/* Окно-подсказка над лавкой */
.da-tip {
	position: absolute;
	z-index: 6;
	width: min(300px, 80%);
	padding: 14px 16px 12px;
	border: 1px solid #c9a15a;
	border-radius: 8px;
	background:
		radial-gradient(ellipse at 20% 0%, rgba(255, 250, 230, .7), transparent 60%),
		#f1deb0;
	color: #2b1a0e;
	box-shadow: 0 0 0 3px rgba(43, 26, 14, .55), 0 14px 30px rgba(0, 0, 0, .55);
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
}
.da-tip.is-on { opacity: 1; transform: none; }
.da-tip::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -8px;
	width: 14px; height: 14px;
	margin-left: -7px;
	transform: rotate(45deg);
	background: #f1deb0;
	border-right: 1px solid #c9a15a;
	border-bottom: 1px solid #c9a15a;
}
.da-tip.is-below::after { bottom: auto; top: -8px; transform: rotate(225deg); }
.da-tip-name { display: block; font: 700 21px/1.15 var(--display); color: #5a1a12; }
.da-tip-tag { display: block; margin-top: 2px; font-size: 13px; color: #6b4a2a; }
.da-tip-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.da-tip-need { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #8e1820; }
.da-tip-go { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(138, 100, 54, .5); font: italic 13px var(--body); color: #6b4a2a; }

/* Шапка лавки — картинка 3:1 целиком, название поверх */
.da-banner { min-height: 0; aspect-ratio: 3 / 1; padding: 18px 22px; }
.da-banner-img { object-position: center; }
.da-banner-img ~ .da-banner-text { background: linear-gradient(90deg, rgba(10, 6, 4, .82), rgba(10, 6, 4, .35) 75%, rgba(10, 6, 4, 0)); }
.da-banner:has(.da-banner-img) .da-banner-icon { display: none; }

/* Палочка: картинка появляется, когда палочка «выбрала» */
.da-wand-img { transition: opacity .6s ease; }
.da-wand-img.is-hidden { opacity: 0; }
.da-wand-box { max-width: 520px; }
.da-wand-spark { height: 150px; }
.da-wand-img { width: 420px; }

/* Письмо: всё письмо одним почерком и одним цветом, кроме шапки */
.da-letter h3, .da-l-lead, .da-l-note, .da-l-caps, .da-l-list li, .da-l-count {
	font-family: "Marck Script", "Segoe Script", cursive;
	color: #0c5a3b;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}
.da-l-lead { font-size: 22px; text-align: left; margin-top: 16px; }
.da-letter h3 { font-size: 24px; font-weight: 400; }
.da-l-list li { font-size: 21px; }
.da-l-note { font-size: 19px; line-height: 1.4; }
.da-l-caps { font-size: 19px; line-height: 1.4; font-weight: 400; }
.da-l-count { font-size: 18px; }
.da-l-count b { font-weight: 400; }
.da-l-check { border-color: #0c5a3b; }
.da-l-list li.is-done > span:not(.da-l-check) { color: #0c5a3b; text-decoration: line-through; text-decoration-color: #b3201c; text-decoration-thickness: 2px; }
.da-l-list li.is-done .da-l-check::after { border-color: #b3201c; }
.da-l-stamp { color: #b3201c; border-color: #b3201c; }

@media (max-width: 760px) {
	.da-scene { width: 100%; border-radius: 0; overflow-x: auto; }
	.da-art { width: 980px; border-radius: 0; }
	.da-tip { display: none; }
}
.da-good-pic:has(img) .da-good-ph, .trunk-pic:has(img) .trunk-ph { display: none; }

/* ===== Косой переулок: улица во всю ширину, шапка прямо на иллюстрации ===== */
body.is-alley::before { content: none; }
body.is-alley {
	background: #2a211b url("images/alley/cobbles.jpg") center top / 384px repeat;
	background-attachment: scroll;
	background-blend-mode: normal;
}
body.is-alley.is-alley-night { background-color: #2a211b; background-blend-mode: normal; }
/* Вечер: кладка затемняется полупрозрачной вуалью — плавно, вместе с иллюстрацией */
body.is-alley::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(18, 14, 38, .72), rgba(12, 9, 20, .78));
	opacity: 0;
	transition: opacity 1.8s ease;
	pointer-events: none;
}
body.is-alley.is-alley-night::after { opacity: 1; }
body.is-alley .foot { position: relative; z-index: 1; }

.da-scene {
	width: 100%;
	max-width: 1920px;
	margin: -84px auto 0;
	border-radius: 0;
	box-shadow: none;
}
.da-art {
	border-radius: 0;
	/* края растворяются в кладке: слева, справа и снизу; сверху картинка уходит под меню */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
	mask-composite: intersect;
}
.da-art::after { content: none; }
.da-bg { transition: opacity 1.8s ease; }

/* Название и панель поверх неба */
.da-top {
	position: absolute;
	left: 0; right: 0; top: 0;
	z-index: 5;
	padding: 92px 7% 0;
	pointer-events: none;
}
.da-top::before {
	/* лёгкая тень под текстом, чтобы читался и на светлом небе */
	content: "";
	position: absolute;
	left: 20%; right: 20%; top: 60px;
	height: 150px;
	background: radial-gradient(ellipse at center, rgba(10, 10, 30, .38), transparent 70%);
	pointer-events: none;
}
.da-top .da-head { position: relative; margin: 0; }
.da-top .da-head h1 { text-shadow: 0 2px 0 #6b4510, 0 4px 18px rgba(10, 6, 0, .7); }
.da-top .da-head p { text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.da-top .da-bar { position: relative; margin: 14px 0 0; pointer-events: auto; }
.da-top .da-time, .da-top .da-purse { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.is-alley .topnav a { text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }

.da-after { padding-top: 0; }
.da-scene + .da-street-floor + .da-after { padding-top: 0; }

@media (max-width: 1100px) {
	.da-top { padding-top: 84px; }
	.da-top .da-head h1 { font-size: 42px; }
	.da-top .da-head p { display: none; }
}
@media (max-width: 760px) {
	.da-scene { margin-top: 0; overflow-x: auto; }
	.da-art { -webkit-mask-image: none; mask-image: none; }
	.da-top { position: sticky; left: 0; width: 100vw; padding: 12px 12px 0; }
	.da-top .da-bar { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	body.is-alley::after, .da-bg { transition: none; }
}
body.is-alley { position: relative; }
body.is-alley::after { position: absolute; }
body.is-alley .foot { margin-top: 30px; padding-top: 22px; padding-bottom: 22px; border-top: 0; background: linear-gradient(180deg, transparent, rgba(14, 10, 8, .78) 30%, rgba(14, 10, 8, .85)); }
body.is-alley .foot, body.is-alley .foot p { color: #e9dcc0; }
body.is-alley .foot { background: radial-gradient(ellipse 60% 100% at 50% 70%, rgba(14, 10, 8, .82), rgba(14, 10, 8, .5) 60%, transparent 100%); }

/* Косой переулок: меню на плашке поверх иллюстрации (днём и вечером) */
body.is-alley .topbar { padding-top: 16px; }
body.is-alley .topnav {
	padding: 7px 10px 7px 20px;
	border: 1px solid rgba(243, 213, 138, .55);
	border-radius: 999px;
	background: rgba(20, 14, 30, .55);
	-webkit-backdrop-filter: blur(6px) saturate(1.2);
	backdrop-filter: blur(6px) saturate(1.2);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 240, 200, .18);
	transition: background-color 1.8s ease;
}
body.is-alley.is-alley-day .topnav { background: rgba(38, 26, 14, .5); }
body.is-alley .topnav a { color: #fff3d6; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
body.is-alley .topnav a:hover { color: #ffd98a; }
body.is-alley .topnav a.topnav-owl { padding: 5px 14px; border: 1px solid rgba(243, 213, 138, .7); border-radius: 999px; background: rgba(10, 8, 18, .45); }
body.is-alley .da-top .da-head p { color: #fffaf0; }
body.is-alley.is-alley-day .da-top::before { background: radial-gradient(ellipse at center, rgba(20, 30, 60, .45), transparent 70%); }

/* Улица чуть меньше на широких экранах, края растворяются мягче и уже */
.da-scene { max-width: 1560px; }
.da-art {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
}
.da-top { padding-left: 5%; padding-right: 5%; }
body.is-alley .da-scene { margin-top: calc(-1 * var(--da-topbar, 90px)); }

/* =====================================================================
   ХОГВАРТС-ЭКСПРЕСС — вокзал: ночь, пар, алый паровоз и латунь
   ===================================================================== */
body.is-express {
	background:
		radial-gradient(ellipse 80% 40% at 50% 0%, rgba(142, 24, 32, .28), transparent 70%),
		linear-gradient(180deg, #0b1020 0%, #060a16 60%, #04070f 100%);
	background-attachment: fixed;
}
.hx { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 20px 70px; }
.hx-head { text-align: center; margin: 4px 0 22px; }
.hx-kicker { margin: 0; font: italic 600 18px var(--display); color: #cbbd9f; }
.hx-head h1 { font: 700 clamp(46px, 7vw, 76px)/1 var(--display); color: #ffe6a6; text-shadow: 0 0 30px rgba(196, 58, 66, .55), 0 3px 0 #5a1012; }
.hx-sub { max-width: 36em; margin: 10px auto 0; color: #e6dcc6; font-size: 16px; }

.hx-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: hx; }
.hx-steps li { counter-increment: hx; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 1px solid rgba(243, 213, 138, .3); border-radius: 999px; color: #b9ab8c; font-size: 14px; }
.hx-steps li::before { content: counter(hx); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(243, 213, 138, .15); color: #f3e2bb; font: 700 13px var(--body); }
.hx-steps li.is-done { color: #f3e2bb; border-color: rgba(243, 213, 138, .55); }
.hx-steps li.is-done::before { content: "✓"; background: #2f7a52; }
.hx-steps li.is-now { color: #fff1d0; border-color: #c43a42; background: rgba(142, 24, 32, .35); box-shadow: 0 0 16px rgba(196, 58, 66, .45); }
.hx-steps li.is-now::before { background: #c43a42; }

.hx-card {
	position: relative;
	margin: 0 0 26px;
	padding: 28px 32px;
	border: 1px solid rgba(243, 213, 138, .35);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(22, 20, 36, .92), rgba(12, 11, 22, .92));
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	color: #ece3cf;
}
.hx-card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; text-align: left; font: 700 30px/1.15 var(--display); color: #ffe6a6; }
.hx-lead { margin: 0 0 16px; font-size: 17px; line-height: 1.6; }
.hx-locked { text-align: center; }
.hx-appear { animation: hx-in .6s ease; }
@keyframes hx-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hx-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #8e1820 center / 24px no-repeat; box-shadow: 0 0 0 2px rgba(243, 213, 138, .6); }
.hx-ico-guide { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe6a6' stroke-width='1.7'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 10h8M8 14h8M8 18h5'/%3E%3C/svg%3E"); }
.hx-ico-ticket { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe6a6' stroke-width='1.7'%3E%3Cpath d='M3 7h18v3a2 2 0 0 0 0 4v3H3v-3a2 2 0 0 0 0-4z'/%3E%3Cpath d='M14 7v10' stroke-dasharray='2 2'/%3E%3C/svg%3E"); }
.hx-ico-train { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe6a6' stroke-width='1.7'%3E%3Crect x='5' y='4' width='14' height='13' rx='3'/%3E%3Cpath d='M5 11h14M8 21l2-4M16 21l-2-4'/%3E%3Ccircle cx='9' cy='14' r='.8'/%3E%3Ccircle cx='15' cy='14' r='.8'/%3E%3C/svg%3E"); }
.hx-ico-lamp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe6a6' stroke-width='1.7'%3E%3Cpath d='M12 2v3M8 5h8l-1 11H9z'/%3E%3Cpath d='M9 16h6v3H9zM10 9h4'/%3E%3C/svg%3E"); }

/* Памятка */
.hx-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.hx-rule { padding: 16px; border-radius: 10px; background: #f3e2bb; color: #2b1a0e; box-shadow: inset 0 0 0 1px rgba(138, 100, 54, .5); }
.hx-rule h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 19px/1.2 var(--display); color: #5a1a12; }
.hx-rule h3 b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #8e1820; color: #ffe6a6; font: 700 14px var(--body); }
.hx-rule p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.hx-good, .hx-bad { position: relative; padding: 6px 8px 6px 28px; border-radius: 6px; font-style: italic; }
.hx-good { background: rgba(47, 122, 82, .14); color: #1d5e3c; }
.hx-bad { background: rgba(163, 32, 28, .1); color: #8e1820; text-decoration: line-through; text-decoration-color: rgba(163, 32, 28, .5); }
.hx-good::before, .hx-bad::before { position: absolute; left: 8px; top: 5px; font-style: normal; font-weight: 700; text-decoration: none; }
.hx-good::before { content: "✓"; }
.hx-bad::before { content: "✗"; }

.hx-quiz h3 { margin: 0 0 12px; font: 700 22px var(--display); color: #ffe6a6; }
.hx-q { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(243, 213, 138, .25); border-radius: 10px; transition: border-color .2s, background-color .2s; }
.hx-q legend { padding: 0 6px; font-weight: 700; color: #f3e2bb; }
.hx-q label { display: flex; gap: 10px; align-items: baseline; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.hx-q label:hover { background: rgba(243, 213, 138, .08); }
.hx-q input { accent-color: #c43a42; }
.hx-q.is-ok { border-color: #2f7a52; background: rgba(47, 122, 82, .12); }
.hx-q.is-bad { border-color: #a3201c; background: rgba(163, 32, 28, .1); }
.hx-q-why { margin: 6px 4px 0; color: #8fd3ad; font-size: 14px; }
.hx-msg { min-height: 1.3em; margin: 8px 0; color: #ffcf8a; font-style: italic; }

.hx-btn {
	display: inline-block;
	padding: 13px 24px;
	border: 0;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 30%, #c43a42 0%, #8e1820 55%, #4a080d 100%);
	color: #fff1d0;
	font: 700 18px/1 var(--display);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 0 0 2px rgba(243, 213, 138, .45), 0 8px 18px rgba(0, 0, 0, .45);
	transition: transform .15s, box-shadow .15s;
}
.hx-btn:hover:not(:disabled) { color: #fff; transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(243, 213, 138, .7), 0 0 22px rgba(196, 58, 66, .6); }
.hx-btn:disabled { opacity: .6; cursor: wait; }
.hx-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(243, 213, 138, .6); }

/* Билет */
.hx-ticket-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.hx-ticket-img { display: block; width: 100%; height: auto; transform: rotate(-3deg); transition: opacity .8s ease, transform .8s ease; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.hx-ticket-img.is-hidden { opacity: .15; transform: rotate(-8deg) translateY(10px) scale(.94); filter: grayscale(1); }

/* Сцена: посты как на форуме */
.hx-turn { margin: 0 0 18px; }
.hx-post { position: relative; margin: 0 0 12px; padding: 16px 18px; border-radius: 10px; }
.hx-post-bot { background: rgba(243, 226, 187, .1); border-left: 3px solid #c9a15a; }
.hx-post-me { background: #f3e2bb; color: #2b1a0e; box-shadow: inset 0 0 0 1px rgba(138, 100, 54, .5); margin-left: 32px; }
.hx-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hx-who b { font: 700 18px var(--display); }
.hx-who small { font-size: 13px; opacity: .75; }
.hx-ava { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #2a2140 center / 22px no-repeat; color: #ffe6a6; font: 700 16px var(--display); box-shadow: 0 0 0 2px rgba(243, 213, 138, .55); }
.hx-ava-narr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe6a6' stroke-width='1.6'%3E%3Cpath d='M4 19c4-1 6-4 7-8M11 11c1-4 4-6 9-7-1 5-3 8-7 9'/%3E%3C/svg%3E"); }
.hx-ava-witch { background-color: #5b2a4a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe6a6' stroke-width='1.6'%3E%3Cpath d='M4 18h16M7 18l5-14 5 14'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E"); }
.hx-ava-me { background: #8e1820; }
.hx-text { font: 17px/1.6 var(--body); white-space: pre-line; color: #f3e9d4; }
.hx-task { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.hx-task b { color: #5a1a12; }
.hx-example { margin: 0 0 10px; font-size: 14px; }
.hx-example summary { cursor: pointer; color: #8e1820; font-style: italic; }
.hx-example p { margin: 6px 0 0; padding: 8px 10px; border-left: 2px solid #8a6436; background: rgba(255, 250, 235, .55); font-style: italic; }
.hx-input { display: block; width: 100%; padding: 12px 14px; border: 1px solid rgba(138, 100, 54, .55); border-radius: 6px; background: rgba(255, 252, 240, .8); color: #2b1a0e; font: 17px/1.55 var(--body); resize: vertical; }
.hx-input:focus { outline: none; border-color: #8e1820; box-shadow: 0 0 0 2px rgba(142, 24, 32, .25); }
.hx-turn.is-locked .hx-input { background: transparent; border-color: transparent; padding-left: 0; resize: none; }
.hx-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; padding: 0; list-style: none; }
.hx-checks li { padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.hx-checks li::before { margin-right: 4px; }
.hx-checks .is-ok { background: rgba(47, 122, 82, .16); color: #1d5e3c; }
.hx-checks .is-ok::before { content: "✓"; }
.hx-checks .is-wait { background: rgba(138, 100, 54, .14); color: #6b4a2a; }
.hx-checks .is-wait::before { content: "○"; }
.hx-checks .is-bad { background: rgba(163, 32, 28, .12); color: #8e1820; }
.hx-checks .is-bad::before { content: "✗"; }
.hx-actions { display: flex; gap: 10px; align-items: center; }
.hx-edit { padding: 8px 14px; border: 1px solid #8a6436; border-radius: 999px; background: transparent; color: #5a1a12; font: 14px var(--body); cursor: pointer; }
.hx-turn.is-locked .hx-checks { display: none; }

.hx-final { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(243, 213, 138, .35); }
.hx-final h3 { margin: 0 0 6px; font: 700 24px var(--display); color: #ffe6a6; }
.hx-preview { margin: 12px 0 16px; padding: 16px 18px; border-radius: 10px; background: #f3e2bb; color: #2b1a0e; font: 16px/1.6 var(--body); white-space: pre-line; }

.hx-arrival { text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 120, .22), transparent 60%), linear-gradient(180deg, rgba(22, 20, 36, .95), rgba(12, 11, 22, .95)); }
.hx-arrival h2 { justify-content: center; }
.hx-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }

@media (max-width: 760px) {
	.hx-card { padding: 22px 18px; }
	.hx-rules, .hx-ticket-row { grid-template-columns: 1fr; }
	.hx-post-me { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .hx-appear { animation: none; } .hx-ticket-img { transition: none; } }
.hx [hidden] { display: none !important; }