/* Lunardraw: Games page and game detail pages ([ml_games], [ml_game]). */

.mlg {
	--t-accent: var(--ml-violet);
	--t-glow: var(--ml-violet-bright);
	--t-title: var(--ml-violet-bright);
	--t-rgb: 138, 92, 249;
	display: flex;
	flex-direction: column;
	gap: var(--ml-section);
	max-width: 1240px;
	margin-inline: auto;
}

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

.mlg p,
.mlg h1,
.mlg h2,
.mlg h3,
.mlg dl,
.mlg dd,
.mlg ol {
	margin: 0;
}

.mlg-tone-electric { --t-accent: #4a63ff; --t-glow: var(--ml-electric-glow); --t-title: #7fd3ff; --t-rgb: 74, 99, 255; }
.mlg-tone-violet { --t-accent: #a259ff; --t-glow: var(--ml-neon); --t-title: #e58bff; --t-rgb: 176, 92, 255; }
.mlg-tone-gold { --t-accent: var(--ml-gold); --t-glow: var(--ml-gold-glow); --t-title: #ffd24a; --t-rgb: 232, 184, 62; }

/* the city shows through, but text always sits on a dark scrim */
.ml-games-page .ml-page {
	padding-top: var(--ml-s6);
}

/* the Games pages' own backdrop: the city on a draw night, animated by games-fx.js */
body.ml-games-draw-night::before {
	background-image: url("../images/games-bg.webp?v=3");
	background-image: image-set(url("../images/games-bg.webp?v=3") 1x, url("../images/games-bg@2x.webp?v=3") 2x);
}

.mlg-fx {
	position: fixed;
	left: 0;
	top: var(--ml-backdrop-top, 0px);
	width: 100%;
	height: calc(100vh - var(--ml-backdrop-top, 0px));
	z-index: -1;
	pointer-events: none;
}

.ml-games-draw-night .mlg-hero {
	background: rgba(var(--ml-void-rgb), 0.62);
}

/* leave the side towers of the city backdrop in view, as in the design */
@media (min-width: 1100px) {
	.mlg {
		max-width: min(1240px, 76vw);
	}
}

.mlg-muted {
	color: var(--ml-muted);
	font-size: var(--wp--preset--font-size--label, 13px);
}

.mlg-small {
	font-size: var(--wp--preset--font-size--caption, 11px);
}

.mlg-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ml-s2);
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-gold);
}

/* .mlg-illus (the Illustrative tag) lives in style.css: the home page uses it too */

/* ------------------------------------------------------------------ hero sign */
.mlg-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ml-s3);
	padding: var(--ml-s6) var(--ml-s6) var(--ml-s4);
	margin-inline: auto;
	min-width: min(100%, 560px);
	background: rgba(var(--ml-void-rgb), 0.88);
	border: 2px solid #2a2f6b;
	border-radius: var(--ml-r-md);
	box-shadow: 0 0 0 4px rgba(var(--ml-panel-rgb), 0.9), inset 0 0 24px rgba(var(--ml-electric-rgb), 0.15);
	text-align: center;
}

.mlg-hero::before,
.mlg-hero::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	height: 40%;
	transform: translateY(-50%);
	border: 2px solid #2a2f6b;
	background: rgba(var(--ml-panel-rgb), 0.9);
}

.mlg-hero::before { left: -20px; border-right: 0; border-radius: var(--ml-r-sm) 0 0 var(--ml-r-sm); }
.mlg-hero::after { right: -20px; border-left: 0; border-radius: 0 var(--ml-r-sm) var(--ml-r-sm) 0; }

.mlg .mlg-sign {
	font-family: var(--ml-pixel);
	font-weight: 700;
	font-size: clamp(48px, 8vw, 88px);
	line-height: 0.95;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffd24a;
}

.mlg-sign-sub {
	font-size: clamp(14px, 1.8vw, 20px);
	color: #ffd24a;
	font-weight: 600;
}

/* principles, not tabs */
.mlg-principles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ml-s2) var(--ml-s6);
	list-style: none;
	margin: var(--ml-s2) 0 0;
	padding: var(--ml-s2) var(--ml-s4) 0;
	border-top: 1px solid var(--ml-line);
}

.mlg-principles li {
	display: inline-flex;
	align-items: center;
	gap: var(--ml-s2);
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-ink);
}

.mlg-principles li::before {
	font-family: var(--ml-pixel);
	font-size: 12px;
	color: var(--ml-violet-bright);
}

.mlg-principles .mlg-p-public::before { content: "◎"; color: var(--ml-cyan); }
.mlg-principles .mlg-p-private::before { content: "▣"; }
.mlg-principles .mlg-p-syndicate::before { content: "⁂"; color: var(--ml-neon); }

/* ------------------------------------------------------------------ game cards */
.mlg-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ml-s6);
}

.mlg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ml-s3);
	padding: 0 var(--ml-s4) var(--ml-s4);
	background: linear-gradient(180deg, rgba(var(--t-rgb), 0.08), rgba(var(--ml-panel-rgb), 0.96) 40%), rgba(var(--ml-panel-rgb), 0.96);
	border: 2px solid rgba(var(--t-rgb), 0.55);
	border-radius: var(--ml-r-md);
	box-shadow: 0 0 0 3px rgba(var(--ml-void-rgb), 0.9), inset 0 0 18px rgba(var(--t-rgb), 0.12);
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mlg-card:hover,
.mlg-card:focus-within {
	box-shadow: 0 0 0 3px rgba(var(--ml-void-rgb), 0.9), inset 0 0 18px rgba(var(--t-rgb), 0.18);
	transform: translateY(-2px);
}

.mlg .mlg-card-title {
	align-self: center;
	margin-top: -2px;
	padding: 10px var(--ml-s6) 8px;
	background: rgba(var(--ml-void-rgb), 0.95);
	border: 2px solid rgba(var(--t-rgb), 0.55);
	border-top: 0;
	border-radius: 0 0 var(--ml-r-sm) var(--ml-r-sm);
	font-family: var(--ml-pixel); /* a game's name is its logo: pixel face */
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1;
	color: var(--t-title);
}

.mlg-card-title a {
	color: inherit;
}

.mlg-art {
	overflow: hidden;
	border: 1px solid rgba(var(--t-rgb), 0.45);
	border-radius: var(--ml-r-sm);
	background: var(--ml-void);
	aspect-ratio: 357 / 256;
}

.mlg-art img,
.mlg-d-art img,
.mlg-together-art img,
.mlg-other img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mlg-format {
	font-size: var(--wp--preset--font-size--heading, 20px);
	color: var(--ml-ink);
}

.mlg-jp-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ml-s2);
}

.mlg-jackpot {
	display: inline-flex;
	align-items: flex-end;
	gap: 10px;
	height: 44px;
}

.mlg-led {
	display: inline-flex;
	height: 100%;
	font-family: var(--ml-pixel);
	font-size: 36px;
	line-height: 44px;
	color: #ffd24a;
}

.mlg-led:has(svg) {
	font-size: 0;
	color: transparent;
}

.mlg-led svg {
	height: 100%;
	width: auto;
	overflow: visible;
	filter: drop-shadow(0 0 3px rgba(255, 196, 64, 0.9)) drop-shadow(0 0 14px rgba(232, 150, 30, 0.5));
}

.mlg-vc {
	font-family: var(--ml-pixel);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: #ffd24a;
}

.mlg-facts {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--ml-line);
	border-bottom: 1px solid var(--ml-line);
}

.mlg-facts > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ml-s3);
	padding: 6px 2px;
}

.mlg-facts > div + div {
	border-top: 1px solid rgba(var(--ml-line-rgb), 0.6);
}

.mlg-facts dt {
	font-size: var(--wp--preset--font-size--caption, 11px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.mlg-facts dd {
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mlg-countdown {
	color: var(--ml-cyan);
	font-variant-numeric: tabular-nums;
}

/* .mlg-btn and .mlg-btn-ghost: the theme's one button set, in style.css (Buttons) */

.mlg-card .mlg-btn {
	margin-top: auto;
	width: 100%;
}

.mlg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s3);
}

/* ------------------------------------------------------------------ panels */
.mlg-panel {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s4);
	padding: var(--ml-pad);
	background: rgba(var(--ml-panel-rgb), 0.95);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.mlg .mlg-panel-title {
	font-weight: 600;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.1;
	color: var(--ml-ink);
}

.mlg-lower {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--ml-s6);
}

.mlg-together {
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.mlg-together-art {
	aspect-ratio: 422 / 122;
	border-bottom: 1px solid var(--ml-line);
}

.mlg-together-body {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s3);
	padding: var(--ml-s4) var(--ml-s6) var(--ml-s6);
}

.mlg-together-body .mlg-actions {
	margin-top: var(--ml-s2);
}

.mlg-together-body .mlg-btn {
	font-size: 14px;
	padding-inline: var(--ml-s4);
}

.mlg-privacy {
	justify-content: center;
}

.mlg-privacy-grid {
	display: flex;
	align-items: center;
	gap: var(--ml-s4);
}

.mlg-lock {
	flex: 0 0 72px;
	align-self: stretch;
	display: grid;
	place-items: center;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
	background: rgba(var(--ml-raised-rgb), 0.9);
}

.mlg-lock svg {
	width: 36px;
	height: auto;
}

.mlg-privacy-rows {
	flex: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
}

.mlg-privacy-rows > div {
	display: grid;
	grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: var(--ml-s3);
	padding: 10px var(--ml-s3);
}

.mlg-privacy-rows > div + div {
	border-top: 1px solid var(--ml-line);
}

.mlg-privacy-rows dt {
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-ink);
}

.mlg-privacy-rows dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--ml-s2);
}

.mlg-pill,
.mlg-fixed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--ml-r-xs);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 16px;
}

.mlg-pill-private {
	color: #e9e0ff;
	background: #4d2fb8;
	border: 1px solid var(--ml-violet-bright);
	box-shadow: none;
}

.mlg-pill-private::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

/* fixed fact, not a control */
.mlg-fixed {
	color: var(--ml-cyan);
	border: 1px dashed rgba(var(--ml-cyan-rgb), 0.5);
	background: transparent;
}

.mlg-fixed::before {
	content: "◎";
}

.mlg-note {
	font-size: var(--wp--preset--font-size--caption, 11px);
	color: var(--ml-muted);
}

.mlg-footnote {
	text-align: center;
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
	background: rgba(var(--ml-void-rgb), 0.8);
	padding: var(--ml-s2) var(--ml-s3);
	border-radius: var(--ml-r-xs);
	align-self: center;
}

/* ------------------------------------------------------------------ detail */
.mlg-crumbs {
	display: flex;
	gap: var(--ml-s2);
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-muted);
	background: rgba(var(--ml-void-rgb), 0.8);
	align-self: flex-start;
	padding: 4px var(--ml-s3);
	border-radius: var(--ml-r-xs);
}

.mlg-crumbs [aria-current] {
	color: var(--t-title);
}

.mlg-d-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--ml-s6);
	align-items: center;
	border-color: rgba(var(--t-rgb), 0.55);
	box-shadow: 0 0 0 3px rgba(var(--ml-void-rgb), 0.9), inset 0 0 18px rgba(var(--t-rgb), 0.12);
}

.mlg-d-art {
	overflow: hidden;
	aspect-ratio: 357 / 256;
	border: 1px solid rgba(var(--t-rgb), 0.5);
	border-radius: var(--ml-r-sm);
}

.mlg-d-main {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s4);
	align-items: flex-start;
}

.mlg .mlg-d-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	align-self: flex-start;
	font-size: clamp(30px, 4vw, 48px);
}

.mlg-d-blurb {
	color: var(--ml-ink);
	max-width: 46ch;
}

.mlg-d-main .mlg-jp-block {
	align-items: flex-start;
}

.mlg-d-main .mlg-label {
	justify-content: flex-start;
}

.mlg-d-main .mlg-jackpot {
	height: 56px;
}

.mlg-d-main .mlg-vc {
	font-size: 38px;
}

.mlg-facts-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
}

.mlg-facts-row > div {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 10px var(--ml-s3);
	border-top: 0 !important;
}

.mlg-facts-row > div:nth-child(n + 3) {
	border-top: 1px solid var(--ml-line) !important;
}

.mlg-facts-row > div:nth-child(2n) {
	border-left: 1px solid var(--ml-line);
}

.mlg-facts-row dd {
	text-align: left;
	font-size: var(--wp--preset--font-size--body, 14px);
}

.mlg-countdown-lg {
	font-size: 22px;
	letter-spacing: 0.04em;
}

.mlg-d-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--ml-s6);
	align-items: start;
}

.mlg-rules {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s3);
	padding-left: 0;
	list-style: none;
	counter-reset: rule;
}

.mlg-rules li {
	position: relative;
	padding-left: 36px;
	color: var(--ml-ink);
	counter-increment: rule;
}

.mlg-rules li::before {
	content: counter(rule, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -1px;
	width: 26px;
	height: 22px;
	display: grid;
	place-items: center;
	font-size: 12px;
	color: var(--t-title);
	border: 1px solid rgba(var(--t-rgb), 0.5);
	border-radius: var(--ml-r-xs);
	background: rgba(var(--t-rgb), 0.08);
}

.mlg-odds-big {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ml-s3);
	padding-top: var(--ml-s3);
	border-top: 1px solid var(--ml-line);
}

.mlg-odds-big span {
	font-size: var(--wp--preset--font-size--caption, 11px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.mlg-odds-big strong {
	font-weight: 400;
	font-size: 20px;
	color: var(--t-title);
	font-variant-numeric: tabular-nums;
}

.mlg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--label, 14px);
	font-variant-numeric: tabular-nums;
}

.mlg-table th {
	text-align: left;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
	padding: 0 var(--ml-s2) var(--ml-s2);
	border-bottom: 1px solid var(--ml-line);
}

.mlg-table td {
	padding: 12px var(--ml-s2);
	border-bottom: 1px solid var(--ml-line);
	color: var(--ml-ink);
	vertical-align: middle;
}

.mlg-table tr:last-child td {
	border-bottom: 0;
}

.mlg-table .mlg-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ml-cyan);
}

.mlg-gold {
	color: var(--ml-gold) !important;
}

.mlg-div {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 24px;
	font-size: 12px;
	color: var(--t-title);
	border: 1px solid rgba(var(--t-rgb), 0.5);
	border-radius: var(--ml-r-xs);
}

.mlg-options {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ml-s3);
}

.mlg-option {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s2);
	padding: var(--ml-s4);
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
}

.mlg .mlg-option h3 {
	font-size: var(--wp--preset--font-size--label, 13px);
	letter-spacing: 0;
	color: var(--ml-ink);
}

.mlg-choice {
	display: inline-flex;
	align-self: flex-start;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-xs);
	overflow: hidden;
}

.mlg-choice span {
	padding: 3px 10px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.mlg-choice span + span {
	border-left: 1px solid var(--ml-line);
}

.mlg-choice .is-on {
	color: var(--ml-void);
	background: var(--t-accent);
}

.mlg-code {
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
	background: var(--ml-void);
	overflow: hidden;
}

.mlg-code-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s3);
	padding: 8px var(--ml-s3);
	border-bottom: 1px solid var(--ml-line);
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-live);
}

.mlg-code pre {
	margin: 0;
	padding: var(--ml-s3) var(--ml-s4);
	overflow-x: auto;
	font-family: var(--ml-mono);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ml-electric-glow);
	background: none;
	border: 0;
}

.mlg-others {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ml-s6);
}

.mlg-other {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--ml-s4);
	align-items: center;
	padding: var(--ml-s3);
	background: rgba(var(--ml-panel-rgb), 0.95);
	border: 2px solid rgba(var(--t-rgb), 0.5);
	border-radius: var(--ml-r-md);
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.mlg-other:hover {
	box-shadow: none;
}

.mlg-other img {
	grid-row: 1 / 3;
	height: auto;
	aspect-ratio: 357 / 256;
	border-radius: var(--ml-r-xs);
}

.mlg-other-name {
	align-self: end;
	font-weight: 600;
	font-size: 20px;
	color: var(--t-title);
}

.mlg-other .mlg-muted {
	align-self: start;
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
	.mlg-cards {
		gap: var(--ml-s4);
	}
	.mlg-card {
		padding-inline: var(--ml-s3);
	}
	.mlg-lower,
	.mlg-d-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.mlg-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.mlg-cards {
		grid-template-columns: minmax(0, 1fr);
		max-width: 460px;
		margin-inline: auto;
		width: 100%;
	}
	.mlg-d-hero {
		grid-template-columns: minmax(0, 1fr);
	}
	.mlg-others {
		grid-template-columns: minmax(0, 1fr);
	}
	.mlg-hero::before,
	.mlg-hero::after {
		display: none;
	}
}

@media (max-width: 600px) {
	.mlg {
		gap: var(--ml-s4);
	}
	.mlg-hero {
		padding: var(--ml-s4) var(--ml-s3) var(--ml-s3);
		min-width: 0;
		width: 100%;
	}
	.mlg-principles {
		gap: var(--ml-s2) var(--ml-s4);
		padding-inline: 0;
	}
	.mlg-panel {
		padding: var(--ml-s4);
	}
	.mlg-together-body {
		padding: var(--ml-s4);
	}
	.mlg-privacy-grid {
		align-items: stretch;
	}
	.mlg-lock {
		flex-basis: 52px;
	}
	.mlg-privacy-rows > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
	.mlg-options {
		grid-template-columns: minmax(0, 1fr);
	}
	.mlg-facts-row {
		grid-template-columns: minmax(0, 1fr);
	}
	.mlg-facts-row > div:nth-child(2n) {
		border-left: 0;
	}
	.mlg-facts-row > div + div {
		border-top: 1px solid var(--ml-line) !important;
	}
	.mlg-table th:nth-child(1),
	.mlg-table td:nth-child(1) {
		display: none;
	}
	.mlg-table td,
	.mlg-table th {
		padding-inline: 4px;
		font-size: 14px;
	}
	.mlg-other {
		grid-template-columns: 96px minmax(0, 1fr);
	}
	.mlg-other-name {
		font-size: 16px;
	}
	.mlg-actions .mlg-btn {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlg-card,
	.mlg-card:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------ main event (Starfall, 1.18.0; renamed 1.19.0) */
.mlg-jackpot {
	max-width: 100%;
}

.mlg-led {
	min-width: 0;
	flex: 0 1 auto;
}

.mlg-led svg {
	max-width: 100%;
}

.mlg-main-tag {
	align-self: center;
	margin: 0;
	padding: 3px 10px;
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-void);
	background: var(--ml-gold);
	border-radius: var(--ml-r-xs);
	box-shadow: none;
	font-weight: 600;
}

.mlg-card > .mlg-main-tag {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.mlg-card-main {
	border-color: rgba(var(--t-rgb), 0.8);
	box-shadow: 0 0 0 3px rgba(var(--ml-void-rgb), 0.9), 0 0 0 5px rgba(var(--ml-gold-rgb), 0.35), inset 0 0 18px rgba(var(--t-rgb), 0.16);
}

.mlg-d-main .mlg-main-tag {
	align-self: flex-start;
}

/* ways to play: entry calculator and entry types */
.mlg-ways .mlg-muted {
	max-width: 72ch;
}

.mlg-calc {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--ml-s4) var(--ml-s6);
	margin: var(--ml-s4) 0 var(--ml-s6);
	padding: var(--ml-s4);
	background: rgba(var(--t-rgb), 0.06);
	border: 1px solid rgba(var(--t-rgb), 0.45);
	border-radius: var(--ml-r-sm);
}

.mlg-calc-types {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s2);
	margin: 0;
	padding: 0;
	border: 0;
}

.mlg-calc-types legend {
	width: 100%;
	margin-bottom: var(--ml-s2);
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-muted);
}

.mlg-calc-types label {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--ml-s3);
	border: 1px solid rgba(var(--t-rgb), 0.55);
	border-radius: var(--ml-r-xs);
	color: var(--ml-ink);
	cursor: pointer;
}

.mlg-calc-types input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.mlg-calc-types label:has(input:checked) {
	background: rgba(var(--t-rgb), 0.35);
	border-color: var(--t-glow);
	box-shadow: none;
}

.mlg-calc-types label:has(input:focus-visible) {
	outline: 2px solid var(--t-glow);
	outline-offset: 2px;
}

.mlg-calc-opts {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s3);
}

.mlg-calc-opt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-muted);
}

.mlg-calc-opt[hidden] {
	display: none;
}

.mlg-calc input[type="number"],
.mlg-calc select {
	min-height: 36px;
	max-width: 220px;
	padding: 0 var(--ml-s2);
	font: inherit;
	font-size: 16px;
	color: var(--ml-ink);
	background: var(--ml-void);
	border: 1px solid rgba(var(--t-rgb), 0.55);
	border-radius: var(--ml-r-xs);
}

.mlg-calc-sweep {
	display: flex;
	align-items: flex-start;
	gap: var(--ml-s2);
	color: var(--ml-ink);
	cursor: pointer;
}

.mlg-calc-sweep input {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--ml-gold);
}

.mlg-calc-sweep:has(input:disabled) {
	opacity: 0.55;
	cursor: default;
}

.mlg-calc-out {
	display: grid;
	gap: var(--ml-s2);
	margin: 0;
	align-content: start;
}

.mlg-calc-out div {
	display: flex;
	justify-content: space-between;
	gap: var(--ml-s3);
	padding: var(--ml-s2) var(--ml-s3);
	background: rgba(var(--ml-void-rgb), 0.7);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-xs);
}

.mlg-calc-out dt {
	color: var(--ml-muted);
}

.mlg-calc-out dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--ml-gold);
	text-align: right;
}

.mlg-calc-note {
	grid-column: 1 / -1;
	margin: 0;
}

.mlg-table-wrap {
	position: relative; /* keeps screen-reader text inside the scroller */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mlg-ways-table {
	min-width: 640px;
}

.mlg-ways-table th[scope="row"] {
	padding: 12px var(--ml-s2);
	text-align: left;
	font-weight: 400;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ml-ink);
	white-space: nowrap;
	border-bottom: 1px solid var(--ml-line);
}

.mlg-ways-table tr:last-child th[scope="row"] {
	border-bottom: 0;
}

.mlg-ways-table .mlg-num {
	white-space: nowrap;
}

.mlg-ways-notes {
	margin: var(--ml-s4) 0 0;
	padding-left: 1.2em;
	color: var(--ml-muted);
	font-size: var(--wp--preset--font-size--label, 13px);
}

.mlg-ways-notes li + li {
	margin-top: var(--ml-s2);
}

@media (max-width: 760px) {
	.mlg-calc {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 1.23.0: tNIGHT amounts */
.mlg-vc.mlg-unit {
	font-size: 15px;
	align-self: flex-end;
	margin-bottom: 4px;
	letter-spacing: 0.04em;
}

.mlg-d-main .mlg-vc.mlg-unit {
	font-size: 18px;
}

.mlg-jp-how {
	margin: 6px 0 0;
	max-width: 44ch;
}

.mlg-packages .mlg-table th[scope="row"] {
	font-weight: 400;
	color: var(--ml-ink);
}

/* ------------------------------------------------------------------ draw status ([ml_draws], game pages; inc/status.php) */
.mls-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s3);
	flex-wrap: wrap;
}

.mls-now {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--ml-s2) var(--ml-s3);
	margin: 0;
}

.mls-draw {
	font-size: 14px;
	color: var(--ml-muted);
	font-weight: 600;
}

.mls-headline {
	font-size: 20px;
	color: var(--ml-live);
	font-weight: 600;
}

.mls-void .mls-headline {
	color: var(--ml-alert);
}

.mls-when {
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-ink);
}

.mls-track {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ml-s2);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mls-step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--ml-s2);
	row-gap: 2px;
	align-items: center;
	padding: var(--ml-s3);
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
	opacity: 0.6;
}

.mls-dot {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #2b3c5a;
	font-family: var(--ml-pixel);
	font-size: 12px;
	line-height: 1;
	color: var(--ml-muted);
}

.mls-name {
	font-size: var(--wp--preset--font-size--label, 13px);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ml-ink);
}

.mls-note {
	font-size: 12px;
	line-height: 1.35;
	color: var(--ml-muted);
}

.mls-step.is-done {
	opacity: 1;
}

.mls-step.is-done .mls-dot {
	border-color: var(--ml-gold);
	background: var(--ml-gold);
	color: var(--ml-void);
}

.mls-step.is-now {
	opacity: 1;
	border-color: rgba(var(--ml-live-rgb), 0.7);
	box-shadow: 0 0 0 1px rgba(var(--ml-live-rgb), 0.35);
}

.mls-step.is-now .mls-dot {
	border-color: var(--ml-live);
	color: var(--ml-live);
	animation: mls-pulse 1.6s ease-in-out infinite;
}

.mls-step.is-now .mls-note {
	color: var(--ml-ink);
}

@keyframes mls-pulse {
	50% {
		box-shadow: none;
	}
}

.mls-bar {
	height: 8px;
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: 4px;
	overflow: hidden;
}

.mls-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, rgba(var(--ml-live-rgb), 0.6), var(--ml-live));
	box-shadow: none;
}

.mls-explain {
	margin: 0;
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-ink);
}

.mls-deadline,
.mls-links {
	margin: 0;
}

.mls-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s2) var(--ml-s4);
	color: var(--ml-muted);
}

/* the numbers, in small balls (as .mld-balls-sm on the Draws page, which game pages don't load) */
.mls .mld-balls {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.mls .mld-ball {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 26px;
	padding: 0 2px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: #f4f6ff;
	border-radius: var(--ml-r-xs);
	background: rgba(var(--t-rgb), 0.12);
	border: 1px solid rgba(var(--t-rgb), 0.55);
}

.mls .mld-ball-bonus {
	color: #1a1204;
	font-weight: 700;
	background: var(--ml-gold);
	border-color: var(--ml-gold-glow);
}

.mls .mld-plus {
	align-self: center;
	padding: 0 2px;
	font-weight: 700;
	color: var(--ml-muted);
}

@media (max-width: 860px) {
	.mls-track {
		grid-template-columns: 1fr;
	}

	.mls-step.is-todo .mls-note {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mls-step.is-now .mls-dot {
		animation: none;
	}
}

.mls-links a {
	color: var(--ml-cyan);
}

/* ------------------------------------------------------------------ the latest draw in a game's art (lunardraw_game_art_html) */
.mlg-art-balls {
	position: relative;
	container-type: inline-size;
}

.mlg-ab {
	position: absolute;
	font-family: var(--ml-mono);
	transform: translate(-50%, -50%);
	font-size: 5cqw;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #f4f6ff;
	pointer-events: none;
	white-space: nowrap;
}

.mlg-ab.mlg-ab-bonus {
	color: #fff4d6;
	text-shadow: 0 0 1.6cqw rgba(255, 190, 70, 0.8);
}

/* the chamber animation over the art (as assets/css/stage-fx.css on the home page) */
.mlg-ab-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.mlg-ab-fx > span {
	position: absolute;
	display: block;
}

.mlg-ab-ring {
	width: 11.8%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, transparent 52%, rgba(150, 120, 255, 0.75) 60%, rgba(var(--ml-cyan-rgb), 0.45) 66%, transparent 74%);
	mix-blend-mode: screen;
	opacity: 0.2;
	animation: mlg-ring 2.6s ease-in-out infinite;
}

.mlg-ab-ring.is-gold {
	background: radial-gradient(circle, transparent 52%, rgba(255, 196, 80, 0.8) 60%, rgba(255, 150, 40, 0.45) 66%, transparent 74%);
}

@keyframes mlg-ring {
	0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.96); }
	30% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.03); }
	60% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
}

/* the tube runs from the ball down to its base; energy rises up it into the ball */
.mlg-ab-tube {
	width: 5.2%;
	height: 26%;
	transform: translate(-50%, -12%);
	overflow: hidden;
	border-radius: 40% 40% 8% 8%;
	mix-blend-mode: screen;
}

.mlg-ab-tube > span {
	position: absolute;
	left: 10%;
	right: 10%;
	height: 34%;
	bottom: -40%;
	background: radial-gradient(ellipse at 50% 50%, rgba(170, 190, 255, 0.6), rgba(110, 80, 255, 0.28) 45%, transparent 70%);
	animation: mlg-energy 2.6s linear infinite;
}

.mlg-ab-tube.is-gold > span {
	background: radial-gradient(ellipse at 50% 50%, rgba(255, 226, 150, 0.65), rgba(255, 160, 40, 0.3) 45%, transparent 70%);
}

@keyframes mlg-energy {
	0% { transform: translateY(0); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 0.8; }
	100% { transform: translateY(-320%); opacity: 0; }
}

/* the numbers glow brighter as each ring pulses */
.mlg-ab {
	animation: mlg-ab-glow 2.6s ease-in-out infinite;
}

@keyframes mlg-ab-glow {
	0%, 100% { filter: brightness(0.92); }
	30% { filter: brightness(1.25); }
}

@media (prefers-reduced-motion: reduce) {
	.mlg-ab-fx {
		display: none;
	}

	.mlg-ab {
		animation: none;
	}
}

/* ------------------------------------------------------------------ play with your wallet (inc/wallet.php) */
.mlp-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--ml-s6);
	align-items: start;
}

.mlp-form,
.mlp-side {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s3);
}

.mlp-label {
	margin: var(--ml-s2) 0 0;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.mlp-count {
	margin-left: var(--ml-s2);
	color: var(--ml-gold);
}

.mlp-select {
	min-height: 44px;
	padding: 0 var(--ml-s3);
	font: inherit;
	color: var(--ml-ink);
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
}

.mlp-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 6px;
	font-size: 0.95em;
	cursor: pointer;
}
.mlp-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ml-gold, #e9b949);
}
[data-play-panel="choose"] .mlp-select {
	width: 100%;
	max-width: 420px;
	margin-bottom: 4px;
}

.mlp-nums {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	max-width: 420px;
}

.mlp-moon {
	grid-template-columns: repeat(10, minmax(0, 1fr));
	max-width: 560px;
}

.mlp-num {
	min-height: 36px;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--ml-ink);
	background: rgba(var(--t-rgb), 0.08);
	border: 1px solid rgba(var(--t-rgb), 0.4);
	border-radius: var(--ml-r-xs);
	cursor: pointer;
}

.mlp-num:hover,
.mlp-num:focus-visible {
	border-color: var(--t-glow);
}

.mlp-num.is-on {
	color: #fff;
	background: rgba(var(--t-rgb), 0.55);
	border-color: var(--t-glow);
	box-shadow: none;
}

.mlp-moon .mlp-num.is-on {
	color: #1a1204;
	background: var(--ml-gold);
	border-color: var(--ml-gold-glow);
	box-shadow: none;
}

.mlp-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s2);
	align-items: center;
}

.mlp-lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding-left: 1.6em;
	font-variant-numeric: tabular-nums;
}

.mlp-lines li .mlp-chip {
	margin-left: var(--ml-s2);
	padding: 0 8px;
	font-size: 12px;
}

.mlp-sum {
	display: grid;
	gap: var(--ml-s2);
	padding: var(--ml-s4);
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
}

.mlp-sum > div {
	display: flex;
	justify-content: space-between;
	gap: var(--ml-s3);
}

.mlp-sum dt {
	color: var(--ml-muted);
	font-size: var(--wp--preset--font-size--label, 13px);
}

.mlp-sum dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mlp-buy {
	width: 100%;
}


.mlp-why:empty {
	display: none;
}

.mlp-progress {
	margin: 0;
	padding-left: 1.4em;
	font-size: var(--wp--preset--font-size--label, 13px);
}

.mlp-progress .is-ok {
	color: var(--ml-live);
}

.mlp-progress .is-bad {
	color: #ffb0bd;
}

@media (max-width: 860px) {
	.mlp-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* the play panel's own head, chips and badge (the Starfall page doesn't load agents.css or developers.css) */
.mlp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s3);
}

.mlp-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mlp-chip {
	min-height: 32px;
	padding: 4px 12px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
	background: rgba(var(--ml-void-rgb), 0.7);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-xs);
	cursor: pointer;
}

.mlp-chip:hover {
	color: var(--ml-ink);
	border-color: var(--ml-violet);
}

.mlp-chip.is-on {
	color: #f2ecff;
	background: #4d2fb8;
	border-color: var(--ml-violet-bright);
	box-shadow: none;
}

.mlp-chip:focus-visible,
.mlp-num:focus-visible {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 2px;
}

.mlp-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
	border: 1px dashed rgba(var(--ml-muted-rgb), 0.55);
	border-radius: var(--ml-r-xs);
}

.mlp-badge.is-live {
	color: var(--ml-live);
	border: 1px solid rgba(var(--ml-live-rgb), 0.5);
}

/* ------------------------------------------------------------------ one game in play */
/* While Starfall is the only game, the Games page shows it as one wide feature:
   the art on the left, the details beside it. */
@media (min-width: 861px) {
	.mlg-cards.mlg-cards-solo {
		grid-template-columns: minmax(0, 1fr);
	}
	.mlg-cards-solo .mlg-card {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-auto-rows: auto;
		align-content: start;
		column-gap: var(--ml-s12);
		row-gap: var(--ml-s4);
		padding: var(--ml-pad);
		text-align: left;
	}
	.mlg-cards-solo .mlg-card > * {
		grid-column: 2;
	}
	.mlg-cards-solo .mlg-card > .mlg-art {
		grid-column: 1;
		grid-row: 1 / span 7;
		align-self: center;
	}
	.mlg-cards-solo .mlg-card > .mlg-main-tag {
		position: static;
		transform: none;
		justify-self: start;
	}
	.mlg-cards-solo .mlg .mlg-card-title,
	.mlg-cards-solo .mlg-card-title {
		align-self: start;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		font-size: var(--wp--preset--font-size--display, 64px);
		line-height: 1;
	}
	.mlg-cards-solo .mlg-jp-block {
		align-items: flex-start;
	}
	.mlg-cards-solo .mlg-card .mlg-btn {
		justify-self: start;
		width: auto;
		min-width: 200px;
	}
}

.mlg-later {
	align-self: center;
	margin: 0;
	padding: var(--ml-s2) var(--ml-s4);
	text-align: center;
	color: var(--ml-muted);
	font-size: var(--wp--preset--font-size--label, 14px);
	background: rgba(var(--ml-void-rgb), 0.8);
	border-radius: var(--ml-r-sm);
}

/* the stacked card: room under the "Main event" tag for the game's name */
.mlg-card-main > .mlg-card-title {
	padding-top: 22px;
}

/* ------------------------------------------------------------------ page banners */
/* One look for every inner page's banner (Games, Agents, Draws, Leaderboard,
   Verification, Developers): the pixel title in ink, a muted line under it, on a
   quiet dark glass panel. Each page keeps its own scene behind; the page colours
   above in each page's stylesheet are overridden here, not deleted, so a page can
   still opt back in. */
.mlg .mlg-hero.mlg-hero {
	background: rgba(var(--ml-void-rgb), 0.72);
	border: 1px solid rgba(var(--ml-ink-rgb), 0.12);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.mlg .mlg-hero .mlg-sign.mlg-sign {
	color: var(--ml-ink);
	text-shadow: none;
}

.mlg .mlg-hero .mlg-sign-sub.mlg-sign-sub {
	color: var(--ml-muted);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--body, 16px);
}

/* "Coming soon" tag (Play together: syndicates arrive in a later Starfall contract) */
.mlg-soon {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
	color: #f2c44a;
	border: 1px solid rgba(242, 196, 74, 0.45);
	border-radius: 4px;
}