/* #region stylesheet module */
/*
	- The look of Nexus Homecoming: the Nexus itself, deep indigo and violet lit by the purple and teal glow of the game's own menus.
	- Panels are frosted dark glass with a thin glowing edge; headings use Cinzel and reading text uses Inter.
	- Each role has its own color, shared by portrait rings, role filters, and cards, and each verdict has its own chip color.
	- Every screen is laid out for a phone held upright first, and opens out into wider layouts on a desktop.
*/
/* #endregion */




/* #region Colors and faces */
:root
{
	--night: #0d0a24;
	--nightDeep: #07051a;
	--violet: #6b3fd6;
	--violetBright: #a67bff;
	--teal: #35d8e0;
	--tealSoft: #7ff1f5;
	--text: #ece8ff;
	--textSoft: #b9b2dc;
	--textFaint: #8a84b0;
	--glass: rgba(26, 20, 64, 0.62);
	--glassEdge: rgba(166, 123, 255, 0.32);
	--glassEdgeBright: rgba(127, 241, 245, 0.55);
	--display: 'Cinzel', 'Palatino Linotype', Georgia, serif;
	--reading: 'Inter', 'Segoe UI', system-ui, sans-serif;

	/* Role colors */
	--tank: #4aa3ff;
	--bruiser: #ffad42;
	--healer: #55e08f;
	--support: #3fd6d0;
	--ranged: #b88aff;
	--melee: #ff6f91;

	/* Verdict colors */
	--reworked: #f5c451;
	--stronger: #5fe39a;
	--weaker: #ff6b6b;
	--reshaped: #46dcd6;
	--same: #c3c3dd;

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-role='tank'] { --roleColor: var(--tank); }
[data-role='bruiser'] { --roleColor: var(--bruiser); }
[data-role='healer'] { --roleColor: var(--healer); }
[data-role='support'] { --roleColor: var(--support); }
[data-role='ranged'] { --roleColor: var(--ranged); }
[data-role='melee'] { --roleColor: var(--melee); }
[data-role='all'] { --roleColor: var(--violetBright); }
/* #endregion */




/* #region Page */
*
{
	box-sizing: border-box;
}

html
{
	background: var(--nightDeep);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
}

body
{
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--reading);
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
	background:
		radial-gradient(ellipse 80% 60% at 20% 10%, rgba(107, 63, 214, 0.35), transparent 70%),
		radial-gradient(ellipse 70% 50% at 85% 85%, rgba(53, 216, 224, 0.18), transparent 70%),
		linear-gradient(180deg, var(--night), var(--nightDeep));
	background-attachment: fixed;
	overflow-x: hidden;
}

a
{
	color: var(--tealSoft);
}

button
{
	font: inherit;
	color: inherit;
}

:focus-visible
{
	outline: 2px solid var(--tealSoft);
	outline-offset: 3px;
	border-radius: 6px;
}

h1:focus, h2:focus
{
	outline: none;
}

/* The nebula canvas fills the screen behind every moment, fading in once it first paints. */
.nebula
{
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	height: 100lvh;
	pointer-events: none;
	animation: nebulaWakes 1.6s ease both;
}

@keyframes nebulaWakes
{
	from { opacity: 0; }
	to { opacity: 1; }
}
/* #endregion */




/* #region Rising into view */
/* Parts of the catch-up start a little low and faint, then rise into place as they near the screen, each after its own small stagger. */
.canRise :is(.figure, .mainCard, .sectionTitle, .nexusEntry, .adviceList)
{
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease) var(--riseDelay, 0ms), transform 0.7s var(--ease) var(--riseDelay, 0ms);
}

.canRise :is(.figure, .mainCard, .sectionTitle, .nexusEntry, .adviceList).hasRisen
{
	opacity: 1;
	transform: none;
}
/* #endregion */




/* #region Moments */
/* Only the moment the address names is shown; each eases in as it appears. */
.moment
{
	display: none;
	position: relative;
	z-index: 1;
	width: min(100%, 1120px);
	margin: 0 auto;
	padding: calc(28px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom));
}

body[data-moment='welcome'] .welcomeMoment,
body[data-moment='when'] .whenMoment,
body[data-moment='who'] .whoMoment,
body[data-moment='catchUp'] .catchUpMoment
{
	display: block;
	animation: momentArrives 0.6s var(--ease) both;
}

@keyframes momentArrives
{
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.momentHeader
{
	text-align: center;
	margin: 12px auto 22px;
	max-width: 640px;
}

.stepMark, .eyebrow
{
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--teal);
}

.momentTitle
{
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(30px, 7vw, 46px);
	line-height: 1.12;
	letter-spacing: 0.01em;
}

.momentLine
{
	margin: 10px 0 0;
	color: var(--textSoft);
}
/* #endregion */




/* #region Shared parts */
.glassPanel
{
	background: var(--glass);
	border: 1px solid var(--glassEdge);
	border-radius: 20px;
	box-shadow: 0 18px 50px rgba(3, 2, 14, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.glowButton
{
	min-height: 52px;
	padding: 0 30px;
	border: 1px solid rgba(127, 241, 245, 0.6);
	border-radius: 999px;
	background: linear-gradient(135deg, #7a4cf0, #3a6fe0 55%, #22b9c9);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.02em;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 0 0 0 rgba(127, 241, 245, 0), 0 10px 30px rgba(107, 63, 214, 0.45);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.25s;
}

.glowButton:hover:not(:disabled)
{
	transform: translateY(-2px);
	box-shadow: 0 0 0 4px rgba(127, 241, 245, 0.15), 0 14px 36px rgba(107, 63, 214, 0.6);
}

.glowButton:active:not(:disabled)
{
	transform: translateY(0) scale(0.98);
}

.glowButton:disabled
{
	opacity: 0.4;
	cursor: default;
}

.quietButton
{
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid var(--glassEdge);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--textSoft);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.quietButton:hover
{
	border-color: var(--glassEdgeBright);
	color: var(--text);
	background: rgba(255, 255, 255, 0.08);
}

.fanNote
{
	margin: 0 auto;
	max-width: 560px;
	font-size: 13px;
	color: var(--textFaint);
	text-align: center;
}

/* The hexagonal draft portraits carry their own hex shape; a role-colored glow rings them. */
.heroHex
{
	display: inline-block;
	position: relative;
	line-height: 0;
}

.heroHex img
{
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 0 transparent);
	transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}

.heroHex.isLarge
{
	width: 76px;
	flex: none;
}

.heroHex.isLarge img
{
	filter: drop-shadow(0 0 6px var(--roleColor, var(--violetBright)));
}

.toast
{
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 10;
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(20, 16, 50, 0.92);
	border: 1px solid var(--glassEdgeBright);
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px);
}

.toast.isShowing
{
	animation: toastShows 2.2s var(--ease) both;
}

@keyframes toastShows
{
	0% { opacity: 0; transform: translate(-50%, 10px); }
	12%, 80% { opacity: 1; transform: translate(-50%, 0); }
	100% { opacity: 0; transform: translate(-50%, -6px); }
}
/* #endregion */




/* #region Welcome */
.welcomeMoment
{
	min-height: 100vh;
	min-height: 100dvh;
}

body[data-moment='welcome'] .welcomeMoment
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
}

.welcomeHeart
{
	text-align: center;
}

/* The mark's two hexagons turn slowly in opposite directions while the star breathes. */
.welcomeMark
{
	display: block;
	width: clamp(96px, 26vw, 140px);
	margin: 0 auto 18px;
	overflow: visible;
	filter: drop-shadow(0 0 18px rgba(166, 123, 255, 0.55));
}

.markHexOuter, .markHexInner, .markStar
{
	transform-box: view-box;
	transform-origin: 100px 100px;
}

.markHexOuter
{
	animation: markTurns 60s linear infinite;
}

.markHexInner
{
	animation: markTurns 40s linear infinite reverse;
}

.markStar
{
	animation: markBreathes 4.5s ease-in-out infinite;
}

@keyframes markTurns
{
	to { transform: rotate(360deg); }
}

@keyframes markBreathes
{
	0%, 100% { transform: scale(0.92); opacity: 0.85; }
	50% { transform: scale(1.06); opacity: 1; }
}

.welcomeHeart > :not(.welcomeMark)
{
	animation: welcomeRises 0.9s var(--ease) both;
}

.welcomeHeart > .welcomeTitle { animation-delay: 0.12s; }
.welcomeHeart > .welcomeLine { animation-delay: 0.26s; }
.welcomeHeart > .glowButton { animation-delay: 0.4s; }

@keyframes welcomeRises
{
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

.welcomeTitle
{
	margin: 0 auto;
	max-width: 12ch;
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(42px, 11vw, 92px);
	line-height: 1.02;
	background: linear-gradient(180deg, #ffffff, #d9ccff 55%, #8fe9f0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 40px rgba(166, 123, 255, 0.35);
}

.welcomeLine
{
	margin: 18px auto 30px;
	max-width: 30ch;
	font-size: clamp(17px, 4.4vw, 21px);
	color: var(--textSoft);
}

.welcomeHeart .glowButton
{
	min-width: 180px;
}
/* #endregion */




/* #region When did you leave */
.whenPanel
{
	max-width: 760px;
	margin: 0 auto;
	padding: 26px 20px 22px;
	text-align: center;
}

.chosenMonth
{
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(30px, 8vw, 44px);
	color: #fff;
}

.timeline
{
	position: relative;
	margin: 46px 6px 8px;
}

.landmarks
{
	position: absolute;
	left: 14px;
	right: 14px;
	top: -26px;
	height: 18px;
}

.landmarkPin
{
	position: absolute;
	top: 1px;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.landmarkPin::before
{
	content: '';
	position: absolute;
	inset: 3px;
	transform: rotate(45deg);
	border-radius: 2px;
	background: var(--violetBright);
	box-shadow: 0 0 8px rgba(166, 123, 255, 0.8);
	transition: transform 0.25s var(--ease), background 0.25s;
}

.landmarkPin.isNearest::before
{
	background: var(--tealSoft);
	box-shadow: 0 0 12px rgba(127, 241, 245, 0.9);
	transform: rotate(45deg) scale(1.35);
}

/* On a narrow screen the pins sit too close for a finger to tell apart, so they only mark the way, and the marker does the choosing. */
@media (max-width: 719px)
{
	.landmarkPin
	{
		width: 12px;
		height: 12px;
		margin-left: -6px;
		top: 4px;
		pointer-events: none;
	}

	.landmarkPin::before
	{
		inset: 2px;
	}
}

/* The slider's track fills with glow up to the marker, using the `--fill` share the script sets. */
.timelineSlider
{
	--fill: 50%;
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	touch-action: pan-y;
}

.timelineSlider::-webkit-slider-runnable-track
{
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--violet), var(--teal) var(--fill), rgba(255, 255, 255, 0.12) var(--fill));
}

.timelineSlider::-moz-range-track
{
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--violet), var(--teal) var(--fill), rgba(255, 255, 255, 0.12) var(--fill));
}

.timelineSlider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	margin-top: -11px;
	border-radius: 50%;
	border: 3px solid #fff;
	background: radial-gradient(circle, var(--tealSoft), var(--teal));
	box-shadow: 0 0 0 6px rgba(127, 241, 245, 0.18), 0 0 22px rgba(127, 241, 245, 0.85);
}

.timelineSlider::-moz-range-thumb
{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid #fff;
	background: radial-gradient(circle, var(--tealSoft), var(--teal));
	box-shadow: 0 0 0 6px rgba(127, 241, 245, 0.18), 0 0 22px rgba(127, 241, 245, 0.85);
}

.timelineYears
{
	position: relative;
	height: 18px;
	margin: 0 14px;
	font-size: 11px;
	color: var(--textFaint);
}

.yearMark
{
	position: absolute;
	transform: translateX(-50%);
}

.nearestLandmark
{
	min-height: 24px;
	margin: 18px 0 4px;
	color: var(--textSoft);
}

.landmarkMonth
{
	margin-right: 4px;
	font-weight: 600;
	color: var(--tealSoft);
}

.whenCount
{
	margin: 0 0 22px;
	font-weight: 600;
	color: #fff;
}

.whenChoices
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.whenChoices .glowButton
{
	min-width: 160px;
}
/* #endregion */




/* #region Who did you main */
.whoMoment
{
	padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

.whoTools
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 900px;
	margin: 0 auto 18px;
}

.roleFilters
{
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 6px;
	scrollbar-width: none;
}

.roleFilters::-webkit-scrollbar
{
	display: none;
}

.roleFilter
{
	flex: none;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--roleColor) 45%, transparent);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--textSoft);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.roleFilter[aria-pressed='true']
{
	background: color-mix(in srgb, var(--roleColor) 26%, transparent);
	border-color: var(--roleColor);
	color: #fff;
}

.heroSearch
{
	width: 100%;
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid var(--glassEdge);
	border-radius: 14px;
	background: rgba(10, 8, 30, 0.6);
	color: var(--text);
	font: inherit;
}

.heroSearch::placeholder
{
	color: var(--textFaint);
}

.heroSearch:focus
{
	outline: none;
	border-color: var(--glassEdgeBright);
}

.heroGrid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 14px 8px;
	max-width: 900px;
	margin: 0 auto;
}

.heroChoice
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 0;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.heroChoice[hidden]
{
	display: none;
}

.heroChoice .heroHex
{
	width: 72px;
}

.heroChoice:hover .heroHex img
{
	transform: translateY(-2px);
}

.heroChoice[aria-pressed='true'] .heroHex img
{
	filter: drop-shadow(0 0 2px var(--roleColor)) drop-shadow(0 0 10px var(--roleColor));
	animation: pickPops 0.45s var(--ease);
}

.heroChoice.isFull
{
	opacity: 0.4;
}

@keyframes pickPops
{
	0% { transform: scale(1); }
	40% { transform: scale(1.14); }
	100% { transform: scale(1); }
}

.heroChoiceName
{
	max-width: 100%;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
	color: var(--textSoft);
}

.heroChoice[aria-pressed='true'] .heroChoiceName
{
	color: #fff;
}

/* The tray sits along the bottom of the screen, holding the picks and the way on. */
.pickTray
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(13, 10, 36, 0.88);
	border-top: 1px solid var(--glassEdge);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

body:not([data-moment='who']) .pickTray
{
	display: none;
}

.pickTray.isRefusing
{
	animation: trayRefuses 0.4s var(--ease);
}

@keyframes trayRefuses
{
	0%, 100% { transform: none; }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.pickTrayHeroes
{
	display: flex;
	flex: 1;
	min-width: 0;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.trayHero
{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: none;
	width: 54px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	animation: trayHeroArrives 0.35s var(--ease);
}

.trayHero img
{
	width: 40px;
	height: auto;
	filter: drop-shadow(0 0 5px var(--roleColor));
}

.trayHeroName
{
	max-width: 54px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	color: var(--textSoft);
}

@keyframes trayHeroArrives
{
	from { opacity: 0; transform: translateY(8px) scale(0.85); }
	to { opacity: 1; transform: none; }
}

.trayHint
{
	align-self: center;
	font-size: 14px;
	color: var(--textFaint);
}

.pickTray .glowButton
{
	flex: none;
	padding: 0 22px;
}
/* #endregion */




/* #region The catch-up */
.catchUpHeader
{
	max-width: 760px;
	margin: 18px auto 34px;
	text-align: center;
}

.catchUpTitle
{
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(26px, 6.4vw, 42px);
	line-height: 1.18;
}

.catchUpNote
{
	margin: 8px 0 0;
	color: var(--textFaint);
}

.catchUpNote:empty
{
	display: none;
}

.catchUpFigures
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 24px 0 20px;
}

.figure
{
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 14px 6px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glassEdge);
}

.figure strong
{
	font-family: var(--display);
	font-size: clamp(28px, 8vw, 40px);
	line-height: 1.1;
	color: var(--tealSoft);
}

.figure span
{
	font-size: 13px;
	color: var(--textSoft);
}

.catchUpActions
{
	display: flex;
	justify-content: center;
	gap: 12px;
}

.catchUpSection
{
	margin: 0 auto 44px;
	max-width: 860px;
}

.sectionTitle
{
	margin: 0 0 16px;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(22px, 5.4vw, 30px);
	color: #fff;
}

.untouched
{
	margin: 0;
	color: var(--textSoft);
	font-style: italic;
}

.catchUpFooter
{
	padding: 10px 0 20px;
}
/* #endregion */




/* #region Main cards */
.mainCards
{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mainCard
{
	padding: 18px 16px 16px;
	border-color: color-mix(in srgb, var(--roleColor) 38%, transparent);
}

/* A card whose hero's file could not be reached offers to try again. */
.mainCard.isUnreached .quietButton
{
	margin-top: 4px;
}

/* A card waiting for its hero's file shimmers softly so the wait reads as work in progress. */
.mainCard.isWaiting
{
	position: relative;
	overflow: hidden;
}

.mainCard.isWaiting::after
{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(166, 123, 255, 0.12) 50%, transparent 70%);
	animation: cardShimmers 1.4s ease-in-out infinite;
}

@keyframes cardShimmers
{
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

.mainCardHeader
{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.mainName
{
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
}

.mainRole
{
	margin: 2px 0 8px;
	font-size: 14px;
	color: var(--roleColor);
}

.verdictChip
{
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nightDeep);
	background: var(--chipColor);
	box-shadow: 0 0 16px color-mix(in srgb, var(--chipColor) 50%, transparent);
}

.verdictChip.is-reworked { --chipColor: var(--reworked); }
.verdictChip.is-stronger { --chipColor: var(--stronger); }
.verdictChip.is-weaker { --chipColor: var(--weaker); }
.verdictChip.is-reshaped { --chipColor: var(--reshaped); }
.verdictChip.is-same { --chipColor: var(--same); }

.cardLabel
{
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--textFaint);
}

.mainToday
{
	margin-bottom: 16px;
}

.mainToday p
{
	margin: 0;
	color: var(--text);
}

.mainChanges
{
	margin-bottom: 16px;
}

.easeLinks
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.easeLink
{
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--glassEdge);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.easeLink:hover
{
	border-color: var(--glassEdgeBright);
	background: rgba(127, 241, 245, 0.08);
}
/* #endregion */




/* #region A hero's timeline */
.heroTimeline
{
	position: relative;
	margin: 0;
	padding: 0 0 0 18px;
	list-style: none;
}

.heroTimeline::before
{
	content: '';
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--roleColor) 70%, transparent), rgba(255, 255, 255, 0.08));
}

.heroTimeline.isNested
{
	margin-top: 6px;
	padding-left: 14px;
}

.heroTimeline.isNested::before
{
	display: none;
}

.changeEntry, .minorRun
{
	position: relative;
	margin: 0 0 8px;
}

.changeEntry::before, .minorRun::before
{
	content: '';
	position: absolute;
	left: -17px;
	top: 12px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nightDeep);
	border: 2px solid var(--dotColor, var(--textFaint));
}

.changeEntry.is-rework { --dotColor: var(--reworked); }
.changeEntry.is-major { --dotColor: var(--roleColor); }

.isNested .changeEntry::before
{
	display: none;
}

details > summary
{
	list-style: none;
	cursor: pointer;
}

details > summary::-webkit-details-marker
{
	display: none;
}

.changeSummary, .minorRunSummary
{
	display: block;
	padding: 8px 10px;
	border-radius: 12px;
	transition: background 0.2s;
}

.changeSummary:hover, .minorRunSummary:hover, details[open] > .changeSummary, details[open] > .minorRunSummary
{
	background: rgba(255, 255, 255, 0.05);
}

.changeMeta
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
	font-size: 12px;
}

.changeDate, .minorRunDates
{
	color: var(--textFaint);
	font-size: 12px;
}

.impactMark, .directionMark
{
	padding: 1px 7px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 10px;
	border: 1px solid currentColor;
}

.impactMark.is-rework { color: var(--reworked); }
.impactMark.is-major { color: var(--roleColor, var(--violetBright)); }
.impactMark.is-minor { color: var(--textFaint); }
.directionMark.is-buff { color: var(--stronger); }
.directionMark.is-nerf { color: var(--weaker); }
.directionMark.is-mixed { color: var(--reworked); }
.directionMark.is-change { color: var(--reshaped); }

.changeText
{
	display: block;
}

.changeEntry.is-minor .changeText
{
	color: var(--textSoft);
	font-size: 15px;
}

.minorRunText
{
	display: block;
	color: var(--textSoft);
}

.minorRunText::after
{
	content: ' ›';
	color: var(--textFaint);
}

details[open] > .minorRunSummary .minorRunText::after
{
	content: ' ⌄';
}

.changeDetail
{
	margin: 4px 0 8px 10px;
	padding: 10px 14px 12px;
	border-left: 2px solid var(--glassEdge);
	animation: detailOpens 0.3s var(--ease);
}

@keyframes detailOpens
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

.officialNotes
{
	font-size: 14px;
	line-height: 1.5;
	color: var(--textSoft);
}

.officialNotes ul
{
	margin: 2px 0;
	padding-left: 18px;
	list-style: disc;
}

.officialNotes ul ul
{
	list-style: circle;
}

.officialNotes li
{
	margin: 2px 0;
}

.officialNotes strong
{
	color: var(--text);
	font-weight: 600;
}

.notesLabel
{
	margin: 8px 0 2px;
}

.developerComment
{
	margin: 8px 0;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(166, 123, 255, 0.08);
	font-style: italic;
}

.patchLink
{
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tealSoft);
	text-decoration: none;
}

.patchLink:hover
{
	text-decoration: underline;
}
/* #endregion */




/* #region The Nexus timeline */
.nexusTimeline
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nexusEntry.isMajor
{
	overflow: hidden;
	padding: 0;
}

.nexusPicture
{
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 7;
	background: radial-gradient(circle at 50% 60%, rgba(166, 123, 255, 0.35), transparent 70%), linear-gradient(135deg, #1d1450, #0c2a46);
	overflow: hidden;
}

.nexusArt
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nexusPicture::after
{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(13, 10, 36, 0.85));
}

.nexusPicture .heroHex.isLarge
{
	width: 96px;
	z-index: 1;
}

.nexusPicture .heroHex.isBadge
{
	position: absolute;
	right: 14px;
	bottom: 10px;
	z-index: 1;
	width: 54px;
}

.nexusWords
{
	padding: 14px 16px 16px;
}

.nexusEntry.isMinor .nexusWords
{
	padding: 10px 14px;
	border-left: 2px solid var(--glassEdge);
}

.nexusMeta
{
	display: flex;
	gap: 8px;
	margin: 0 0 2px;
	font-size: 12px;
	color: var(--textFaint);
}

.nexusKind
{
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--teal);
}

.nexusHeadline
{
	margin: 0 0 4px;
	font-weight: 700;
	color: #fff;
}

h4.nexusHeadline
{
	font-family: var(--display);
	font-size: 22px;
	line-height: 1.2;
}

.nexusDetail
{
	margin: 0;
	color: var(--textSoft);
	font-size: 15px;
}

.nexusEntry .patchLink
{
	margin-top: 6px;
}

.nexusEntry.isMinor .nexusDetail
{
	font-size: 14px;
}
/* #endregion */




/* #region First games back */
.adviceList
{
	margin: 0;
	padding: 18px 18px 18px 40px;
	color: var(--textSoft);
}

.adviceList li
{
	margin: 0 0 10px;
}

.adviceList li:last-child
{
	margin-bottom: 0;
}

.adviceList strong
{
	color: #fff;
}
/* #endregion */




/* #region Wider screens */
@media (min-width: 720px)
{
	.moment
	{
		padding-left: 28px;
		padding-right: 28px;
	}

	.whenPanel
	{
		padding: 34px 40px 30px;
	}

	.whoTools
	{
		flex-direction: row;
		align-items: center;
	}

	.heroSearch
	{
		max-width: 260px;
		margin-left: auto;
	}

	.heroGrid
	{
		grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	}

	.heroChoice .heroHex
	{
		width: 84px;
	}

	.pickTray
	{
		left: 50%;
		right: auto;
		bottom: 18px;
		width: min(760px, calc(100% - 40px));
		transform: translateX(-50%);
		border: 1px solid var(--glassEdge);
		border-radius: 22px;
		padding: 12px 14px;
	}

	.pickTray.isRefusing
	{
		animation: none;
	}

	.mainCard
	{
		padding: 24px 26px 22px;
	}

	.heroHex.isLarge
	{
		width: 92px;
	}

	.nexusEntry.isMajor
	{
		display: grid;
		grid-template-columns: 300px 1fr;
	}

	.nexusPicture
	{
		aspect-ratio: auto;
		min-height: 170px;
	}

	.nexusPicture::after
	{
		background: linear-gradient(90deg, transparent 55%, rgba(13, 10, 36, 0.7));
	}

	.nexusWords
	{
		padding: 18px 22px;
	}
}
/* #endregion */




/* #region Reduced motion */
@media (prefers-reduced-motion: reduce)
{
	*, *::before, *::after
	{
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}
/* #endregion */