/* Lunardraw: Draws page ([ml_draws]). Builds on games.css (.mlg-*) and agents.css (chips, steps). */

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

.mld-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;
}

.mld .mlg-hero {
	background: rgba(14, 4, 12, 0.62);
}

.mld .mld-sign {
	color: var(--ml-cyan);
}

.mld .mld-sign-sub {
	color: var(--ml-ink);
}

.mld .mld-section-title {
	align-self: center;
	padding: 6px var(--ml-s4);
	background: rgba(var(--ml-void-rgb), 0.85);
	border-radius: var(--ml-r-xs);
}

.mld-latest {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s4);
}

.mld-latest-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ml-s6);
}

/* ------------------------------------------------------------------ latest result cards */
.mld-result {
	gap: var(--ml-s3);
	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.1);
}

.mld-result-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ml-s3);
}

.mld .mld-game {
	font-family: var(--ml-pixel); /* a game's name is its logo: pixel face */
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
}

.mld-game a {
	color: var(--t-title);
}

.mld-draw-id {
	font-size: var(--wp--preset--font-size--label, 13px);
	letter-spacing: 0;
	color: var(--ml-ink);
	white-space: nowrap;
}

.mld-when {
	font-size: var(--wp--preset--font-size--caption, 11px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
	margin-top: calc(-1 * var(--ml-s2)) !important;
}

.mld-balls {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mld-balls-lg {
	flex-wrap: nowrap;
	justify-content: center;
	gap: 6px;
	padding: var(--ml-s4) var(--ml-s2);
	background: radial-gradient(ellipse at 50% 60%, rgba(var(--t-rgb), 0.18), transparent 70%), var(--ml-void);
	border: 1px solid rgba(var(--t-rgb), 0.35);
	border-radius: var(--ml-r-sm);
}

.mld-ball {
	display: inline-grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
	color: #f4f6ff;
}

.mld-balls-lg .mld-ball {
	flex: 1 1 0;
	min-width: 0;
	max-width: 46px;
	aspect-ratio: 1;
	border-radius: 50%;
	font-size: 17px;
	font-weight: 700;
	background: radial-gradient(circle at 35% 30%, rgba(var(--t-rgb), 0.35), #050818 70%);
	border: 3px solid var(--t-accent);
	box-shadow: inset 0 0 10px rgba(var(--t-rgb), 0.7), inset 0 0 0 1px var(--t-glow);
}

.mld-balls-sm {
	flex-wrap: nowrap;
	gap: 4px;
}

.mld-balls-sm .mld-ball {
	min-width: 28px;
	height: 26px;
	padding: 0 2px;
	font-size: 13px;
	border-radius: var(--ml-r-xs);
	background: rgba(var(--t-rgb), 0.12);
	border: 1px solid rgba(var(--t-rgb), 0.55);
}

.mld-divs {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--label, 13px);
}

.mld-divs th {
	text-align: left;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
	padding: 0 4px 4px;
	border-bottom: 1px solid var(--ml-line);
}

.mld-divs th:last-child,
.mld-divs td:last-child {
	text-align: right;
}

.mld-divs td {
	padding: 5px 4px;
	border-bottom: 1px solid rgba(var(--ml-line-rgb), 0.6);
	color: var(--ml-ink);
	font-variant-numeric: tabular-nums;
}

.mld-divs tr:last-child td {
	border-bottom: 0;
}

.mld-jp-row td {
	color: var(--ml-gold);
}

.mld-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-live);
}

.mld-proof code {
	font-family: var(--ml-mono);
	font-size: 12px;
	color: var(--ml-ink);
	background: var(--ml-void);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-xs);
	padding: 1px 6px;
}

.mld-proof a {
	margin-left: auto;
	font-size: 12px;
}

.mld-check {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ml-live);
}

.mld-check::before {
	content: "✓";
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--ml-void);
}

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

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

.mld-next .mlg-countdown {
	font-size: 18px;
}

/* ------------------------------------------------------------------ history */
.mld-history {
	scroll-margin-top: 96px;
}

.mld-history-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s3);
}

.mld-history-head .mlg-panel-title {
	display: inline-flex;
	align-items: center;
	gap: var(--ml-s3);
}

.mld-history-head .mlg-illus {
	font-weight: 400;
}

.mld-table-wrap {
	position: relative; /* keeps screen-reader text inside the scroller */
	overflow-x: auto;
	margin-inline: calc(-1 * var(--ml-s2));
	padding-inline: var(--ml-s2);
}

.mld-table {
	min-width: 720px;
}

.mld-table td {
	padding-block: 9px;
}

.mld-table tr[hidden] {
	display: none;
}

.mld-code {
	display: inline-block;
	min-width: 26px;
	margin-right: 4px;
	font-size: 12px;
	letter-spacing: 0;
	color: var(--t-title);
}

.mld-date {
	white-space: nowrap;
	color: var(--ml-muted) !important;
	font-size: 14px;
}

.mld-col-num {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}

.mld-won {
	color: var(--ml-gold);
}

.mld-roll {
	color: var(--ml-muted);
}

.mld-hash {
	font-size: 12px;
	white-space: nowrap;
	color: var(--ml-electric-glow);
}

.mld-more-wrap {
	display: flex;
	justify-content: center;
}

.mld-more-wrap[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ frequency */
.mld-heat-game {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s3);
}

.mld-heat-game[hidden] {
	display: none;
}

.mld-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mld-grid li {
	--h: 0.5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 48px;
	border-radius: var(--ml-r-xs);
	border: 1px solid rgba(var(--t-rgb), calc(0.2 + var(--h) * 0.6));
	background: rgba(var(--t-rgb), calc(0.04 + var(--h) * 0.42));
	box-shadow: none;
}

.mld-n {
	font-size: 16px;
	color: var(--ml-ink);
	font-variant-numeric: tabular-nums;
}

.mld-c {
	font-size: 12px;
	color: var(--ml-muted);
}

.mld-hotcold {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s2) var(--ml-s6);
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-ink);
}

.mld-hotcold > span {
	display: inline-flex;
	align-items: center;
	gap: var(--ml-s2);
}

.mld-key {
	width: 14px;
	height: 14px;
	border-radius: 3px;
}

.mld-key-hot {
	background: rgba(var(--t-rgb), 0.46);
	border: 1px solid rgba(var(--t-rgb), 0.8);
	box-shadow: none;
}

.mld-key-cold {
	background: rgba(var(--t-rgb), 0.04);
	border: 1px solid rgba(var(--t-rgb), 0.2);
}

.mld-note {
	padding: var(--ml-s3) var(--ml-s4);
	border: 1px dashed rgba(var(--ml-muted-rgb), 0.4);
	border-radius: var(--ml-r-sm);
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-muted);
}

/* ------------------------------------------------------------------ how a draw works */
.mld-steps {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
	.mld-latest-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
		margin-inline: auto;
		width: 100%;
	}
	.mld-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mld-balls-lg .mld-ball {
		font-size: 15px;
		border-width: 2px;
	}
	.mld-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 4px;
	}
	.mld-grid li {
		min-height: 42px;
	}
	.mld-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ Moonball (Starfall's bonus ball, 1.18.0) */
.mld-plus {
	align-self: center;
	flex: 0 0 auto;
	padding: 0 2px;
	font-weight: 700;
	color: var(--ml-muted);
}

.mld-balls .mld-ball-bonus {
	color: #1a1204;
	text-shadow: none;
}

.mld-balls-lg .mld-ball-bonus {
	background: radial-gradient(circle at 35% 30%, #fff3c4 0%, var(--ml-gold) 45%, #8a5a10 100%);
	border-color: var(--ml-gold-glow);
	box-shadow: 0 0 16px rgba(var(--ml-gold-rgb), 0.85), inset 0 0 8px rgba(255, 255, 255, 0.45), inset 0 0 0 1px #fff3c4;
}

.mld-balls-sm .mld-ball-bonus {
	background: var(--ml-gold);
	border-color: var(--ml-gold-glow);
	font-weight: 700;
}

.mld-bonus-title {
	margin: var(--ml-s4) 0 var(--ml-s2);
}

.mld-grid-bonus li {
	--t-rgb: var(--ml-gold-rgb);
}

/* 1.23.0: settled prizes */
.mld-pool {
	margin: 8px 0 0;
}

.mld-jp-amt {
	margin-left: 6px;
	color: var(--ml-gold);
	font-size: 12px;
	white-space: nowrap;
}

/* a cancelled draw in the results history (chain only) */
.mld-table .mld-void {
	color: var(--ml-muted, #9aa7c7);
	font-style: italic;
}

/* the big result balls pulse in turn, like the home page's Number Chamber */
.mld-balls-lg .mld-ball {
	animation: mld-ball-pulse 2.6s ease-in-out infinite;
}

.mld-balls-lg .mld-ball:nth-child(2) { animation-delay: 0.18s; }
.mld-balls-lg .mld-ball:nth-child(3) { animation-delay: 0.36s; }
.mld-balls-lg .mld-ball:nth-child(4) { animation-delay: 0.54s; }
.mld-balls-lg .mld-ball:nth-child(5) { animation-delay: 0.72s; }
.mld-balls-lg .mld-ball:nth-child(6) { animation-delay: 0.9s; }
.mld-balls-lg .mld-ball:nth-child(7) { animation-delay: 1.08s; }
.mld-balls-lg .mld-ball-bonus { animation-delay: 1.26s; }

@keyframes mld-ball-pulse {
	0%, 100% { filter: brightness(0.9); }
	30% { filter: brightness(1.3) drop-shadow(0 0 6px rgba(var(--t-rgb), 0.8)); }
	60% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
	.mld-balls-lg .mld-ball {
		animation: none;
	}
}

/* one game in play: its latest result sits centred, at a readable width, not in the first of three columns */
.mld-latest-grid:has(> :only-child) {
	grid-template-columns: minmax(0, 560px);
	justify-content: center;
}