/* Daily Upgrade: the games' surfaces, results screen and profile. Every
   live box keeps its size before REST fills it, so nothing shifts. */
.umdu-enabled.umdu-game,
.umdu-enabled.umdu-todays,
.umdu-enabled.umdu-board,
.umdu-enabled.umdu-gamecard {
	box-sizing: border-box;
	color: var(--umdu-text);
}

.umdu-game-page .entry-content,
.umdu-game-page .wp-block-post-content {
	max-width: 860px;
	margin-inline: auto;
}

.umdu-crumbs {
	margin: 0 0 0.75rem;
	color: var(--umdu-muted);
	font-size: 0.85rem;
}

.umdu-crumbs a {
	color: inherit;
}

.umdu-eyebrow {
	margin: 0 0 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--umdu-accent);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.umdu-kids-privacy {
	color: var(--umdu-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.umdu-eyebrow .umdu-kids-privacy {
	margin-inline-start: 0.5rem;
	font-size: 0.8rem;
	text-transform: none;
	letter-spacing: 0;
}

.umdu-results__privacy,
.umdu-name-form__privacy {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
}

.umdu-button {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 10px;
	background: var(--umdu-accent);
	color: #fff !important;
	font: inherit;
	font-weight: 800;
	text-decoration: none !important;
	cursor: pointer;
	touch-action: manipulation;
}

/* Themes restyle every button:hover and :focus (GeneratePress: white on dark grey); a button here keeps its own colours. */
.umdu-button:hover,
.umdu-button:focus {
	background: var(--umdu-accent);
	color: #fff !important;
}

.umdu-button--big {
	min-height: 56px;
	padding: 0.8rem 1.5rem;
	font-size: 1.1rem;
}

.umdu-button--ghost {
	border: 2px solid var(--umdu-border);
	background: transparent;
	color: var(--umdu-accent) !important;
}

.umdu-button--ghost:hover,
.umdu-button--ghost:focus {
	background: color-mix(in srgb, var(--umdu-accent) 8%, transparent);
	color: var(--umdu-accent) !important;
}

.umdu-button--danger {
	background: #a12622;
}

.umdu-button--danger:hover,
.umdu-button--danger:focus {
	background: #a12622;
}

.umdu-link {
	min-height: 44px;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: var(--umdu-accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
	touch-action: manipulation;
}

/* Themes restyle every button:hover and :focus (GeneratePress: white on dark grey); a button here keeps its own colours. */
.umdu-link:hover,
.umdu-link:focus {
	background: none;
	color: var(--umdu-accent);
}

.umdu-link--danger {
	color: #a12622;
}

.umdu-link--danger:hover,
.umdu-link--danger:focus {
	color: #a12622;
}

.umdu-section-title,
.umdu-box__title {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
	font-weight: 900;
	line-height: 1.2;
}

.umdu-game__frame {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	margin: 1rem 0 1.25rem;
	overflow: hidden;
	border: 2px solid var(--umdu-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* The start card: the game's art, then its name, hook, today's number and Play. */
.umdu-game__poster {
	position: relative;
	display: block;
	min-height: 260px;
	overflow: hidden;
	background: var(--umdu-accent);
}

.umdu-game__art {
	position: absolute;
	inset: 0;
	display: block;
}

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

.umdu-game__art[data-glyph]::after {
	content: attr(data-glyph);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 4rem;
	font-weight: 900;
}

/* A game's how-to demo plays on a stage over its art, inside the poster's
   own box: the stage is there from the start and never changes the box's
   size. The game's demo draws in it, sized by the stage (cqw, cqh). */
.umdu-game__demo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: size;
	background: var(--umdu-bg);
	color: var(--umdu-text);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.umdu-game__poster.is-demo .umdu-game__demo {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease;
}

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

/* A demo's captions, on the stage's left above the control: one at a time
   while it plays, every one as a key in a still frame. The game draws on
   the right. */
.umdu-demo-says {
	position: absolute;
	top: 0.75rem;
	bottom: 4rem;
	left: 0.9rem;
	display: grid;
	align-content: center;
	width: 37%;
}

.umdu-demo-say {
	display: flex;
	grid-area: 1 / 1;
	gap: 0.55rem;
	align-items: center;
	margin: 0;
	color: var(--umdu-text);
	font-size: clamp(0.85rem, 4.4cqw, 1.2rem);
	font-weight: 800;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.umdu-demo-say.is-on {
	opacity: 1;
	transform: none;
}

.umdu-demo-say__key {
	display: inline-grid;
	flex: none;
	place-items: center;
	min-width: 2em;
	height: 2em;
	padding: 0 0.35em;
	border-radius: 9px;
	background: var(--umdu-accent);
	color: #fff;
	font-size: 0.85em;
	font-weight: 900;
	white-space: nowrap;
}

.umdu-game__poster.is-still .umdu-demo-says {
	gap: 0.4rem;
}

.umdu-game__poster.is-still .umdu-demo-say {
	grid-area: auto;
	font-size: clamp(0.72rem, 3.4cqw, 0.95rem);
}

.umdu-game__demo-toggle {
	position: absolute;
	z-index: 1;
	bottom: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem 0 0.9rem;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 3px 12px rgba(17, 24, 39, 0.24);
	color: var(--umdu-accent);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	touch-action: manipulation;
}

/* Themes restyle every button:hover and :focus (GeneratePress: white on dark grey); a button here keeps its own colours. */
.umdu-game__demo-toggle:hover,
.umdu-game__demo-toggle:focus {
	background: #fff;
	color: var(--umdu-accent);
}

.umdu-game__demo-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* While the demo plays the control is a round stop button, out of its way;
   its words stay for screen readers. */
.umdu-game__poster.is-demo .umdu-game__demo-toggle,
.umdu-game__poster.is-demo .umdu-game__demo-toggle:hover,
.umdu-game__poster.is-demo .umdu-game__demo-toggle:focus {
	width: 44px;
	padding: 0;
	justify-content: center;
	background: var(--umdu-accent);
	color: #fff;
}

.umdu-game__poster.is-demo [data-umdu-demo-label] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.umdu-game__poster.is-demo .umdu-game__demo-toggle:focus-visible {
	outline-color: var(--umdu-accent);
}

/* A play triangle, or a stop square while the demo plays. */
.umdu-game__demo-icon {
	position: relative;
	flex: none;
	width: 0.7rem;
	height: 0.8rem;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.umdu-game__poster.is-demo .umdu-game__demo-icon {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	clip-path: none;
}

/* A ring that ripples out a few times, so the control is noticed. */
.umdu-game__demo-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #fff;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.umdu-game__poster:not(.is-demo) .umdu-game__demo-toggle::after {
		animation: umdu-demo-ripple 1.8s ease-out 1.2s 3;
	}
}

@keyframes umdu-demo-ripple {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.25, 1.6);
	}
}

.umdu-game__cta {
	display: grid;
	align-content: center;
	gap: 0.55rem;
	justify-items: start;
	padding: 1.5rem;
	text-align: left;
}

.umdu-game__hook {
	margin: 0;
	font-size: clamp(1.15rem, 3vw, 1.4rem);
	font-weight: 800;
	line-height: 1.25;
}

.umdu-game__number {
	min-height: 1.5em;
	margin: 0;
	line-height: 1.5;
	overflow: hidden;
	color: var(--umdu-accent);
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Play and the "no daily today" notice share one place: one shows. */
.umdu-game__action {
	display: grid;
	justify-self: stretch;
	margin-top: 0.4rem;
}

.umdu-game__action > * {
	grid-area: 1 / 1;
}

.umdu-game__notice {
	align-self: center;
	margin: 0;
	font-weight: 700;
	visibility: hidden;
}

.umdu-game.is-sitting-out .umdu-game__notice {
	visibility: visible;
}

.umdu-game.is-sitting-out .umdu-game__play {
	visibility: hidden;
}

@media (max-width: 700px) {
	.umdu-game__frame {
		grid-template-columns: 1fr;
	}

	.umdu-game__poster {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.umdu-game__cta {
		padding: 1.1rem 1.1rem 1.25rem;
	}
}

.umdu-game__below {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 0 0 1.25rem;
}

@media (max-width: 700px) {
	.umdu-game__below {
		grid-template-columns: 1fr;
	}
}

/* Every games card: one radius and shadow, and the colours the board and
   champion share. */
.umdu-enabled {
	--umdu-card-radius: 16px;
	--umdu-card-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 18px rgba(17, 24, 39, 0.06);
	--umdu-lift-shadow: 0 2px 6px rgba(17, 24, 39, 0.08), 0 16px 32px rgba(17, 24, 39, 0.14);
	--umdu-ghost: rgba(17, 24, 39, 0.08);
	--umdu-done: #2e6b45;
	--umdu-gold: #d9a514;
}

.umdu-box {
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--umdu-border);
	border-radius: var(--umdu-card-radius);
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
}

/* Your games: three lines, whatever fills them. */
.umdu-yours__body {
	height: calc(4.5em + 0.25rem);
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.5;
}

.umdu-yours__body p {
	margin: 0;
}

.umdu-yours__line {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 700;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.umdu-yours__todo {
	display: -webkit-box;
	margin-top: 0.25rem !important;
	overflow: hidden;
	color: var(--umdu-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.umdu-yours__profile {
	margin-top: 0.4rem;
	padding: 0;
	font-weight: 700;
}

/* A board: a title row with the live player count, then exactly `limit`
   places of one fixed height, drawn as a skeleton before the data. */
.umdu-board {
	--umdu-row: 44px;
}

.umdu-board__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.6rem;
	align-items: center;
	margin: 0 0 0.6rem;
}

/* The daily total's Today / This week switch: a segmented control under
   the title, or beside it on the hub's wide board. Its size never depends
   on the title, so a title that changes moves nothing. */
.umdu-board__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	max-width: 20rem;
	padding: 3px;
	border-radius: 12px;
	background: var(--umdu-ghost);
}

.umdu-board__tab {
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0 0.6rem;
	overflow: hidden;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--umdu-muted);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Themes restyle every button:hover and :focus (GeneratePress: white on dark grey); a button here keeps its own colours. */
.umdu-board__tab:hover,
.umdu-board__tab:focus {
	background: rgba(255, 255, 255, 0.55);
	color: var(--umdu-text);
}

.umdu-board__tab[aria-selected="true"],
.umdu-board__tab[aria-selected="true"]:hover,
.umdu-board__tab[aria-selected="true"]:focus {
	background: #fff;
	color: var(--umdu-accent);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1), 0 2px 6px rgba(17, 24, 39, 0.08);
}

.umdu-board__tab:focus-visible {
	outline: 2px solid var(--umdu-accent);
	outline-offset: 1px;
}

@media (min-width: 782px) {
	.umdu-board--full .umdu-board__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	}

	.umdu-board--full .umdu-board__tabs {
		width: 100%;
	}
}

.umdu-board__top .umdu-box__title {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-board__top .umdu-box__title::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.4em;
	vertical-align: -0.12em;
	background: var(--umdu-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M17 5h2a2 2 0 0 1 2 2v1a3 3 0 0 1-3 3h-1M7 5H5a2 2 0 0 0-2 2v1a3 3 0 0 0 3 3h1'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M17 5h2a2 2 0 0 1 2 2v1a3 3 0 0 1-3 3h-1M7 5H5a2 2 0 0 0-2 2v1a3 3 0 0 0 3 3h1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.umdu-board__rows {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--umdu-rows, 5) * var(--umdu-row));
	margin: 0;
	padding: 0;
	list-style: none;
}

.umdu-board__row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(26px, max-content) 28px minmax(0, 1fr) auto 28px;
	gap: 0.6rem;
	align-items: center;
	min-height: var(--umdu-row);
	padding: 0 0.35rem;
	border-bottom: 1px solid rgba(17, 24, 39, 0.06);
	font-size: 0.95rem;
}

.umdu-board__row:last-child {
	border-bottom-color: transparent;
}

.umdu-board__row.is-me {
	border-radius: 10px;
	background: color-mix(in srgb, var(--umdu-accent) 11%, #fff);
	box-shadow: inset 3px 0 0 var(--umdu-accent);
}

.umdu-board__row.is-below {
	border-top: 1px dashed var(--umdu-border);
}

.umdu-board__rank {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	border-radius: 999px;
	color: var(--umdu-muted);
	font-size: 0.8rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.umdu-board__rank[data-rank="1"],
.umdu-hall__rank[data-rank="1"] {
	background: linear-gradient(135deg, #f8dc6b, #d9a514);
	color: #4d3800;
}

.umdu-board__rank[data-rank="2"],
.umdu-hall__rank[data-rank="2"] {
	background: linear-gradient(135deg, #eef1f5, #aab4bf);
	color: #2f3a45;
}

.umdu-board__rank[data-rank="3"],
.umdu-hall__rank[data-rank="3"] {
	background: linear-gradient(135deg, #f0bf98, #c27a46);
	color: #4a250b;
}

.umdu-board__avatar {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--umdu-ghost);
	box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.2);
	object-fit: cover;
}

/* The name and its 🔥 on one line, a long name giving way first; the
   games or days played sit under it, inside the row's fixed height, so
   the name keeps the row's whole width. */
.umdu-board__name {
	display: grid;
	grid-template-columns: minmax(0, max-content) auto;
	column-gap: 0.35em;
	align-items: baseline;
	justify-content: start;
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.umdu-board__nick {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.umdu-board__row.is-me .umdu-board__name {
	font-weight: 900;
}

.umdu-board__name small,
.umdu-board__fire {
	font-size: 0.8em;
}

.umdu-board__name small {
	grid-column: 1 / -1;
	overflow: hidden;
	color: var(--umdu-muted);
	font-weight: 600;
	text-overflow: ellipsis;
}

.umdu-board__fire {
	color: #b4470b;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.umdu-board__score {
	grid-column: -3 / -2;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	text-align: right;
}

.umdu-board__report {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--umdu-muted);
	font-size: 0.8rem;
	opacity: 0.45;
	cursor: pointer;
}

/* Themes restyle every button:hover and :focus (GeneratePress: white on dark grey); a button here keeps its own colours. */
.umdu-board__report:hover,
.umdu-board__report:focus {
	background: none;
	color: var(--umdu-muted);
	opacity: 1;
}

.umdu-board__reasons {
	grid-column: 1 / -1;
	padding-bottom: 0.4rem;
	font-size: 0.85rem;
}

/* A place no one holds: its number and grey bars, pulsing while the
   board loads. */
.umdu-board__row.is-ghost .umdu-board__rank {
	opacity: 0.55;
}

.umdu-board__row.is-ghost .umdu-board__name,
.umdu-board__row.is-ghost .umdu-board__score {
	height: 0.7em;
	border-radius: 999px;
	background: var(--umdu-ghost);
}

.umdu-board__row.is-ghost .umdu-board__name {
	width: 62%;
}

.umdu-board__row.is-ghost:nth-child(3n + 2) .umdu-board__name {
	width: 46%;
}

.umdu-board__row.is-ghost:nth-child(3n) .umdu-board__name {
	width: 74%;
}

.umdu-board__row.is-ghost .umdu-board__score {
	width: 2em;
}

.umdu-board__rows.is-loading .umdu-board__row.is-ghost > * {
	animation: umdu-shimmer 1.4s ease-in-out infinite;
}

.umdu-board__rows.is-empty .umdu-board__row.is-ghost {
	opacity: 0.6;
}

/* No one on the board yet: said over its empty places. */
.umdu-board__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0.5rem;
}

.umdu-board__empty span {
	max-width: 20em;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--umdu-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

/* The foot: the live player count grows from the left, the reset time
   keeps the right. */
.umdu-board__foot {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin: 0.6rem 0 0;
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.8rem;
	white-space: nowrap;
}

.umdu-board__players {
	color: var(--umdu-text);
	font-weight: 800;
}

.umdu-board__players::before {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: #2fb36d;
	vertical-align: 0.05em;
	animation: umdu-live 2s ease-in-out infinite;
}

.umdu-board__players:empty {
	visibility: hidden;
}

/* Both periods' lines share one place, as wide as the wider of them, and
   the board's period shows one: switching moves neither. */
.umdu-board__resets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: end;
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
}

.umdu-board__resets > span {
	grid-area: 1 / 1;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.umdu-board [data-umdu-board-foot="week"],
.umdu-board.is-week [data-umdu-board-foot="day"] {
	visibility: hidden;
}

.umdu-board.is-week [data-umdu-board-foot="week"] {
	visibility: visible;
}

.umdu-board__play {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.85rem;
}

.umdu-board__hall {
	display: block;
	margin-top: 0.6rem;
	color: var(--umdu-accent) !important;
	font-size: 0.95rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none !important;
}

.umdu-board__hall:hover {
	text-decoration: underline !important;
}

.umdu-board--full {
	margin-top: 1.5rem;
}

@keyframes umdu-shimmer {
	50% {
		opacity: 0.45;
	}
}

@keyframes umdu-live {
	50% {
		opacity: 0.35;
	}
}

@media (min-width: 1041px) {
	.umdu-todays .umdu-champion {
		display: none;
	}
}

/* Today's games */
.umdu-enabled.umdu-todays[data-umdu-todays="strip"] {
	margin-bottom: 2rem;
}

.umdu-strip__head {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
}

.umdu-strip__head .umdu-section-title {
	margin-bottom: 0.5rem;
}

.umdu-strip__all {
	flex: none;
	font-weight: 800;
	text-decoration: none !important;
	white-space: nowrap;
}

/* One line, always: pills on the left fill in, the countdown keeps the
   right, and nothing wraps. */
.umdu-progress {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.45rem;
	align-items: center;
	height: 1.9rem;
	margin: 0 0 0.9rem;
	overflow: hidden;
	font-size: 0.8rem;
	font-weight: 800;
	white-space: nowrap;
}

.umdu-pill {
	flex: none;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--umdu-accent) 12%, #fff);
	color: var(--umdu-accent);
	line-height: 1.2;
}

.umdu-pill:empty {
	display: none;
}

.umdu-progress__streak {
	background: #fff0e3;
	color: #b4470b;
}

.umdu-progress__short {
	display: none;
}

.umdu-progress__next {
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
	color: var(--umdu-muted);
	font-weight: 700;
	text-overflow: ellipsis;
}

/* The time keeps one width, so its line never moves as it ticks. */
.umdu-progress__time {
	display: inline-block;
	min-width: 8ch;
	font-variant-numeric: tabular-nums;
	text-align: left;
}

@media (max-width: 480px) {
	.umdu-progress__short {
		display: inline;
	}

	.umdu-progress__long {
		display: none;
	}
}

.umdu-todays__share {
	margin: 1rem 0 0;
	text-align: center;
}

/* What a share says goes on its own line, kept from the start. */
.umdu-todays__share [role="status"] {
	display: block;
	min-height: 1.4em;
	margin-top: 0.35rem;
	color: var(--umdu-muted);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.4;
}

.umdu-todays__share [disabled] {
	opacity: 0.55;
	cursor: default;
}

/* Tiles: art-forward cards, two across on phones and tablets; on desktop
   up to four, as many as there are games. */
.umdu-todays__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 900px) {
	.umdu-todays__tiles {
		gap: 1rem;
	}

	.umdu-todays__tiles:has(> :nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.umdu-todays__tiles:has(> :nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.umdu-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--umdu-border);
	border-radius: var(--umdu-card-radius);
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
	color: var(--umdu-text) !important;
	text-decoration: none !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
	.umdu-tile:hover {
		border-color: color-mix(in srgb, var(--umdu-accent) 45%, transparent);
		box-shadow: var(--umdu-lift-shadow);
		transform: translateY(-3px);
	}

	.umdu-tile:hover .umdu-tile__art img {
		transform: scale(1.05);
	}
}

.umdu-tile:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--umdu-accent) 50%, transparent);
	outline-offset: 2px;
}

.umdu-tile__art,
.umdu-gamecard__art {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--umdu-accent);
}

.umdu-tile__art {
	aspect-ratio: 16 / 10;
}

.umdu-gamecard__art {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
}

/* Out of the line box, so no gap under the image shows the colour behind. */
.umdu-tile__art img,
.umdu-gamecard__art img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.umdu-tile__art[data-glyph]::after,
.umdu-gamecard__art[data-glyph]::after {
	content: attr(data-glyph);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 2rem;
	font-weight: 900;
}

.umdu-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.75rem 0.9rem 0.9rem;
}

.umdu-tile__name {
	overflow: hidden;
	font-size: 1.05rem;
	font-weight: 900;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-tile__hook {
	display: -webkit-box;
	min-height: 2.7em;
	margin-bottom: 0.55rem;
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.85rem;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* The status pill: filled in after load, one line, never wider than the tile. */
.umdu-tile__status {
	align-self: flex-start;
	display: inline-block;
	max-width: 100%;
	height: 1.9rem;
	margin-top: auto;
	padding: 0 0.8rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--umdu-accent);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.9rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-tile__status.is-done {
	background: #e2f1e7;
	color: var(--umdu-done);
}

.umdu-tile__status.is-continue {
	background: color-mix(in srgb, var(--umdu-accent) 14%, #fff);
	color: var(--umdu-accent);
}

.umdu-tile__status.is-off {
	background: #f0f0f0;
	color: var(--umdu-muted);
}

/* Chips: the strip above articles, one compact row. A scroller on phones,
   a grid wider up. */
.umdu-todays--chips .umdu-todays__tiles {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.umdu-todays--chips .umdu-todays__tiles::-webkit-scrollbar {
	display: none;
}

.umdu-todays--chips .umdu-tile {
	flex: none;
	flex-direction: row;
	gap: 0.65rem;
	align-items: center;
	width: 210px;
	padding: 0.45rem 0.7rem 0.45rem 0.45rem;
	border-radius: 14px;
	scroll-snap-align: start;
}

.umdu-todays--chips .umdu-tile__art {
	flex: none;
	width: 52px;
	aspect-ratio: 1;
	border-radius: 10px;
}

.umdu-todays--chips .umdu-tile__body {
	gap: 0.3rem;
	padding: 0;
}

.umdu-todays--chips .umdu-tile__name {
	font-size: 0.95rem;
}

.umdu-todays--chips .umdu-tile__hook {
	display: none;
}

.umdu-todays--chips .umdu-tile__status {
	height: 1.55rem;
	margin-top: 0;
	padding: 0 0.6rem;
	font-size: 0.72rem;
	line-height: 1.55rem;
}

/* A chip wide enough: the hook under the name, the pill at the end. */
.umdu-todays--chips .umdu-tile {
	container-type: inline-size;
}

@container (min-width: 300px) {
	.umdu-todays--chips .umdu-tile__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.1rem 0.75rem;
		align-items: center;
	}

	.umdu-todays--chips .umdu-tile__hook {
		display: block;
		grid-column: 1;
		min-height: 0;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.umdu-todays--chips .umdu-tile__status {
		grid-row: 1 / span 2;
		grid-column: 2;
		height: 2rem;
		padding: 0 0.85rem;
		font-size: 0.8rem;
		line-height: 2rem;
	}
}

@media (min-width: 700px) {
	.umdu-todays--chips .umdu-todays__tiles {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		overflow: visible;
	}

	.umdu-todays--chips .umdu-tile {
		width: auto;
	}
}

.umdu-todays--feature .umdu-todays__tiles {
	grid-template-columns: 1fr;
}

.umdu-todays--feature .umdu-tile:not(.umdu-tile--feature) {
	flex-direction: row;
	align-items: center;
}

.umdu-todays--feature .umdu-tile:not(.umdu-tile--feature) .umdu-tile__art {
	flex: none;
	width: 96px;
	aspect-ratio: 1;
}

.umdu-todays__empty {
	padding: 1rem;
	border: 2px dashed var(--umdu-border);
	border-radius: 12px;
	text-align: center;
}

/* The in-article card */
.umdu-gamecard {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	margin: 1.5rem 0;
	padding: 0.9rem;
	border: 1px solid var(--umdu-border);
	border-radius: var(--umdu-card-radius);
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
}

.umdu-gamecard__body p {
	margin: 0 0 0.3rem;
}

.umdu-gamecard__eyebrow {
	overflow: hidden;
	color: var(--umdu-accent);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.umdu-gamecard__name {
	font-size: 1.2rem;
	font-weight: 900;
}

.umdu-gamecard__proof {
	min-height: 1.4em;
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.9rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.umdu-gamecard {
		grid-template-columns: 84px minmax(0, 1fr);
	}
}

/* Past games: a pill per day in even columns, each keeping room for its tick. */
.umdu-past-list__days {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr));
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.umdu-past-list__day {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	min-width: 0;
	padding: 0.35rem 0.4rem 0.35rem 0.8rem;
	border: 1px solid var(--umdu-border);
	border-radius: 999px;
	background: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

.umdu-past-list__day a {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--umdu-text) !important;
	text-decoration: none !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-past-list__day:hover {
	border-color: var(--umdu-accent);
}

.umdu-past-list__done {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	box-sizing: border-box;
	border: 1.5px solid rgba(17, 24, 39, 0.14);
	border-radius: 50%;
	color: transparent;
	font-size: 0.7rem;
	font-weight: 900;
}

.umdu-past-list__day.is-played .umdu-past-list__done {
	border-color: transparent;
	background: var(--umdu-done);
	color: #fff;
}

.umdu-from-past__day ul {
	margin: 0.25rem 0 0.75rem;
}

/* The results screen and profile, inside play mode */
.umdu-results,
.umdu-profile {
	max-width: 640px;
	margin: 0 auto;
	padding-bottom: 2rem;
}

.umdu-results__hero {
	margin: 0.75rem 0 1.25rem;
	padding: 1.25rem 1.25rem 1rem;
	border: 2px solid var(--umdu-border);
	border-radius: 14px;
	background: #fff;
	text-align: center;
}

.umdu-results__heading {
	margin: 0 0 0.25rem;
	font-size: 1.35rem;
	font-weight: 900;
	line-height: 1.2;
}

.umdu-results__heading:focus,
.umdu-results__heading:focus-visible {
	/* Focus moves here so the result is announced; it is not a control. */
	outline: none;
	box-shadow: none;
}

.umdu-results__score {
	margin: 0 0 0.5rem;
	color: var(--umdu-muted);
	font-size: 1.25rem;
}

/* The score counts up in a box as wide as its final digits (set inline in
   ch), so nothing beside it moves. */
.umdu-results__score strong {
	display: inline-block;
	color: var(--umdu-accent);
	font-size: 3.5rem;
	font-weight: 900;
	line-height: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.umdu-results__score strong.is-landed {
	animation: umdu-land 0.45s ease-out;
}

@keyframes umdu-land {
	40% {
		transform: scale(1.18);
	}
}

.umdu-results__cheers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin: 0.35rem 0 0.5rem;
}

.umdu-cheer {
	padding: 0.25rem 0.75rem;
	border: 1px solid #f0d98c;
	border-radius: 999px;
	background: linear-gradient(135deg, #fffaea, #fdf0c6);
	color: #6b4f00;
	font-size: 0.88rem;
	font-weight: 800;
}

/* Over play mode, taking no taps; drawn and gone in 1.5 s. */
.umdu-confetti {
	position: fixed;
	z-index: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.umdu-flame {
	display: inline-block;
}

.umdu-flame.is-up {
	animation: umdu-flame 0.9s ease-out 0.5s both;
}

@keyframes umdu-flame {
	30% {
		transform: translateY(-3px) scale(1.8) rotate(-10deg);
	}

	55% {
		transform: scale(0.9) rotate(6deg);
	}

	75% {
		transform: scale(1.15);
	}
}

.umdu-results__note {
	margin: 0.25rem 0;
	color: var(--umdu-muted);
}

.umdu-results__summary {
	margin: 0.75rem 0;
	text-align: left;
}

.umdu-results__share {
	margin: 0.75rem 0 0;
}

.umdu-results .umdu-results__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0;
}

.umdu-results__buttons [disabled] {
	opacity: 0.6;
	cursor: default;
}

/* What a share says goes on its own line, kept from the start. */
.umdu-results .umdu-results__status {
	min-height: 1.4em;
	margin: 0.35rem 0 0;
	color: var(--umdu-muted);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.umdu-results__practice {
	margin: 0.5rem 0 0;
}

.umdu-results__progress,
.umdu-results__board,
.umdu-results__missed {
	margin: 1rem 0;
}

.umdu-results__progress:not(:empty) {
	padding: 1rem;
	border-radius: 14px;
	background: color-mix(in srgb, var(--umdu-accent) 8%, #fff);
}

.umdu-results__progress p {
	margin: 0 0 0.5rem;
}

.umdu-results__tally {
	font-weight: 800;
}

.umdu-results__slate {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.umdu-results__slate li {
	padding: 0.25rem 0.65rem;
	border: 1px solid var(--umdu-border);
	border-radius: 999px;
	background: #fff;
	font-size: 0.9rem;
	font-weight: 700;
}

.umdu-results__slate li.is-done {
	border-color: transparent;
	background: var(--umdu-accent);
	color: #fff;
}

.umdu-results__progress [data-umdu-next] {
	display: block;
	text-align: center;
}

.umdu-results__subhead {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.1rem;
	font-weight: 900;
}

.umdu-results .umdu-results__answers {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.umdu-results__answers .umdu-answer {
	margin: 0;
	padding: 0.8rem 0.9rem;
	border: 2px solid var(--umdu-border);
	border-radius: 12px;
	background: #fff;
}

.umdu-results__answers .umdu-answer.is-right {
	border-color: color-mix(in srgb, #20844d 45%, var(--umdu-border));
}

.umdu-results__answers .umdu-answer.is-wrong {
	border-color: color-mix(in srgb, #9a2e2e 45%, var(--umdu-border));
}

.umdu-results__answers .umdu-answer p {
	margin: 0 0 0.2rem;
}

.umdu-answer__prompt {
	font-weight: 800;
}

/* The stories behind the game: the source articles as cards, the first
   three shown and the rest folded away. */
.umdu-stories {
	margin: 1.5rem 0 0;
}

.umdu-results .umdu-stories__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.umdu-results .umdu-stories__list li {
	margin: 0;
}

.umdu-story {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	min-height: 96px;
	padding: 0.55rem;
	border: 1px solid var(--umdu-border);
	border-radius: var(--umdu-card-radius);
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
	color: var(--umdu-text) !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.umdu-story:hover,
.umdu-story:focus-visible {
	border-color: color-mix(in srgb, var(--umdu-accent) 45%, transparent);
	box-shadow: var(--umdu-lift-shadow);
	color: var(--umdu-text) !important;
}

.umdu-story__img {
	position: relative;
	flex: none;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--umdu-accent) 75%, #fff), var(--umdu-accent));
}

/* The title's initial, under the thumbnail or in place of one. */
.umdu-story__img::before {
	content: attr(data-glyph);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, 0.92);
	font-size: 2rem;
	font-weight: 900;
}

.umdu-story__img img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.umdu-story__body {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.umdu-story__title {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 800;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.umdu-story__read {
	color: var(--umdu-accent);
	font-size: 0.9rem;
	font-weight: 800;
}

.umdu-stories__more {
	margin: 0.4rem 0 0;
}

.umdu-stories__more > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--umdu-accent);
	font-weight: 800;
	list-style: none;
	cursor: pointer;
}

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

.umdu-stories__more > summary::after {
	content: "\2193";
	margin-left: 0.4rem;
}

.umdu-stories__more[open] > summary::after {
	content: "\2191";
}

.umdu-name-form h3 {
	margin: 0 0 0.5rem;
}

.umdu-name-form__field span,
.umdu-profile label span {
	display: block;
	font-weight: 700;
}

.umdu-name-form input[type="text"],
.umdu-profile input[type="email"],
.umdu-profile input[type="text"] {
	width: 100%;
	max-width: 20rem;
	min-height: 44px;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--umdu-border);
	border-radius: 8px;
	font: inherit;
}

.umdu-name-form__names label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	min-height: 44px;
}

.umdu-name-form__error {
	min-height: 1.2em;
	line-height: 1.2;
	color: #a12622;
}

.umdu-avatars {
	display: grid;
	grid-template-columns: repeat(6, 48px);
	gap: 0.4rem;
	margin: 0.75rem 0;
	padding: 0;
	border: 0;
}

.umdu-avatars legend {
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.umdu-avatars__item {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
}

.umdu-avatars__item input {
	position: absolute;
	opacity: 0;
}

.umdu-avatars__item input:checked + img {
	outline: 3px solid var(--umdu-accent);
	outline-offset: 2px;
}

.umdu-avatars__item input:focus-visible + img {
	outline: 3px dashed var(--umdu-accent);
	outline-offset: 2px;
}

.umdu-avatars__item img {
	border-radius: 50%;
}

/* The profile: the reader's stats and badges first, every box drawn at its
   final size before its data comes; their own controls under them. */
.umdu-profile {
	max-width: 720px;
}

.umdu-play--panel .umdu-play__stage {
	scrollbar-gutter: stable;
}

.umdu-profile__head p,
.umdu-cal p,
.umdu-gstat p,
.umdu-gstats,
.umdu-badges,
.umdu-stats__tiles li,
.umdu-gstats li,
.umdu-badges li {
	margin: 0;
}

.umdu-stats__tiles,
.umdu-gstats,
.umdu-badges {
	padding: 0;
	list-style: none;
}

/* Room for the avatar's ring, which the stage would clip at its edge. */
.umdu-profile__head {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 0.9rem;
	align-items: center;
	margin: 0.4rem 0 1rem;
	padding-left: 4px;
}

.umdu-profile__avatar {
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--umdu-ghost);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--umdu-accent) 40%, transparent);
}

.umdu-profile__avatar img {
	display: block;
	width: 100%;
	height: 100%;
}

.umdu-profile__who,
.umdu-profile__kind {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-profile__who {
	height: 1.25em;
	margin: 0;
	font-size: 1.4rem;
	font-weight: 900;
	line-height: 1.25;
}

.umdu-profile .umdu-profile__kind {
	height: 1.4em;
	margin-top: 0.15rem;
	color: var(--umdu-muted);
	font-size: 0.88rem;
	line-height: 1.4;
}

/* Their places until GET me answers. */
.umdu-profile__who:empty::before,
.umdu-profile__kind:empty::before {
	content: "";
	display: inline-block;
	width: 9em;
	height: 0.7em;
	border-radius: 999px;
	background: var(--umdu-ghost);
}

.umdu-profile__kind:empty::before {
	width: 15em;
}

.umdu-stats__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.umdu-stat {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--umdu-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
}

.umdu-stat__value {
	display: block;
	overflow: hidden;
	font-size: 1.85rem;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	line-height: 1.15;
	white-space: nowrap;
}

.umdu-stat__label {
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The streak's own tile: warm, with the flame, grey while it is at 0. */
.umdu-stat--streak {
	border-color: #f6c99f;
	background: linear-gradient(135deg, #fff6ec, #ffe2c4);
}

.umdu-stat--streak .umdu-stat__value {
	color: #b4470b;
}

.umdu-stat--streak .umdu-stat__value::before {
	content: "🔥";
	display: inline-block;
	margin-right: 0.2em;
	font-size: 0.8em;
}

.umdu-stat--streak.is-cold .umdu-stat__value::before {
	filter: grayscale(1);
	opacity: 0.45;
}

.umdu-stats__box {
	margin-bottom: 1.25rem;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--umdu-border);
	border-radius: var(--umdu-card-radius);
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
}

.umdu-stats__section {
	margin-bottom: 1.25rem;
}

.umdu-stats__title {
	margin: 0 0 0.7rem;
	font-size: 1.05rem;
	font-weight: 900;
	line-height: 1.3;
}

.umdu-stats__title small {
	margin-left: 0.4em;
	color: var(--umdu-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

/* The calendar: twelve weeks as columns, a square a day, GitHub-style. The
   graph keeps one width whatever fills it; the summary and legend sit
   beside it on desktop and under it on a phone. */
.umdu-cal__body {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.5rem;
	align-items: flex-end;
}

.umdu-cal__graph {
	flex: 0 1 22rem;
	min-width: 0;
}

.umdu-cal__aside {
	flex: 1 1 12rem;
	min-width: 0;
}

.umdu-cal__months,
.umdu-cal__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 4px;
}

.umdu-cal__months {
	height: 1.2rem;
	margin-bottom: 0.15rem;
	color: var(--umdu-muted);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.2rem;
	white-space: nowrap;
}

.umdu-cal__grid {
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
}

.umdu-cal__day {
	display: block;
	aspect-ratio: 1;
	border-radius: 4px;
	background: var(--umdu-ghost);
}

.umdu-cal__day[data-level="1"] {
	background: color-mix(in srgb, var(--umdu-accent) 35%, #fff);
}

.umdu-cal__day[data-level="2"] {
	background: color-mix(in srgb, var(--umdu-accent) 58%, #fff);
}

.umdu-cal__day[data-level="3"] {
	background: color-mix(in srgb, var(--umdu-accent) 80%, #fff);
}

.umdu-cal__day[data-level="4"] {
	background: var(--umdu-accent);
}

.umdu-cal__day.is-today {
	outline: 2px solid var(--umdu-text);
	outline-offset: 1px;
}

.umdu-cal__day.is-future {
	visibility: hidden;
}

.umdu-cal__summary {
	height: 2.8em;
	overflow: hidden;
	font-weight: 800;
	line-height: 1.4;
}

.umdu-cal__legend {
	display: flex;
	gap: 3px;
	align-items: center;
	color: var(--umdu-muted);
	font-size: 0.75rem;
}

.umdu-cal__legend .umdu-cal__day {
	width: 11px;
	height: 11px;
	margin: 0 1px;
	border-radius: 3px;
}

/* A card a game: three numbers, the spread of scores in fifths (the last
   score's fifth darker) and the last score. Bars grow by transform. */
.umdu-gstats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

.umdu-gstat {
	display: grid;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.8rem 0.85rem 0.75rem;
	border: 1px solid var(--umdu-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
}

.umdu-gstat__name,
.umdu-gstat__last {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-gstat__name {
	font-weight: 900;
	line-height: 1.3;
}

.umdu-gstat__nums {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.3rem;
}

.umdu-gstat__nums span {
	display: grid;
	min-width: 0;
}

.umdu-gstat__nums b {
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	line-height: 1.2;
}

.umdu-gstat.is-empty .umdu-gstat__nums b {
	color: var(--umdu-muted);
}

.umdu-gstat__nums small {
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.7rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-gstat__bars,
.umdu-gstat__axis {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
}

.umdu-gstat__bars {
	height: 44px;
}

.umdu-gstat__bar {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 5px 5px 2px 2px;
	background: var(--umdu-ghost);
}

.umdu-gstat__bar i {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--umdu-accent) 50%, #fff);
	transform: scaleY(var(--umdu-fill, 0));
	transform-origin: bottom;
	animation: umdu-rise 0.6s ease-out both;
}

.umdu-gstat__bar.is-last i {
	background: var(--umdu-accent);
}

.umdu-gstat__axis {
	margin-top: -0.3rem;
	color: var(--umdu-muted);
	font-size: 0.62rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.umdu-gstat__last {
	height: 1.4em;
	color: var(--umdu-muted);
	font-size: 0.8rem;
	line-height: 1.4;
}

/* Badges: a trophy case of one tile size. Earned ones in gold with their
   date, locked ones grey with how far along they are. */
.umdu-badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

.umdu-badge {
	display: grid;
	gap: 0.3rem;
	justify-items: center;
	min-width: 0;
	padding: 0.85rem 0.6rem 0.7rem;
	border: 1px solid var(--umdu-border);
	border-radius: 14px;
	background: #fff;
	text-align: center;
}

.umdu-badge__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--umdu-ghost);
	font-size: 1.5rem;
	line-height: 1;
	filter: grayscale(1);
	opacity: 0.45;
}

.umdu-badge__name {
	max-width: 100%;
	height: 1.3em;
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.9rem;
	font-weight: 900;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-badge__desc {
	display: -webkit-box;
	height: 3.9em;
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.75rem;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.umdu-badge__state {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 1.4rem;
	color: var(--umdu-muted);
	font-size: 0.75rem;
	font-weight: 800;
}

.umdu-badge__bar {
	position: relative;
	flex: 1;
	max-width: 4.5rem;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--umdu-ghost);
}

.umdu-badge__bar i {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--umdu-accent);
	transform: scaleX(var(--umdu-fill, 0));
	transform-origin: left;
	animation: umdu-fill 0.6s ease-out both;
}

.umdu-badge__count {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.umdu-badge__done {
	overflow: hidden;
	color: var(--umdu-done);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-badge.is-earned {
	border-color: #f0d98c;
	background: linear-gradient(160deg, #fffdf6, #fff3d3);
	box-shadow: var(--umdu-card-shadow);
}

.umdu-badge.is-earned .umdu-badge__icon {
	background: linear-gradient(135deg, #f8dc6b, var(--umdu-gold));
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ecc955;
	filter: none;
	opacity: 1;
	animation: umdu-pop 0.5s ease-out both;
}

.umdu-badge.is-earned .umdu-badge__name {
	color: var(--umdu-text);
}

/* Until the stats come, the numbers pulse. */
.umdu-stats.is-loading .umdu-stat__value,
.umdu-stats.is-loading .umdu-gstat__nums b,
.umdu-stats.is-loading .umdu-badge__count,
.umdu-stats.is-loading .umdu-cal__grid .umdu-cal__day {
	animation: umdu-shimmer 1.4s ease-in-out infinite;
}

@media (min-width: 600px) {
	.umdu-stats__tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.umdu-gstats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.umdu-badges {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@keyframes umdu-rise {
	from {
		transform: scaleY(0);
	}
}

@keyframes umdu-fill {
	from {
		transform: scaleX(0);
	}
}

@keyframes umdu-pop {
	0% {
		transform: scale(0.6);
	}

	70% {
		transform: scale(1.12);
	}
}

.umdu-profile__more {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--umdu-border);
}

.umdu-profile__sign-in,
.umdu-profile__delete,
.umdu-profile__out {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--umdu-border);
}

@media (prefers-reduced-motion: reduce) {
	.umdu-game *,
	.umdu-play * {
		transition: none !important;
		animation: none !important;
	}
}

/* Yesterday's champion: one gold card everywhere its slot appears, of one
   fixed height, drawn as a skeleton before the data. */
.umdu-champion {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 0.8rem;
	align-items: center;
	height: 5.25rem;
	margin: 0.9rem 0 0;
	padding: 0.55rem 0.8rem;
	overflow: hidden;
	border: 1px solid #f0d98c;
	border-radius: 14px;
	background: linear-gradient(135deg, #fffaea, #fdf0c6);
}

.umdu-champion__avatar {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f8dc6b, var(--umdu-gold));
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ecc955;
}

.umdu-champion__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* The crown: over the avatar, or the whole avatar when there is no champion. */
.umdu-champion__avatar::after {
	content: "";
	position: absolute;
	top: -13px;
	left: 50%;
	width: 22px;
	height: 18px;
	background: var(--umdu-gold);
	transform: translateX(-50%) rotate(-10deg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 6l5.5 4.5L12 2l4.5 8.5L22 6l-2.2 11H4.2z'/%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 24 20'%3E%3Cpath d='M2 6l5.5 4.5L12 2l4.5 8.5L22 6l-2.2 11H4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.umdu-champion.is-none .umdu-champion__avatar,
.umdu-champion.is-loading .umdu-champion__avatar {
	background: #fff;
}

.umdu-champion.is-none .umdu-champion__avatar::after {
	top: 50%;
	width: 26px;
	height: 22px;
	transform: translate(-50%, -50%);
}

.umdu-champion.is-loading .umdu-champion__avatar::after {
	opacity: 0.35;
}

.umdu-champion__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.umdu-champion__title {
	overflow: hidden;
	color: #8a6400;
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The whole card links the Hall of Fame, with a chevron at its edge. */
.umdu-champion__hall {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.umdu-champion[data-umdu-champion-hall] {
	padding-right: 2rem;
	transition: box-shadow 0.18s ease;
}

.umdu-champion:has(.umdu-champion__hall):hover {
	box-shadow: 0 6px 18px rgba(138, 100, 0, 0.18);
}

.umdu-champion__hall::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.9rem;
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid #8a6400;
	border-right: 2px solid #8a6400;
	transform: translateY(-50%) rotate(45deg);
}

.umdu-champion__hall:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--umdu-accent) 50%, transparent);
	outline-offset: 2px;
}

.umdu-champion__who {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	justify-content: space-between;
	min-height: 1.35em;
	font-size: 1.05rem;
	font-weight: 900;
	line-height: 1.35;
	white-space: nowrap;
}

.umdu-champion__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.umdu-champion__score {
	flex: none;
	color: #8a6400;
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.umdu-champion__score b {
	color: var(--umdu-text);
	font-size: 1.05rem;
	font-weight: 900;
}

.umdu-champion__meta {
	min-height: 1.3em;
	overflow: hidden;
	color: var(--umdu-muted);
	font-size: 0.8rem;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-champion.is-none .umdu-champion__who {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.umdu-champion.is-loading .umdu-champion__who::before,
.umdu-champion.is-loading .umdu-champion__meta::before {
	content: "";
	display: block;
	width: 55%;
	height: 0.75em;
	margin-top: 0.3em;
	border-radius: 999px;
	background: rgba(138, 100, 0, 0.14);
	animation: umdu-shimmer 1.4s ease-in-out infinite;
}

.umdu-champion.is-loading .umdu-champion__meta::before {
	width: 78%;
}

/* The Hall of Fame: five all-time lists, kept out of snippets. */
.umdu-hall {
	margin: 1.5rem 0;
}

.umdu-hall__list {
	margin: 1.5rem 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--umdu-border);
	border-radius: var(--umdu-card-radius);
	background: #fff;
	box-shadow: var(--umdu-card-shadow);
}

.umdu-hall__note,
.umdu-hall__message {
	min-height: 1.4em;
	margin: 0.25rem 0 0.5rem;
	color: var(--umdu-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.umdu-hall__note:empty {
	display: none;
}

.umdu-hall__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.umdu-hall__row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(26px, max-content) 28px minmax(6em, 1fr) auto;
	gap: 0.6rem;
	align-items: center;
	min-height: 44px;
	border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.umdu-hall__row:last-child {
	border-bottom: 0;
}

.umdu-hall__row:has(.umdu-hall__date) {
	grid-template-columns: 6.5em 28px minmax(6em, 1fr) auto;
}

.umdu-hall__date {
	color: var(--umdu-muted);
	font-size: 0.85rem;
	font-weight: 800;
}

.umdu-hall__rank {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	border-radius: 999px;
	color: var(--umdu-muted);
	font-size: 0.8rem;
	font-weight: 900;
}

.umdu-hall__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.2);
}

.umdu-hall__name {
	min-width: 0;
	overflow: hidden;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-hall__value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

/* A guest's own figures: room for two lines, so filling them moves nothing. */
.umdu-hall__me {
	min-height: 3em;
	margin-top: 1.5rem;
	color: var(--umdu-muted);
	line-height: 1.5;
}

/* The hub's daily-total board: a column per slate game, or on the week per
   day, on desktop only. Its heading row is in the page from the start, so
   it takes its height before the names fill it. Every track is sized in
   rem and none by its content, so the headings, in a smaller type, line up
   with the places under them. */
.umdu-board__game,
.umdu-board__cols {
	display: none;
}

@media (min-width: 782px) {
	.umdu-board--full .umdu-board__rows.has-columns > .umdu-board__row,
	.umdu-board--full .umdu-board__rows.has-columns > .umdu-board__cols {
		grid-template-columns: minmax(26px, max-content) 28px minmax(6.5rem, 1fr) repeat(var(--umdu-games, 1), minmax(2.25rem, 3.75rem)) 3.25rem 28px;
	}

	/* The columns already say which games or days were played. */
	.umdu-board--full .umdu-board__rows.has-columns .umdu-board__name small {
		display: none;
	}

	.umdu-board--full .umdu-board__cols {
		box-sizing: border-box;
		display: grid;
		gap: 0.6rem;
		align-items: end;
		height: 28px;
		padding: 0 0.35rem 0.25rem;
		color: var(--umdu-muted);
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.umdu-board--full .umdu-board__game {
		display: block;
		overflow: hidden;
		color: var(--umdu-muted);
		font-size: 0.85rem;
		font-variant-numeric: tabular-nums;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.umdu-board--full .umdu-board__cols .umdu-board__game {
		font-size: 0.72rem;
		letter-spacing: 0;
		text-transform: none;
	}

	/* The week: a narrower column per day, today's heading in the accent. */
	.umdu-board--full .umdu-board__rows.has-columns.is-week > .umdu-board__row,
	.umdu-board--full .umdu-board__rows.has-columns.is-week > .umdu-board__cols {
		grid-template-columns: minmax(26px, max-content) 28px minmax(4.5rem, 1fr) repeat(var(--umdu-games, 7), 2.25rem) 3.25rem 28px;
	}

	.umdu-board--full .umdu-board__cols .umdu-board__game.is-today {
		color: var(--umdu-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.umdu-tile,
	.umdu-tile *,
	.umdu-board *,
	.umdu-board *::before,
	.umdu-champion *,
	.umdu-champion *::before {
		transition: none !important;
		animation: none !important;
	}
}

/* A game page's own sections after the game: the FAQ, From past games,
   the latest articles and More games, in the theme's headings. */
.umdu-from-past,
.umdu-related,
.umdu-more-games {
	margin-top: 2.5rem;
}

.umdu-game-page .wp-block-details,
.umdu-games-hub .wp-block-details {
	margin: 0 0 0.5rem;
	border: 2px solid var(--umdu-border);
	border-radius: 10px;
	background: #fff;
}

.umdu-game-page .wp-block-details > summary,
.umdu-games-hub .wp-block-details > summary {
	position: relative;
	padding: 0.8rem 2.75rem 0.8rem 1rem;
	font-weight: 800;
	list-style: none;
	cursor: pointer;
}

.umdu-game-page .wp-block-details > summary::-webkit-details-marker,
.umdu-games-hub .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.umdu-game-page .wp-block-details > summary::after,
.umdu-games-hub .wp-block-details > summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1rem;
	color: var(--umdu-accent);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
}

.umdu-game-page .wp-block-details[open] > summary::after,
.umdu-games-hub .wp-block-details[open] > summary::after {
	content: "\2212";
}

.umdu-game-page .wp-block-details > :not(summary),
.umdu-games-hub .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 1rem 0.9rem;
}

/* Specific enough to beat the theme's indent on lists in article content. */
.umdu-related ul.umdu-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 600px) {
	.umdu-related ul.umdu-related__grid {
		grid-template-columns: 1fr;
	}
}

.umdu-read {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	height: 100%;
	padding: 0.5rem;
	border: 2px solid var(--umdu-border);
	border-radius: 10px;
	background: #fff;
	color: var(--umdu-text) !important;
	text-decoration: none !important;
}

.umdu-read:hover,
.umdu-read:focus-visible {
	border-color: var(--umdu-accent);
}

.umdu-read__img {
	flex: none;
	width: 88px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--umdu-border);
}

.umdu-read__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.umdu-read__title {
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.3;
}

.umdu-more-games__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: baseline;
	justify-content: space-between;
}

.umdu-more-games__all {
	font-weight: 700;
}

/* The hub's eyebrow: its text keeps the left and truncates, "How it works"
   keeps the right, its 44 px target overlapping the lines around it so the
   eyebrow stays one short line. */
.umdu-eyebrow--hub {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	overflow: visible;
}

.umdu-eyebrow__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umdu-how {
	display: inline-flex;
	flex: none;
	gap: 0.4rem;
	align-items: center;
	min-height: 44px;
	margin: -13px 0 -13px auto;
	padding: 0 0.15rem;
	border: 0;
	background: none;
	color: var(--umdu-accent);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	touch-action: manipulation;
}

/* Themes restyle every button:hover and :focus (GeneratePress: white on dark grey); a button here keeps its own colours. */
.umdu-how:hover,
.umdu-how:focus {
	background: none;
	color: var(--umdu-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.umdu-how__icon {
	display: inline-grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--umdu-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 900;
}

/* The welcome: a card fixed to the corner, a sheet along the bottom on
   phones. It sits over the page and never moves it. */
.umdu-welcome {
	position: fixed;
	z-index: 99990;
	right: 24px;
	bottom: 24px;
	box-sizing: border-box;
	width: 384px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 48px);
	max-height: calc(100svh - 48px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--umdu-border);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22), 0 4px 14px rgba(17, 24, 39, 0.1);
	color: var(--umdu-text);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	animation: umdu-welcome-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.12) both;
}

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

.umdu-welcome:focus {
	outline: none;
}

.umdu-welcome.is-leaving {
	animation: umdu-welcome-out 0.22s ease-in both;
}

/* The games' art, fanned out on the accent. */
.umdu-welcome__art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	padding-top: 4px;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.5px, transparent 2px) 0 0 / 16px 16px,
		linear-gradient(135deg, color-mix(in srgb, var(--umdu-accent) 78%, #fff), var(--umdu-accent) 70%);
}

.umdu-welcome__tile {
	position: relative;
	display: block;
	flex: none;
	width: 64px;
	height: 64px;
	margin: 0 -5px;
	overflow: hidden;
	border: 3px solid #fff;
	border-radius: 16px;
	background: color-mix(in srgb, var(--umdu-accent) 72%, #000);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
	transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
	animation: umdu-welcome-tile 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
	animation-delay: calc(0.15s + var(--n, 0) * 0.08s);
}

.umdu-welcome__tile:nth-child(1) {
	--r: -10deg;
	--y: 5px;
}

.umdu-welcome__tile:nth-child(2) {
	--r: -3deg;
	--y: -3px;
}

.umdu-welcome__tile:nth-child(3) {
	--r: 4deg;
	--y: -3px;
}

.umdu-welcome__tile:nth-child(4) {
	--r: 11deg;
	--y: 5px;
}

.umdu-welcome__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.umdu-welcome__tile[data-glyph]::after {
	content: attr(data-glyph);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 900;
}

.umdu-welcome__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	touch-action: manipulation;
}

/* Themes restyle every button:hover and :focus (GeneratePress: white on dark grey); a button here keeps its own colours. */
.umdu-welcome__close:hover,
.umdu-welcome__close:focus {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.umdu-welcome__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 1px;
}

.umdu-welcome__body {
	padding: 1.1rem 1.25rem 1.15rem;
}

.umdu-welcome__title {
	margin: 0 0 0.9rem;
	color: var(--umdu-text);
	font-size: 1.3rem;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.umdu-welcome__steps {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
}

.umdu-welcome__step {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
	margin: 0;
	animation: umdu-welcome-step 0.45s ease-out both;
	animation-delay: calc(0.35s + var(--n, 0) * 0.13s);
}

.umdu-welcome__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--umdu-accent) 11%, #fff);
	color: var(--umdu-accent);
}

.umdu-welcome__icon svg {
	display: block;
	overflow: visible;
}

.umdu-welcome__step--once .umdu-welcome__icon {
	background: #fdf3d3;
	color: #9a6f00;
}

.umdu-welcome__step--streak .umdu-welcome__icon {
	background: #fff0e3;
	color: #d4570f;
}

.umdu-welcome__text {
	color: var(--umdu-muted);
	font-size: 0.92rem;
	line-height: 1.4;
}

.umdu-welcome__text strong {
	display: block;
	margin-bottom: 0.05rem;
	color: var(--umdu-text);
	font-size: 1rem;
	font-weight: 800;
}

.umdu-welcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: center;
	margin: 0;
}

.umdu-welcome__actions .umdu-button {
	flex: 1 1 auto;
}

.umdu-welcome__later {
	font-weight: 800;
}

/* The icons come alive once: a twinkle, a wobble and a flicker. */
.umdu-welcome__spark,
.umdu-welcome__flame,
.umdu-welcome__step--once svg {
	transform-box: fill-box;
}

.umdu-welcome__spark {
	transform-origin: center;
	animation: umdu-welcome-twinkle 0.9s ease-in-out 0.9s 2;
}

.umdu-welcome__step--once svg {
	transform-origin: center bottom;
	animation: umdu-welcome-wobble 0.8s ease-in-out 1.05s;
}

.umdu-welcome__flame {
	transform-origin: center bottom;
	animation: umdu-welcome-flicker 0.7s ease-in-out 1.2s 3;
}

@media (max-width: 600px) {
	.umdu-welcome {
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		max-height: 88vh;
		max-height: 88svh;
		padding-bottom: env(safe-area-inset-bottom);
		border-width: 1px 0 0;
		border-radius: 22px 22px 0 0;
		animation-name: umdu-welcome-up;
	}

	.umdu-welcome.is-leaving {
		animation-name: umdu-welcome-down;
	}

	.umdu-welcome__art {
		height: 100px;
	}
}

@keyframes umdu-welcome-in {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.95);
	}
}

@keyframes umdu-welcome-out {
	to {
		opacity: 0;
		transform: translateY(18px) scale(0.97);
	}
}

@keyframes umdu-welcome-up {
	from {
		transform: translateY(100%);
	}
}

@keyframes umdu-welcome-down {
	to {
		transform: translateY(100%);
	}
}

@keyframes umdu-welcome-tile {
	from {
		opacity: 0;
		transform: translateY(36px) rotate(0) scale(0.4);
	}
}

@keyframes umdu-welcome-step {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@keyframes umdu-welcome-twinkle {
	50% {
		transform: scale(1.5) rotate(36deg);
	}
}

@keyframes umdu-welcome-wobble {
	25% {
		transform: rotate(-10deg);
	}

	75% {
		transform: rotate(8deg);
	}
}

@keyframes umdu-welcome-flicker {
	50% {
		transform: scale(0.9, 1.12) skewX(-4deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.umdu-welcome,
	.umdu-welcome * {
		transition: none !important;
		animation: none !important;
	}
}