/* World page: sticky contents, compass, time scale, mastery ladder, trial path. */
.lore-layout {
	display: grid !important;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50) !important;
	align-items: start;
}
.lore-toc {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	font-family: var(--wp--preset--font-family--display);
	font-size: .85rem;
	letter-spacing: .06em;
}
.lore-toc__title { color: var(--copper); letter-spacing: .3em; text-transform: uppercase; font-size: .72rem; margin: 0 0 .8rem; }
.lore-toc ol { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 1px solid rgba(171, 112, 53, .45); }
.lore-toc li { margin: .15rem 0; }
.lore-toc a {
	display: block;
	padding: .3rem .5rem;
	color: var(--ash);
	text-decoration: none;
	border-radius: 6px;
	position: relative;
	transition: color .3s ease, background .3s ease;
}
.lore-toc a::before {
	content: "";
	position: absolute;
	left: calc(-.9rem - 4px);
	top: 50%;
	width: 7px;
	height: 7px;
	translate: 0 -50%;
	rotate: 45deg;
	background: var(--void);
	border: 1px solid var(--copper);
	transition: background .3s ease, box-shadow .3s ease;
}
.lore-toc a:hover { color: var(--gold-light); }
.lore-toc a.is-active { color: var(--gold-light); background: rgba(53, 8, 8, .6); }
.lore-toc a.is-active::before { background: var(--gold); box-shadow: 0 0 10px var(--aura); }

.lore-body > .wp-block-heading { scroll-margin-top: calc(var(--header-h) + 1rem); }
.lore-body h2.wp-block-heading { margin-top: var(--wp--preset--spacing--50); }
.lore-body h2.wp-block-heading:first-child { margin-top: 0; }

@media (max-width: 960px) {
	.lore-layout { grid-template-columns: minmax(0, 1fr); }
	.lore-toc { min-width: 0; padding: 1rem; border: 1px solid rgba(171, 112, 53, .45); border-radius: 12px; background: rgba(20, 8, 9, .75); }
	.lore-toc ol { columns: 2; column-gap: 1.2rem; }
	.lore-toc { position: static; }
}

/* Time scale tiles */
.time-scale {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
	counter-reset: tier;
}
.time-scale__tile {
	position: relative;
	padding: 1.2rem 1rem 1rem;
	text-align: center;
	background: linear-gradient(to bottom, rgba(53, 8, 8, .85), rgba(20, 6, 7, .9));
	border: 1px solid var(--copper);
	border-radius: 12px;
}
.time-scale__tile + .time-scale__tile::before {
	content: "›";
	position: absolute;
	left: -.85rem;
	top: 50%;
	translate: 0 -50%;
	color: var(--copper);
	font-size: 1.4rem;
}
.time-scale__name { display: block; font-family: var(--wp--preset--font-family--display); color: var(--gold); font-size: 1.15rem; letter-spacing: .1em; }
.time-scale__value { display: block; font-size: 2rem; color: var(--gold-light); font-family: var(--wp--preset--font-family--display); margin: .2rem 0; }
.time-scale__note { display: block; color: var(--ash); font-size: .9rem; font-style: italic; }
@media (max-width: 640px) { .time-scale { grid-template-columns: 1fr; } .time-scale__tile + .time-scale__tile::before { content: none; } }

/* Compass of the four winds */
.compass {
	position: relative;
	width: min(560px, 100%);
	aspect-ratio: 3 / 2;
	margin: 2rem auto;
	font-family: var(--wp--preset--font-family--display);
}
.compass__ring {
	position: absolute;
	top: 17%;
	bottom: 17%;
	left: 50%;
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: 50%;
	border: 2px solid var(--copper);
	background:
		repeating-conic-gradient(from 0deg, rgba(171, 112, 53, .55) 0 .6deg, transparent .6deg 7.5deg),
		radial-gradient(circle, rgba(53, 8, 8, .9) 0 55%, rgba(20, 6, 7, .95) 56%);
	box-shadow: inset 0 0 0 10px rgba(11, 7, 9, .6), 0 0 30px rgba(0, 0, 0, .6), 0 0 40px color-mix(in srgb, var(--aura) 15%, transparent);
	animation: compass-turn 120s linear infinite;
}
.compass__star {
	position: absolute;
	top: 25%;
	bottom: 25%;
	left: 50%;
	aspect-ratio: 1;
	translate: -50% 0;
	clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
	background: linear-gradient(135deg, var(--gold-light), var(--copper) 50%, var(--bronze));
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--aura) 50%, transparent));
}
.compass__star::after {
	content: "";
	position: absolute;
	inset: 44%;
	border-radius: 50%;
	background: var(--maroon);
	border: 2px solid var(--gold);
}
.compass__point {
	position: absolute;
	translate: -50% -50%;
	text-align: center;
	white-space: nowrap;
	line-height: 1.15;
}
.compass__point b { display: block; color: var(--gold); font-size: .95rem; letter-spacing: .12em; }
.compass__point small { color: var(--ash); font-family: var(--wp--preset--font-family--body); font-style: italic; font-size: .78rem; }
.compass__point--dawn { left: 50%; top: 7%; }
.compass__point--dusk { left: 50%; top: 93%; }
.compass__point--low  { left: 100%; top: 50%; translate: -100% -50%; text-align: right; }
.compass__point--high { left: 0; top: 50%; translate: 0 -50%; text-align: left; }
@keyframes compass-turn { to { rotate: 360deg; } }
@media (max-width: 520px) {
	.compass { aspect-ratio: 1; }
	.compass__point small { display: none; }
	.compass__point b { font-size: .8rem; }
}

/* Mastery ladder, levels 0-6 */
.mastery-ladder { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .55rem; }
.mastery-ladder li {
	--lvl: 0;
	display: grid;
	grid-template-columns: 2.4rem 9rem 1fr;
	align-items: center;
	gap: 1rem;
	padding: .65rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(171, 112, 53, calc(.25 + var(--lvl) * .1));
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--aura) calc(var(--lvl) * 5%), transparent), transparent 70%),
		rgba(20, 8, 9, .8);
}
.mastery-ladder__num {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	border: 1px solid var(--copper);
	font-family: var(--wp--preset--font-family--display);
	color: var(--gold);
	box-shadow: 0 0 calc(var(--lvl) * 3px) color-mix(in srgb, var(--aura) 60%, transparent);
}
.mastery-ladder__name { font-family: var(--wp--preset--font-family--display); color: var(--gold-light); letter-spacing: .08em; }
.mastery-ladder__desc { color: var(--ash); font-size: .95rem; }
.mastery-ladder li.is-mythic { border-style: dashed; opacity: .75; }
.mastery-ladder li.is-mythic .mastery-ladder__name {
	background: linear-gradient(90deg, var(--gold-light), var(--noctis), var(--gold-light));
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: mythic-sheen 6s linear infinite;
}
@keyframes mythic-sheen { to { background-position: -200% 0; } }
@media (max-width: 640px) {
	.mastery-ladder li { grid-template-columns: 2.4rem 1fr; }
	.mastery-ladder__desc { grid-column: 2; }
}

/* Two-path cards: Vigorant vs Savant */
.path-pair { gap: 1.2rem !important; }
.path-pair .is-style-plaque { height: 100%; }

/* Trial statue path */
.trial-path {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: .5rem;
	margin: 2rem 0 1rem;
	padding: 0;
	list-style: none;
	position: relative;
}
.trial-path::before {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 2.2rem;
	height: 2px;
	background: linear-gradient(90deg, var(--copper), var(--gold), var(--noctis));
	opacity: .6;
}
.trial-path li { flex: 1; text-align: center; position: relative; }
.trial-path__stone {
	--h: 50px;
	display: block;
	width: 64%;
	max-width: 70px;
	height: var(--h);
	margin: 0 auto .6rem;
	background: linear-gradient(to bottom, #6b5a4c, #3a2f27);
	border: 1px solid #8a7462;
	border-radius: 6px 6px 2px 2px;
	box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .5);
	position: relative;
	z-index: 1;
}
.trial-path li:nth-child(2) .trial-path__stone { --h: 70px; }
.trial-path li:nth-child(3) .trial-path__stone { --h: 92px; }
.trial-path li:nth-child(4) .trial-path__stone { --h: 118px; }
.trial-path li:nth-child(5) .trial-path__stone {
	--h: 150px;
	background: linear-gradient(to bottom, #2a2238, #0d0a14);
	border-color: var(--noctis);
	box-shadow: 0 0 24px rgba(155, 123, 212, .45), inset 0 -8px 12px rgba(0, 0, 0, .6);
}
.trial-path__name { display: block; font-family: var(--wp--preset--font-family--display); color: var(--gold); font-size: .85rem; letter-spacing: .08em; }
.trial-path__note { display: block; color: var(--ash); font-size: .78rem; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
	.compass__ring, .mastery-ladder li.is-mythic .mastery-ladder__name { animation: none; }
}
@media (max-width: 520px) {
	.compass__ring { top: 22%; bottom: 22%; }
	.compass__star { top: 30%; bottom: 30%; }
	.compass__point--dawn { top: 12%; }
	.compass__point--dusk { top: 88%; }
}
.trial-path li { min-width: 0; }
@media (max-width: 640px) {
	.trial-path { gap: .2rem; }
	.trial-path__name { font-size: .6rem; letter-spacing: 0; overflow-wrap: anywhere; }
	.trial-path__note { font-size: .62rem; }
}