/*
Theme Name: Lunardraw
Theme URI: https://lunardraw.local
Author: Dadfy
Description: The Agent Exchange. A neon pixel-city block theme for Lunardraw, built from the Lunardraw design system: void and panel surfaces, violet brand, gold jackpot, an electric Number Chamber, Silkscreen and Share Tech Mono. Simulation mode, virtual credits only.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.35.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lunardraw
Tags: block-patterns, full-site-editing, dark, custom-colors, wide-blocks
*/

/* ------------------------------------------------------------------ tokens */
:root {
	--ml-void: var(--wp--preset--color--void, #02040d);
	--ml-panel: var(--wp--preset--color--panel, #070c1d);
	--ml-raised: var(--wp--preset--color--panel-raised, #11102d);
	--ml-tile: var(--wp--preset--color--tile, #121f4f);
	--ml-line: var(--wp--preset--color--line, #1f2552);
	--ml-ink: var(--wp--preset--color--ink, #e6e9ff);
	--ml-muted: var(--wp--preset--color--ink-muted, #8d98c8);
	--ml-violet: var(--wp--preset--color--violet, #8a5cf9);
	--ml-violet-bright: var(--wp--preset--color--violet-bright, #a385ff);
	--ml-cyan: var(--wp--preset--color--cyan, #64c8f2);
	--ml-electric: var(--wp--preset--color--electric, #3a52e0);
	--ml-electric-glow: var(--wp--preset--color--electric-glow, #9db8ff);
	--ml-gold: var(--wp--preset--color--gold, #e8b83e);
	--ml-gold-glow: var(--wp--preset--color--gold-glow, #fdef8b);
	--ml-live: var(--wp--preset--color--live, #34e3a2);
	--ml-alert: var(--wp--preset--color--alert, #ff5c7a);
	--ml-neon: var(--wp--preset--color--neon-pink, #ff7bf0);
	/* the same palette as R, G, B channels, for glows: rgba(var(--ml-violet-rgb), 0.5).
	   Keep these in step with theme.json; a channel triplet can't be derived from a hex token in CSS. */
	--ml-void-rgb: 2, 4, 13;
	--ml-panel-rgb: 7, 12, 29;
	--ml-raised-rgb: 17, 16, 45;
	--ml-tile-rgb: 18, 31, 79;
	--ml-line-rgb: 31, 37, 82;
	--ml-ink-rgb: 230, 233, 255;
	--ml-muted-rgb: 141, 152, 200;
	--ml-violet-rgb: 138, 92, 249;
	--ml-violet-bright-rgb: 163, 133, 255;
	--ml-cyan-rgb: 100, 200, 242;
	--ml-electric-rgb: 58, 82, 224;
	--ml-electric-glow-rgb: 157, 184, 255;
	--ml-gold-rgb: 232, 184, 62;
	--ml-gold-glow-rgb: 253, 239, 139;
	--ml-live-rgb: 52, 227, 162;
	--ml-alert-rgb: 255, 92, 122;
	--ml-neon-rgb: 255, 123, 240;
	--ml-pixel: var(--wp--preset--font-family--pixel, Silkscreen, monospace);
	--ml-mono: var(--wp--preset--font-family--mono, "Share Tech Mono", monospace);
	--ml-r-xs: var(--wp--custom--radius--xs, 2px);
	--ml-r-sm: var(--wp--custom--radius--sm, 4px);
	--ml-r-md: var(--wp--custom--radius--md, 6px);
	--ml-s1: var(--wp--preset--spacing--1, 4px);
	--ml-s2: var(--wp--preset--spacing--2, 8px);
	--ml-s3: var(--wp--preset--spacing--3, 12px);
	--ml-s4: var(--wp--preset--spacing--4, 16px);
	--ml-s6: var(--wp--preset--spacing--6, 24px);
	--ml-s8: var(--wp--preset--spacing--8, 32px);
	--ml-s12: var(--wp--preset--spacing--12, 48px);
	--ml-s16: var(--wp--preset--spacing--16, 64px);
	--ml-s24: var(--wp--preset--spacing--24, 96px);
	--ml-s32: var(--wp--preset--spacing--32, 128px);
	--ml-sans: var(--wp--preset--font-family--sans, Geist, sans-serif);
	--ml-section: var(--ml-s12); /* space between a page's sections */
	--ml-pad: var(--ml-s8);      /* inside a panel */
	--ml-panel-bg: rgba(var(--ml-panel-rgb), 0.92);
}

@media (max-width: 719px) {
	:root {
		--ml-section: var(--ml-s8);
		--ml-pad: 20px;
	}
}

/* ------------------------------------------------------------------ base */
/* form controls take the page's font (browsers give them their own) */
:where(button, select, input, textarea) {
	font-family: inherit;
}

/* numbers that tick or must line up, and anything machine-shaped, stay mono */
.ml-game-next,
.mlg-countdown,
.ml-hash,
.mld-hash,
.mlv-hash,
pre,
code,
kbd,
samp {
	font-family: var(--ml-mono);
	font-variant-numeric: tabular-nums;
}

body {
	background-color: var(--ml-void);
	-webkit-font-smoothing: antialiased;
}

/* The Midnight City scene behind every page: towers either side, sky and moon
   along the top, a dark neon reflection behind the content. Fixed to the
   viewport so the content scrolls over it. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	top: var(--ml-backdrop-top, 0px); /* below the sticky header (assets/js/backdrop.js) */
	z-index: -1;
	pointer-events: none;
	background: var(--ml-void) url("assets/images/city-bg.webp?v=3") center top / 100% auto no-repeat;
	background-image: image-set(url("assets/images/city-bg.webp?v=3") 1x, url("assets/images/city-bg@2x.webp?v=3") 2x);
}

/* screens taller than the artwork: fill the height, keep the left tower in view */
@media (max-aspect-ratio: 4/3) {
	body::before {
		background-size: cover;
		background-position: 8% top;
	}
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main,
.wp-site-blocks > .ml-home,
.wp-site-blocks > .ml-page {
	flex: 1;
}

/* Visually hidden, still read by screen readers (also styled by WordPress core; kept here so the theme never depends on it). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

/* the Illustrative tag (lunardraw_illustrative()), on the home page and every inner page */
.mlg-illus {
	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);
	padding: 1px 5px;
	line-height: 13px;
	cursor: help;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 2px;
}

::selection {
	background: var(--ml-violet);
	color: var(--ml-void);
}

/* Components set their own rhythm. */
.ml-header p,
.ml-footer p,
.ml-home p,
.ml-home h2,
.ml-home h3 {
	margin: 0;
}

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

/* ------------------------------------------------------------------ header */
/* One header on every page (parts/header.html), the home page included: a slim
   testnet bar, then the wordmark, five links and the two connect buttons.
   From 783px the whole template part is sticky with a negative top, so the
   testnet bar scrolls away and the main row stays. Below 1100px the links fold
   into the menu button; below 720px the buttons get their own row. */
:root {
	--ml-testbar-h: 28px;
}

.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: 20;
}

@media (min-width: 783px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: calc(-1 * var(--ml-testbar-h));
	}
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: calc(32px - var(--ml-testbar-h));
	}
	/* in-page links (#play and the like) land below the sticky header */
	html {
		scroll-padding-top: 96px;
	}
	html:has(body.admin-bar) {
		scroll-padding-top: 128px;
	}
}

.ml-testbar.ml-testbar {
	box-sizing: border-box;
	height: var(--ml-testbar-h);
	margin: 0 !important;
	padding: 0 var(--ml-s4);
	gap: var(--ml-s2);
	align-items: center;
	background: var(--ml-void);
	border-bottom: 1px solid var(--ml-line);
	font-size: var(--wp--preset--font-size--caption, 11px);
	line-height: 1;
	letter-spacing: 0;
	color: var(--ml-muted);
	overflow: hidden;
}

.ml-testbar p {
	margin: 0;
	white-space: nowrap;
}

.ml-sim-title {
	display: inline-flex;
	align-items: center;
	gap: var(--ml-s2);
	color: var(--ml-ink);
}

.ml-sim-title::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ml-live);
}

.ml-sim-sub {
	color: var(--ml-live);
}

.ml-testbar-note::before {
	content: "\00b7";
	margin-right: var(--ml-s2);
	color: var(--ml-line);
}

.ml-header {
	margin: 0 !important;
	background: rgba(var(--ml-void-rgb), 0.96);
	border-bottom: 1px solid var(--ml-line);
	padding-top: var(--ml-s3);
	padding-bottom: var(--ml-s3);
}

.ml-header .ml-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s8);
	flex-wrap: nowrap !important;
	min-height: 44px;
}

.ml-header .ml-brand {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 2px;
}

.ml-brand .wp-block-site-title a {
	text-decoration: none;
}

.ml-brand .wp-block-site-tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption, 11px);
}

.ml-header .ml-nav {
	flex: 1 1 auto;
	gap: var(--ml-s6);
}

.ml-nav .wp-block-navigation__container {
	gap: 28px;
}

.ml-nav .wp-block-navigation-item__content {
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ml-nav .wp-block-navigation-item__content:hover,
.ml-nav .current-menu-item > .wp-block-navigation-item__content,
.ml-nav .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--ml-violet);
	color: var(--ml-ink);
}

.ml-nav .wp-block-navigation__responsive-container-open,
.ml-nav .wp-block-navigation__responsive-container-close {
	color: var(--ml-ink);
	padding: 8px;
}

/* the open menu: a full-screen panel, links at a readable size */
.ml-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ml-void) !important;
	color: var(--ml-ink) !important;
	padding: var(--ml-s6);
}

.ml-nav .is-menu-open .wp-block-navigation__container {
	gap: var(--ml-s4);
}

.ml-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 20px;
	letter-spacing: 0.04em;
}

.ml-header .ml-header-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--ml-s3);
}

.ml-header .ml-header-actions .wp-block-buttons {
	flex-wrap: nowrap;
	gap: var(--ml-s3);
}

.ml-header-actions .wp-block-button__link {
	box-sizing: border-box;
	min-height: 40px;
	padding: 0 var(--ml-s4);
	font-size: var(--wp--preset--font-size--label, 13px);
	line-height: 1;
	white-space: nowrap;
}

/* links fold into the menu button below 1100px (core folds them only below 600px) */
@media (max-width: 1099px) {
	.ml-header .ml-brand {
		margin-right: auto;
	}
	.ml-header .ml-nav {
		flex: none;
		order: 3;
	}
	.ml-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.ml-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* phones (and phones turned sideways): wordmark and menu on one row, the two
   buttons side by side below. One row needs about 710px. */
@media (max-width: 719px) {
	.ml-header .ml-header-inner {
		flex-wrap: wrap !important;
		gap: var(--ml-s3) var(--ml-s2);
		min-height: 0;
	}
	.ml-brand .wp-block-site-title {
		font-size: 20px;
		line-height: 26px;
	}
	.ml-brand .wp-block-site-tagline {
		display: none;
	}
	.ml-header .ml-nav {
		order: 2;
	}
	.ml-header .ml-header-actions {
		order: 4;
		flex: 1 1 100%;
	}
	.ml-header .ml-header-actions .wp-block-buttons {
		flex: 1 1 100%;
	}
	.ml-header-actions .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}
	.ml-header-actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
		padding: 0 var(--ml-s3);
	}
	.ml-testbar-note {
		display: none;
	}
}

/* the smallest phones: the wallet button keeps its icon, its label is for screen readers */
@media (max-width: 379px) {
	.ml-draw-row .ml-time {
		display: none;
	}
	.ml-chamber-panel {
		padding: var(--ml-s3) !important;
	}
	.ml-chamber {
		gap: 2px !important;
		padding-inline: var(--ml-s1) !important;
	}
	.ml-header .ml-header-actions .wp-block-button.ml-wallet {
		flex: none;
	}
	.ml-header .ml-wallet-btn .ml-wallet-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

.ml-connect .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ml-s2);
}

.ml-connect .wp-block-button__link::before {
	/* pixel robot face */
	content: "";
	width: 16px;
	height: 14px;
	background:
		linear-gradient(var(--ml-void), var(--ml-void)) 3px 4px / 3px 3px no-repeat,
		linear-gradient(var(--ml-void), var(--ml-void)) 10px 4px / 3px 3px no-repeat,
		linear-gradient(var(--ml-void), var(--ml-void)) 4px 10px / 8px 2px no-repeat;
	border: 2px solid var(--ml-void);
	border-radius: 2px;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ panels & cards */
.is-style-panel {
	background: var(--ml-panel-bg);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	padding: var(--ml-s6);
	box-shadow: inset 0 0 0 1px rgba(var(--ml-violet-rgb), 0.06), 0 12px 32px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(3px);
}

.is-style-panel > * + * {
	margin-block-start: 0;
}

.is-style-card {
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
	padding: var(--ml-s4);
}

.ml-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s3);
	margin-bottom: var(--ml-s4);
	flex-wrap: wrap;
}

.is-style-panel-title {
	color: var(--ml-ink);
	font-size: var(--wp--preset--font-size--body, 16px) !important;
	margin: 0;
}

.is-style-sign {
	display: inline-block;
	font-family: var(--ml-pixel);
	font-size: var(--wp--preset--font-size--sign, 20px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ml-violet-bright);
	padding: var(--ml-s3) var(--ml-s4);
	border: 2px solid var(--ml-violet);
	border-radius: var(--ml-r-sm);
	box-shadow: inset 0 0 12px rgba(var(--ml-violet-rgb), 0.25);
}

.ml-chip {
	font-size: var(--wp--preset--font-size--caption, 11px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-xs);
	padding: 2px var(--ml-s2);
	line-height: 14px;
}

.is-style-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--caption, 11px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-live);
	border: 1px solid rgba(var(--ml-live-rgb), 0.45);
	border-radius: var(--ml-r-xs);
	padding: 2px var(--ml-s2);
	line-height: 14px;
}

.is-style-live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ml-live);
	box-shadow: none;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--ml-ink) !important;
	border: 1px solid var(--ml-line);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: rgba(var(--ml-ink-rgb), 0.04);
	border-color: var(--ml-violet-bright);
}

/* ------------------------------------------------------------------ home layout */
.ml-home {
	padding-top: var(--ml-s6);
	padding-bottom: var(--ml-s8);
}

.ml-home > * + * {
	margin-block-start: var(--ml-s6);
}

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

.ml-grid > * {
	margin: 0 !important;
}

.ml-main-col,
.ml-side-col {
	display: flex;
	flex-direction: column;
	align-items: stretch !important; /* every panel in a column is the column's width */
	gap: var(--ml-s6);
	min-width: 0;
}

.ml-cols {
	gap: var(--ml-s6) !important;
	margin: 0 !important;
}

.ml-cols > .wp-block-column > .is-style-panel {
	height: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ jackpot hero */
.ml-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	max-width: 620px;
	margin-left: auto !important;
	margin-right: auto !important;
	background: var(--ml-panel-bg);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	box-shadow: 0 0 0 1px rgba(var(--ml-gold-rgb), 0.08), 0 16px 40px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.ml-jackpot-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ml-s1);
	padding: var(--ml-s6) var(--ml-s6) var(--ml-s4);
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.ml-jackpot-label {
	font-size: var(--wp--preset--font-size--caption, 12px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-jackpot {
	font-family: var(--ml-pixel);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--jackpot, 88px);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--ml-gold-glow);
	background: linear-gradient(180deg, var(--ml-gold-glow) 0%, var(--ml-gold-glow) 40%, var(--ml-gold) 75%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 14px rgba(var(--ml-gold-rgb), 0.6));
}

.ml-jackpot-unit {
	font-size: var(--wp--preset--font-size--label, 14px);
	font-weight: 500;
	color: var(--ml-gold);
}

.ml-jackpot-cells {
	display: flex;
	width: 100%;
	border-top: 1px solid var(--ml-line);
	gap: 0 !important;
}

.ml-cell {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ml-s3) var(--ml-s6);
}

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

.ml-cell-format {
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 160px;
}

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

.is-style-countdown {
	font-family: var(--ml-mono);
	font-size: var(--wp--preset--font-size--countdown, 40px);
	line-height: 44px;
	letter-spacing: 0;
	color: var(--ml-cyan);
	font-variant-numeric: tabular-nums;
}

.ml-units {
	/* one label under each pair of digits: sized in the countdown's own font, so
	   "05:10:41:03" (11 characters) and its 4 columns line up at any font size */
	display: grid;
	grid-template-columns: 3fr 3fr 3fr 2fr;
	gap: 0 !important;
	width: calc(11ch + 11 * 0.06em);
	max-width: 100%;
	font-family: var(--ml-mono);
	font-size: var(--wp--preset--font-size--countdown, 40px);
	line-height: 1;
}

.ml-units > .ml-unit {
	margin: 0;
	line-height: 14px;
}

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

.ml-format {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: 0;
	color: var(--ml-cyan);
}

/* ------------------------------------------------------------------ number chamber */
.ml-chamber {
	/* a grid, not flex: each tube's height comes from its width (aspect-ratio), and
	   flex sized the chamber from the tubes' zero basis, so tall tubes spilled over the
	   panel title at tablet widths (e.g. a browser with a wallet side panel open) */
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 110px);
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s3);
	padding: var(--ml-s6) var(--ml-s4);
	background:
		linear-gradient(180deg, rgba(var(--ml-electric-rgb), 0.08), rgba(var(--ml-raised-rgb), 0.9)),
		var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
	flex-wrap: nowrap !important;
}

.ml-tube {
	position: relative;
	width: 100%;
	max-width: 110px;
	aspect-ratio: 5 / 8;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(var(--ml-electric-rgb), 0.55);
	border-radius: 40px 40px var(--ml-r-sm) var(--ml-r-sm);
	background: linear-gradient(180deg, rgba(var(--ml-electric-glow-rgb), 0.10), rgba(var(--ml-electric-rgb), 0.04) 60%, rgba(var(--ml-void-rgb), 0.6));
	box-shadow: inset 0 0 18px rgba(var(--ml-electric-rgb), 0.25);
}

.ml-tube::before,
.ml-tube::after {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	height: 10px;
	background: var(--ml-line);
	border: 1px solid rgba(var(--ml-electric-glow-rgb), 0.25);
	border-radius: var(--ml-r-xs);
}

.ml-tube::before {
	top: -8px;
}

.ml-tube::after {
	bottom: -8px;
}

.is-style-ball {
	width: 72%;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	margin: 0;
	border-radius: 50%;
	font-family: var(--ml-mono);
	font-size: var(--wp--preset--font-size--ball, 28px);
	line-height: 1;
	color: var(--ml-ink);
	background: radial-gradient(circle at 35% 30%, #1d2660 0%, var(--ml-void) 70%);
	border: 4px solid var(--ml-electric);
	box-shadow: inset 0 0 14px rgba(var(--ml-electric-rgb), 0.9), inset 0 0 0 1px var(--ml-electric-glow);
	box-sizing: border-box;
}

/* a ball used on its own, outside a tube */
:not(.ml-tube) > .is-style-ball {
	width: 64px;
	display: inline-grid;
}

/* the Moonball: Starfall's bonus ball, gold, in its own tube */
.ml-tube-bonus {
	margin-left: 0;
	border-color: rgba(var(--ml-gold-rgb), 0.7);
	background: linear-gradient(180deg, rgba(var(--ml-gold-rgb), 0.14), rgba(var(--ml-gold-rgb), 0.04) 60%, rgba(var(--ml-void-rgb), 0.6));
	box-shadow: inset 0 0 18px rgba(var(--ml-gold-rgb), 0.3);
}

.is-style-ball.ml-ball-bonus {
	color: #1a1204;
	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 20px rgba(var(--ml-gold-rgb), 0.75), inset 0 0 10px rgba(255, 255, 255, 0.4), inset 0 0 0 1px #fff3c4;
	text-shadow: none;
}

.is-style-tile.ml-tile-bonus {
	margin-left: 4px;
	color: #1a1204;
	background: var(--ml-gold);
	border-color: var(--ml-gold-glow);
	font-weight: 700;
}

/* ------------------------------------------------------------------ rows, feeds, avatars */
.ml-feed {
	display: flex;
	flex-direction: column;
	gap: 0 !important;
}

.ml-row {
	display: flex;
	align-items: center;
	gap: var(--ml-s3);
	padding: var(--ml-s2) 0;
	border-bottom: 1px solid var(--ml-line);
	min-width: 0;
}

.ml-row:last-child {
	border-bottom: 0;
}

.ml-row-text {
	display: flex;
	flex-direction: column;
	gap: 0 !important;
	min-width: 0;
	flex: 1;
}

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

.ml-time,
.ml-hash {
	margin-left: auto !important;
	font-size: var(--wp--preset--font-size--caption, 11px);
	color: var(--ml-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ml-avatar {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: var(--ml-r-sm);
	font-family: var(--ml-pixel);
	font-size: 11px;
	font-weight: 700;
	color: var(--ml-void);
	background: var(--ml-violet);
	image-rendering: pixelated;
}

.ml-avatar-gold { background: var(--ml-gold); }
.ml-avatar-violet { background: var(--ml-violet); }
.ml-avatar-alert { background: var(--ml-alert); }
.ml-avatar-ink { background: var(--ml-ink); }
.ml-avatar-live { background: var(--ml-live); }
.ml-avatar-cyan { background: var(--ml-cyan); }
.ml-avatar-electric { background: var(--ml-electric-glow); }

/* ------------------------------------------------------------------ featured games */
.is-style-panel > .ml-games,
.is-style-panel > .ml-chamber,
.is-style-panel > .ml-feed,
.is-style-panel > .ml-devs,
.is-style-panel > .ml-panel-head,
.ml-feed > .ml-row {
	align-self: stretch;
}

.ml-games {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ml-s3);
}

.ml-game {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ml-s2);
	text-align: center;
	padding: var(--ml-s3);
}

.ml-game-name {
	font-size: var(--wp--preset--font-size--body, 16px) !important;
	color: var(--ml-ink) !important;
	letter-spacing: 0;
}

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

.ml-game-draw {
	display: flex;
	align-items: center;
	gap: var(--ml-s2);
	text-align: left;
}

.ml-game-next {
	font-size: var(--wp--preset--font-size--body, 14px);
	color: var(--ml-ink);
	font-variant-numeric: tabular-nums;
}

.ml-orb {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--ml-electric-glow), var(--ml-electric) 55%, #121a5c 100%);
	box-shadow: none;
}

.ml-orb-violet {
	background: radial-gradient(circle at 35% 30%, #d6c6ff, var(--ml-violet) 55%, #2c1670 100%);
	box-shadow: none;
}

.ml-orb-gold {
	background: radial-gradient(circle at 35% 30%, var(--ml-gold-glow), var(--ml-gold) 55%, #6b4a0c 100%);
	box-shadow: none;
}

/* an empty slot while other games are paused */
.ml-game-soon {
	justify-content: center;
	border-style: dashed !important;
}

.ml-game-soon .ml-game-name {
	color: var(--ml-muted) !important;
}

.ml-game-soon .ml-orb {
	opacity: 0.35;
	box-shadow: none;
}

.ml-play,
.ml-play .wp-block-button {
	width: 100%;
}

.ml-play .wp-block-button__link {
	width: 100%;
	padding-top: 6px;
	padding-bottom: 6px;
}

.ml-game-jackpot {
	color: var(--ml-muted);
	text-transform: none;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ top agents */
.ml-tabs {
	display: flex;
	gap: var(--ml-s1);
}

.ml-tab {
	font-size: var(--wp--preset--font-size--caption, 11px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ml-muted);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-xs);
	padding: 2px var(--ml-s2);
	line-height: 14px;
}

/* chips and tabs that link: the whole pill is the target, at least 26px tall */
.ml-chip a,
.ml-tab a {
	position: relative;
	color: inherit;
	text-decoration: none;
}

.ml-chip a::before,
.ml-tab a::before {
	content: "";
	position: absolute;
	inset: -6px -9px;
}

.ml-chip:hover,
.ml-chip:focus-within,
.ml-tab:hover,
.ml-tab:focus-within {
	color: var(--ml-violet-bright);
	border-color: var(--ml-violet);
}

.ml-tab.is-active {
	color: var(--ml-violet-bright);
	border-color: var(--ml-violet);
	background: var(--ml-tile);
}

.ml-table {
	margin: 0;
}

.ml-table table {
	border-collapse: collapse;
	width: 100%;
}

.ml-table td {
	border: 0;
	border-bottom: 1px solid var(--ml-line);
	padding: 10px var(--ml-s2);
	vertical-align: middle;
}

.ml-table th {
	padding: 0 var(--ml-s2) var(--ml-s1);
	font-size: var(--wp--preset--font-size--caption, 11px);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ml-muted);
	border: 0;
	border-bottom: 1px solid var(--ml-line);
}

.ml-table th:first-child {
	padding-left: 0;
}

.ml-table th.ml-vc {
	color: var(--ml-muted);
	text-align: right;
}

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

.ml-table td:first-child {
	width: 36px;
	padding-left: 0;
}

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

.ml-vc {
	color: var(--ml-gold);
	text-align: right;
	white-space: nowrap;
}

.ml-rank {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-muted);
	border: 1px solid var(--ml-line);
}

.ml-rank-1 { background: var(--ml-gold); color: var(--ml-void); border-color: var(--ml-gold); }
.ml-rank-2 { background: var(--ml-muted); color: var(--ml-void); border-color: var(--ml-muted); }
.ml-rank-3 { background: var(--ml-violet-bright); color: var(--ml-void); border-color: var(--ml-violet-bright); }

/* ------------------------------------------------------------------ recent draws */
.ml-draw-id {
	color: var(--ml-cyan);
	font-size: var(--wp--preset--font-size--body, 14px);
	min-width: 44px;
}

.ml-tiles {
	display: flex;
	gap: 6px !important;
	flex-wrap: nowrap;
}

.is-style-tile {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 24px;
	padding: 0 2px;
	margin: 0;
	border-radius: var(--ml-r-xs);
	background: var(--ml-tile);
	border: 1px solid rgba(var(--ml-electric-rgb), 0.5);
	color: var(--ml-ink);
	font-size: var(--wp--preset--font-size--label, 13px);
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ verification */
.ml-check {
	position: relative;
	padding-left: 28px;
	font-size: var(--wp--preset--font-size--label, 13px);
	color: var(--ml-ink);
	min-width: 0;
}

.ml-check::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ml-live);
	color: var(--ml-void);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* ------------------------------------------------------------------ developer access */
.ml-devs {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ml-s3);
	margin-bottom: var(--ml-s4);
}

.ml-dev {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ml-s2);
	padding: var(--ml-s3) var(--ml-s2);
	text-align: center;
}

.ml-dev-icon {
	font-family: var(--ml-pixel);
	font-size: 18px;
	line-height: 24px;
	color: var(--ml-violet-bright);
}

.ml-dev-api::before { content: "{ }"; }
.ml-dev-mcp::before { content: "<>"; }
.ml-dev-sdk::before { content: "[#]"; }

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

.ml-dev-cta {
	font-size: var(--wp--preset--font-size--label, 13px);
}

.ml-dev-cta a {
	color: var(--ml-ink);
}

.ml-dev-cta a:hover {
	color: var(--ml-cyan);
}

/* ------------------------------------------------------------------ pages, posts, 404 */
/* The journal (blog index, archives, search), single posts, plain pages and the
   404 share one reading style: Geist on a calm panel, a 720px measure for prose,
   small uppercase kickers, and cards that lift on hover. */
.ml-page {
	padding-top: var(--ml-s12);
	padding-bottom: var(--ml-s16);
}

.ml-page-panel {
	padding: var(--ml-pad) !important;
}

.ml-kicker,
.ml-kicker a {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption, 12px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ml-violet-bright);
	text-decoration: none;
}

.ml-lead {
	margin: 0;
	max-width: 60ch;
	font-size: 18px;
	line-height: 1.55;
	color: var(--ml-muted);
}

.ml-meta {
	gap: var(--ml-s3);
	align-items: center;
	color: var(--ml-muted);
	font-size: var(--wp--preset--font-size--label, 14px);
}

.ml-meta > * + *::before {
	content: "·";
	margin-right: var(--ml-s3);
	color: var(--ml-line);
}

.ml-meta a {
	color: var(--ml-ink);
	text-decoration: none;
}

/* journal / archive / search heading */
.ml-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ml-s6);
	flex-wrap: wrap;
	margin-bottom: var(--ml-s12);
	padding: var(--ml-pad);
	background: rgba(var(--ml-void-rgb), 0.72);
	border: 1px solid rgba(var(--ml-ink-rgb), 0.1);
	border-radius: 12px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.ml-page-head-text {
	gap: var(--ml-s3);
	min-width: 0;
	flex: 1 1 24rem;
}

.ml-page-head h1,
.ml-page-head .wp-block-query-title {
	margin: 0;
	font-family: var(--ml-sans);
	font-size: var(--wp--preset--font-size--countdown, 40px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--ml-ink);
}

.ml-page-head .wp-block-term-description p {
	margin: 0;
}

/* search form */
.ml-search {
	max-width: 360px;
	width: 100%;
}

.ml-search .wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--ml-s2);
	border: 0;
	padding: 0;
}

.ml-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	box-sizing: border-box;
	background: rgba(var(--ml-void-rgb), 0.8);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	color: var(--ml-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--label, 14px);
	padding: 0 14px;
	transition: border-color 0.15s ease;
}

.ml-search .wp-block-search__input::placeholder {
	color: var(--ml-muted);
}

.ml-search .wp-block-search__input:focus {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 1px;
	border-color: transparent;
}

.ml-search .wp-block-search__button {
	margin: 0;
}

/* post cards: the newest post leads, wide; the rest sit three to a row */
.ml-post-loop .ml-post-grid > li {
	margin: 0 !important;
}

.ml-post-loop .ml-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ml-s6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-post-card {
	position: relative;
	height: 100%;
	gap: 0 !important;
	overflow: hidden;
	background: rgba(var(--ml-panel-rgb), 0.92);
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.ml-post-card:hover,
.ml-post-card:focus-within {
	border-color: rgba(var(--ml-violet-rgb), 0.6);
	transform: translateY(-2px);
}

.ml-post-thumb {
	width: 100%;
	margin: 0 !important;
	overflow: hidden;
	background: var(--ml-raised);
	border-bottom: 1px solid var(--ml-line);
}

.ml-post-thumb img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ml-post-card:hover .ml-post-thumb img {
	transform: scale(1.03);
}

/* a post without a featured image gets a slice of the city instead */
.ml-post-card:not(:has(.ml-post-thumb))::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(180deg, transparent 40%, rgba(var(--ml-panel-rgb), 0.9)), url("assets/images/city-bg.webp?v=3") 46% 0 / auto 460% no-repeat;
	background-image: linear-gradient(180deg, transparent 40%, rgba(var(--ml-panel-rgb), 0.9)), image-set(url("assets/images/city-bg.webp?v=3") 1x, url("assets/images/city-bg@2x.webp?v=3") 2x);
	border-bottom: 1px solid var(--ml-line);
}

.ml-post-card-body {
	flex: 1;
	gap: var(--ml-s3) !important;
	padding: 20px 24px 24px;
}

.ml-post-card .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading, 20px);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ml-post-card .wp-block-post-title a {
	color: var(--ml-ink);
	text-decoration: none;
}

/* the whole card is the link */
.ml-post-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ml-post-card .wp-block-post-terms a,
.ml-post-card .ml-meta {
	position: relative;
	z-index: 1;
}

.ml-post-card .wp-block-post-excerpt {
	margin: 0;
	color: var(--ml-muted);
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.55;
}

.ml-post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.ml-post-card .wp-block-post-excerpt__more-text {
	display: none;
}

.ml-post-card .ml-meta {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--caption, 12px);
}

@media (min-width: 861px) {
	body:not(.paged) .ml-journal .ml-post-grid > li:first-child {
		grid-column: 1 / -1;
	}
	body:not(.paged) .ml-journal .ml-post-grid > li:first-child .ml-post-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: stretch;
	}
	body:not(.paged) .ml-journal .ml-post-grid > li:first-child .ml-post-thumb {
		height: 100%;
		border-bottom: 0;
		border-right: 1px solid var(--ml-line);
	}
	body:not(.paged) .ml-journal .ml-post-grid > li:first-child .ml-post-card-body {
		justify-content: center;
		padding: var(--ml-s12) var(--ml-s8);
	}
	body:not(.paged) .ml-journal .ml-post-grid > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--title, 28px);
		line-height: 1.2;
	}
	body:not(.paged) .ml-journal .ml-post-grid > li:first-child .wp-block-post-excerpt {
		font-size: var(--wp--preset--font-size--body, 16px);
	}
	body:not(.paged) .ml-journal .ml-post-grid > li:first-child .ml-post-card:not(:has(.ml-post-thumb))::before {
		aspect-ratio: auto;
		height: 100%;
		min-height: 280px;
		border-bottom: 0;
		border-right: 1px solid var(--ml-line);
	}
}

@media (max-width: 1080px) {
	.ml-post-loop .ml-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ml-post-loop .ml-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ml-empty {
	gap: var(--ml-s2) !important;
	padding: var(--ml-s16) var(--ml-s6);
	text-align: center;
	background: rgba(var(--ml-panel-rgb), 0.85);
	border: 1px dashed var(--ml-line);
	border-radius: 12px;
}

.ml-empty p {
	margin: 0;
}

.ml-empty-title {
	font-size: var(--wp--preset--font-size--heading, 20px);
	font-weight: 600;
	color: var(--ml-ink);
}

/* pagination (posts and comments) */
.ml-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ml-s2);
	flex-wrap: wrap;
	margin-top: var(--ml-s12);
	font-size: var(--wp--preset--font-size--label, 14px);
}

.ml-pagination .page-numbers,
.ml-pagination .wp-block-query-pagination-previous,
.ml-pagination .wp-block-query-pagination-next,
.ml-pagination .wp-block-comments-pagination-previous,
.ml-pagination .wp-block-comments-pagination-next {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	color: var(--ml-ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.ml-pagination a:hover {
	border-color: var(--ml-violet-bright);
}

.ml-pagination .page-numbers.current {
	color: var(--ml-void);
	border-color: var(--ml-violet);
	background: var(--ml-violet);
}

.ml-pagination .page-numbers.dots {
	border-color: transparent;
}

/* single post */
.ml-post .ml-single,
.ml-post .ml-comments-panel {
	padding: var(--ml-s12) var(--ml-pad);
	background: rgba(var(--ml-panel-rgb), 0.94);
	border: 1px solid var(--ml-line);
	border-radius: 12px;
}

.ml-single-head {
	gap: var(--ml-s4) !important;
	margin-bottom: var(--ml-s8);
}

.ml-single .wp-block-post-title {
	margin: 0;
	font-family: var(--ml-sans);
	font-size: clamp(32px, 4.5vw, 48px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ml-ink);
}

.ml-single .ml-lead.wp-block-post-excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.ml-single .ml-lead .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.ml-single .ml-post-hero {
	margin: 0 auto var(--ml-s12) !important;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--ml-line);
}

.ml-single .ml-post-hero img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.ml-prose {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(var(--ml-ink-rgb), 0.9);
}

.ml-prose > * + * {
	margin-block-start: 1.25em;
}

.ml-prose h2,
.ml-prose h3 {
	margin-block-start: 2em;
	margin-block-end: 0;
	color: var(--ml-ink);
}

.ml-prose h2 {
	font-size: var(--wp--preset--font-size--title, 28px);
	letter-spacing: -0.015em;
}

.ml-prose h3 {
	font-size: var(--wp--preset--font-size--heading, 20px);
}

.ml-prose h2 + *,
.ml-prose h3 + * {
	margin-block-start: 0.6em;
}

.ml-prose a {
	color: var(--ml-violet-bright);
	text-decoration: underline;
	text-decoration-color: rgba(var(--ml-violet-bright-rgb), 0.4);
	text-underline-offset: 3px;
}

.ml-prose a:hover {
	text-decoration-color: currentColor;
}

.ml-prose ul,
.ml-prose ol {
	padding-left: 1.3em;
}

.ml-prose li + li {
	margin-top: 0.4em;
}

.ml-prose li::marker {
	color: var(--ml-violet-bright);
}

.ml-prose blockquote,
.ml-prose .wp-block-quote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--ml-violet);
	font-size: 20px;
	line-height: 1.5;
	color: var(--ml-ink);
}

.ml-prose blockquote p {
	margin: 0;
}

.ml-prose code {
	padding: 2px 6px;
	font-size: 0.88em;
	background: rgba(var(--ml-ink-rgb), 0.06);
	border-radius: 4px;
}

.ml-prose pre,
.ml-prose .wp-block-code {
	padding: 16px 20px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
	background: rgba(var(--ml-void-rgb), 0.9);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
}

.ml-prose pre code {
	padding: 0;
	background: none;
}

.ml-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ml-r-md);
}

.ml-prose hr {
	border: 0;
	border-top: 1px solid var(--ml-line);
	margin-block: 2.5em;
}

.ml-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s2);
	margin-top: var(--ml-s8);
	font-size: var(--wp--preset--font-size--caption, 12px);
}

.ml-tags .wp-block-post-terms__separator {
	display: none;
}

.ml-tags a {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--ml-line);
	border-radius: 999px;
	color: var(--ml-muted);
	text-decoration: none;
}

.ml-tags a::before {
	content: "#";
	opacity: 0.6;
}

.ml-tags a:hover {
	color: var(--ml-ink);
	border-color: var(--ml-violet-bright);
}

.ml-post-nav {
	gap: var(--ml-s3) !important;
	margin-top: var(--ml-s12);
}

.ml-post-nav .post-navigation-link-previous,
.ml-post-nav .post-navigation-link-next {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	font-size: var(--wp--preset--font-size--body, 16px);
	font-weight: 600;
	line-height: 1.35;
	border: 1px solid var(--ml-line);
	border-radius: 10px;
	transition: border-color 0.15s ease;
}

.ml-post-nav .post-navigation-link-next {
	grid-column: 2;
	text-align: right;
}

.ml-post-nav .post-navigation-link-previous:hover,
.ml-post-nav .post-navigation-link-next:hover {
	border-color: var(--ml-violet-bright);
}

.ml-post-nav a {
	color: var(--ml-ink);
	text-decoration: none;
}

.ml-post-nav a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ml-post-nav .post-navigation-link__label {
	order: -1;
	font-size: var(--wp--preset--font-size--caption, 12px);
	font-weight: 500;
	color: var(--ml-muted);
}

.ml-post-nav .post-navigation-link-previous .post-navigation-link__label::before {
	content: "← ";
}

.ml-post-nav .post-navigation-link-next .post-navigation-link__label::after {
	content: " →";
}

@media (max-width: 640px) {
	.ml-post-nav .post-navigation-link-next {
		grid-column: auto;
	}
}

/* comments */
.ml-comments-panel {
	margin-top: var(--ml-s6);
}

.ml-comments .wp-block-comments-title,
.ml-comments .comment-reply-title {
	margin: 0 0 var(--ml-s6);
	font-size: var(--wp--preset--font-size--heading, 20px);
}

.ml-comments .wp-block-comment-template {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ml-comments .wp-block-comment-template > li + li {
	margin-top: var(--ml-s4);
	padding-top: var(--ml-s4);
	border-top: 1px solid var(--ml-line);
}

.ml-comments .wp-block-comment-template .children {
	list-style: none;
	padding-left: var(--ml-s8);
	margin: var(--ml-s4) 0 0;
}

.ml-comment {
	gap: var(--ml-s3);
}

.ml-comment .wp-block-avatar img {
	border: 1px solid var(--ml-line);
}

.ml-comment-body {
	flex: 1;
	min-width: 0;
	gap: var(--ml-s1);
}

.ml-comment-body .wp-block-comment-author-name {
	font-weight: 600;
	color: var(--ml-ink);
}

.ml-comment-body .wp-block-comment-content p {
	margin: 0;
}

.ml-comment-body .wp-block-comment-content p + p {
	margin-top: var(--ml-s2);
}

.ml-comment-body .wp-block-comment-reply-link,
.ml-comment-body .wp-block-comment-edit-link {
	font-size: var(--wp--preset--font-size--caption, 12px);
}

.ml-comments .comment-respond {
	margin-top: var(--ml-s8);
}

.ml-comments .wp-block-comment-template + .comment-respond,
.ml-comments .wp-block-comments-pagination + .comment-respond {
	padding-top: var(--ml-s8);
	border-top: 1px solid var(--ml-line);
}

.ml-comments .comment-notes,
.ml-comments .logged-in-as {
	margin: 0 0 var(--ml-s6);
	font-size: var(--wp--preset--font-size--label, 14px);
	color: var(--ml-muted);
}

.ml-comments .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ml-s4);
}

.ml-comments .comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
}

.ml-comments .comment-form .comment-form-author,
.ml-comments .comment-form .comment-form-email {
	grid-column: auto;
}

.ml-comments .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--label, 14px);
	font-weight: 500;
	color: var(--ml-ink);
}

.ml-comments .comment-form .required {
	color: var(--ml-muted);
}

.ml-comments .comment-form input[type="text"],
.ml-comments .comment-form input[type="email"],
.ml-comments .comment-form input[type="url"],
.ml-comments .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	background: rgba(var(--ml-void-rgb), 0.8);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	color: var(--ml-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--body, 16px);
	padding: 10px 14px;
}

.ml-comments .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.ml-comments .comment-form input:focus,
.ml-comments .comment-form textarea:focus {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 1px;
	border-color: transparent;
}

.ml-comments .comment-form .submit {
	min-height: 44px;
	padding: 0 20px;
	font: inherit;
	font-size: var(--wp--preset--font-size--label, 14px);
	font-weight: 600;
	color: var(--ml-void);
	background: var(--ml-violet);
	border: 0;
	border-radius: var(--ml-r-md);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ml-comments .comment-form .submit:hover {
	background: var(--ml-violet-bright);
}

.ml-comments .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--ml-s2);
}

.ml-comments .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--ml-muted);
}

@media (max-width: 640px) {
	.ml-comments .comment-form .comment-form-author,
	.ml-comments .comment-form .comment-form-email {
		grid-column: 1 / -1;
	}
	.ml-page-head h1,
	.ml-page-head .wp-block-query-title {
		font-size: var(--wp--preset--font-size--title, 28px);
	}
	.ml-search {
		max-width: none;
	}
}

/* 404 */
.ml-404 {
	gap: var(--ml-s4) !important;
	max-width: 640px;
	margin: 0 auto;
	padding: var(--ml-s12) var(--ml-pad);
	text-align: center;
	background: rgba(var(--ml-void-rgb), 0.78);
	border: 1px solid rgba(var(--ml-ink-rgb), 0.1);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ml-404 > * {
	margin: 0 !important;
}

.ml-404-code {
	font-family: var(--ml-pixel);
	font-weight: 700;
	font-size: clamp(72px, 14vw, 128px);
	line-height: 1;
	color: var(--ml-ink);
	opacity: 0.9;
}

.ml-404 h1 {
	font-family: var(--ml-sans);
	font-size: var(--wp--preset--font-size--title, 28px);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ml-ink);
}

.ml-404 .ml-lead {
	margin-inline: auto !important;
	font-size: var(--wp--preset--font-size--body, 16px);
}

.ml-404 .ml-search {
	max-width: 420px;
	margin: var(--ml-s2) auto 0 !important;
}

.ml-404-links {
	width: 100%;
	gap: var(--ml-s3) !important;
	margin-top: var(--ml-s4) !important;
	text-align: left;
}

.ml-404-links p {
	margin: 0;
}

.ml-404-links a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	color: var(--ml-ink);
	text-decoration: none;
	border: 1px solid var(--ml-line);
	border-radius: 10px;
	background: rgba(var(--ml-ink-rgb), 0.02);
	transition: border-color 0.15s ease;
}

.ml-404-links a:hover {
	border-color: var(--ml-violet-bright);
}

.ml-404-links strong {
	font-weight: 600;
}

.ml-404-links span {
	font-size: var(--wp--preset--font-size--label, 14px);
	color: var(--ml-muted);
}

@media (max-width: 480px) {
	.ml-404-links {
		grid-template-columns: 1fr !important;
	}
}

/* ------------------------------------------------------------------ footer */
.ml-footer {
	background: rgba(var(--ml-void-rgb), 0.94);
	border-top: 1px solid var(--ml-line);
	padding-top: var(--ml-s6);
	padding-bottom: var(--ml-s6);
	margin-top: 0 !important;
}

.ml-footer-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ml-s6);
	flex-wrap: wrap;
}

.ml-footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s1);
	max-width: 520px;
}

.ml-footer-mark {
	font-family: var(--ml-pixel);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sign, 20px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ml-violet);
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
	.ml-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.ml-games,
	.ml-devs {
		grid-template-columns: minmax(0, 1fr);
	}
	.ml-games {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ml-games {
		grid-template-columns: minmax(0, 1fr);
	}
	.ml-chamber {
		gap: var(--ml-s1);
		padding: var(--ml-s4) var(--ml-s2);
	}
	.ml-tube::before,
	.ml-tube::after {
		left: -2px;
		right: -2px;
	}
	.is-style-ball {
		width: 84%;
		font-size: 16px;
		border-width: 2px;
	}
	.ml-jackpot-cells {
		flex-direction: column;
	}
	.ml-cell + .ml-cell {
		border-left: 0;
		border-top: 1px solid var(--ml-line);
	}
	.is-style-countdown,
	.ml-units {
		font-size: 32px;
		line-height: 36px;
	}
	.ml-units {
		line-height: 1;
	}
	.ml-tiles {
		gap: 3px !important;
	}
	.is-style-tile {
		min-width: 22px;
		font-size: 11px;
	}
	.ml-comments .wp-block-comment-template .children {
		padding-left: var(--ml-s3);
	}
	.ml-page-panel {
		padding: var(--ml-s4) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ wallet (inc/wallet.php, assets/js/wallet.js) */
.ml-wallet-btn.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ml-s2);
	background: transparent;
	border: 1px solid var(--ml-line);
	color: var(--ml-ink);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--label, 14px);
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ml-wallet-btn.wp-block-button__link:hover,
.ml-wallet-btn.wp-block-button__link:focus-visible {
	background: transparent;
	border-color: var(--ml-violet-bright);
	color: var(--ml-ink);
	box-shadow: none;
}

.ml-wallet-btn.wp-block-button__link::before {
	/* pixel wallet */
	content: "";
	width: 16px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 2px;
	box-sizing: border-box;
	background: linear-gradient(currentColor, currentColor) right 2px center / 4px 3px no-repeat;
}

/* (the connected state is set again after the button set, at the end of this file) */

.ml-wallet-btn .ml-wallet-label {
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mlw {
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	color: var(--ml-ink);
	background: var(--ml-panel);
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.mlw[open] {
	animation: mlw-in 0.18s ease-out;
}

@keyframes mlw-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

.mlw::backdrop {
	background: rgba(2, 4, 13, 0.75);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.mlw-box {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
}

.mlw-box p {
	margin: 0;
}

.mlw-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ml-s4);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ml-line);
}

.mlw-title {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--heading, 20px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ml-ink);
}

.mlw-close {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--ml-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ml-r-md);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.mlw-close:hover {
	color: var(--ml-ink);
	background: rgba(var(--ml-ink-rgb), 0.06);
}

.mlw-net {
	display: flex;
	align-items: center;
	gap: var(--ml-s2);
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
}

.mlw-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ml-live);
}

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

/* choose a wallet */
.mlw-list {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s2);
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.mlw-wallet {
	display: flex;
	align-items: center;
	gap: var(--ml-s3);
	width: 100%;
	min-height: 56px;
	padding: var(--ml-s2) var(--ml-s4);
	color: var(--ml-ink);
	background: rgba(var(--ml-ink-rgb), 0.03);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mlw-wallet::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1.5px solid var(--ml-muted);
	border-right: 1.5px solid var(--ml-muted);
	transform: rotate(45deg);
}

.mlw-wallet:hover,
.mlw-wallet:focus-visible {
	border-color: var(--ml-violet-bright);
	background: rgba(var(--ml-violet-rgb), 0.08);
}

.mlw-wallet img {
	width: 32px;
	height: 32px;
	border-radius: 8px;
}

.mlw-wname {
	flex: 1;
	font-weight: 600;
}

.mlw-ver {
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
}

/* no wallet found */
.mlw-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ml-s2);
	text-align: center;
}

.mlw-empty-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--ml-s2);
	color: var(--ml-violet-bright);
	background: rgba(var(--ml-violet-rgb), 0.12);
	border-radius: 50%;
}

.mlw-empty-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body, 16px);
	font-weight: 600;
	color: var(--ml-ink);
}

.mlw-none {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mlw-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mlw;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
}

.mlw-steps li {
	position: relative;
	padding: 12px 16px 12px 52px;
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.45;
	color: var(--ml-muted);
	counter-increment: mlw;
}

.mlw-steps li + li {
	border-top: 1px solid var(--ml-line);
}

.mlw-steps li::before {
	content: counter(mlw);
	position: absolute;
	left: 16px;
	top: 12px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ml-ink);
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: 50%;
}

.mlw-steps strong {
	color: var(--ml-ink);
	font-weight: 600;
}

/* waiting */
.mlw-busy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ml-s4);
	padding: var(--ml-s8) 0;
	text-align: center;
	color: var(--ml-muted);
}

.mlw-busy[hidden],
.mlw-on[hidden],
.mlw-pick[hidden],
.mlw-none[hidden],
[data-wallet-some][hidden] {
	display: none;
}

.mlw-spin {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 2.5px solid rgba(var(--ml-violet-rgb), 0.25);
	border-top-color: var(--ml-violet-bright);
	border-radius: 50%;
	animation: mlw-spin 0.8s linear infinite;
}

@keyframes mlw-spin {
	to {
		transform: rotate(360deg);
	}
}

/* connected */
.mlw-on {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s4);
}

.mlw-who {
	display: flex;
	align-items: center;
	gap: var(--ml-s3);
}

.mlw-who-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	overflow: hidden;
	font-weight: 600;
	font-size: 18px;
	color: var(--ml-ink);
	background: var(--ml-raised);
	border: 1px solid var(--ml-line);
	border-radius: 10px;
}

.mlw-who-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mlw-who-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mlw-who-name {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body, 16px);
}

.mlw-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-live);
}

.mlw-addr-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px var(--ml-s3);
	padding: 12px 14px;
	background: rgba(var(--ml-void-rgb), 0.6);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
}

.mlw-label,
.mlw-stats dt {
	grid-column: 1 / -1;
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
}

.mlw-addr {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--ml-ink);
	background: none;
	padding: 0;
}

.mlw-chip {
	min-height: 30px;
	padding: 0 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ml-ink);
	background: transparent;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-sm);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.mlw-chip:hover {
	border-color: var(--ml-violet-bright);
}

.mlw-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ml-s3);
	margin: 0;
}

.mlw-stats > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	background: rgba(var(--ml-ink-rgb), 0.03);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
}

.mlw-stats dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--body, 16px);
	font-weight: 600;
}

.mlw-stats .mlw-night {
	font-family: var(--ml-pixel);
	font-weight: 700;
	font-size: 18px;
	color: var(--ml-gold);
}

.mlw-unit {
	font-family: var(--ml-sans);
	font-size: var(--wp--preset--font-size--label, 14px);
	font-weight: 500;
	color: var(--ml-muted);
}

.mlw-hint {
	padding: 12px 14px;
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.45;
	color: var(--ml-ink);
	background: rgba(var(--ml-gold-rgb), 0.08);
	border: 1px solid rgba(var(--ml-gold-rgb), 0.3);
	border-radius: var(--ml-r-md);
}

.mlw-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s2);
}

.mlw-actions .mlw-btn:first-child {
	flex: 1 1 100%;
}

.mlw-actions .mlw-btn-ghost {
	flex: 1 1 0;
}

.mlw .mlw-btn-quiet {
	color: var(--ml-muted) !important;
}

/* .mlw-btn and .mlw-btn-ghost use the button set below (Buttons) */

.mlw-error {
	display: flex;
	gap: var(--ml-s2);
	padding: 12px 14px;
	color: #ffd0d8;
	background: rgba(var(--ml-alert-rgb), 0.1);
	border: 1px solid rgba(var(--ml-alert-rgb), 0.4);
	border-radius: var(--ml-r-md);
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.45;
}

.mlw-error::before {
	content: "!";
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ml-void);
	background: var(--ml-alert);
	border-radius: 50%;
}

.mlw-error[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.mlw-box {
		padding: 20px;
	}
	.mlw-stats {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlw[open] {
		animation: none;
	}
}

/* ------------------------------------------------------------------ buttons */
/* One button set for the whole site: block buttons (.wp-element-button), the
   page buttons (.mlg-btn) and the wallet dialog's (.mlw-btn). Primary is violet
   with dark text; secondary (-ghost) is an outline. Two sizes: 44px, and 36px
   with .is-small. Every button has hover, pressed, focus and disabled states. */
.mlg-btn,
.mlw-btn,
.wp-element-button,
.wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ml-s2);
	min-height: 44px;
	padding: 0 20px;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--label, 14px);
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: var(--ml-void) !important;
	background: var(--ml-violet);
	border: 1px solid transparent;
	border-radius: var(--ml-r-md);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.mlg-btn:hover,
.mlw-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--ml-violet-bright);
	box-shadow: none;
}

.mlg-btn:active,
.mlw-btn:active,
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.mlg-btn:focus-visible,
.mlw-btn:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 2px;
	box-shadow: none;
}

.mlg-btn[disabled],
.mlg-btn[aria-disabled="true"],
.mlw-btn[disabled],
.wp-element-button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.mlg-btn-ghost,
.mlw-btn-ghost,
.is-style-outline > .wp-block-button__link,
.ml-wallet-btn.wp-block-button__link {
	color: var(--ml-ink) !important;
	background: transparent;
	border-color: var(--ml-line);
}

.mlg-btn-ghost:hover,
.mlw-btn-ghost:hover,
.is-style-outline > .wp-block-button__link:hover,
.ml-wallet-btn.wp-block-button__link:hover {
	background: rgba(var(--ml-ink-rgb), 0.04);
	border-color: var(--ml-violet-bright);
}

.mlg-btn.is-small,
.mlw-btn.is-small {
	min-height: 36px;
	padding: 0 14px;
}

/* the header wallet button once a wallet is connected (wallet.js adds .is-on) */
.ml-wallet-btn.wp-block-button__link.is-on {
	color: var(--ml-live) !important;
	border-color: var(--ml-live);
}

/* phones: the home Top agents table keeps rank, agent and winnings on one line */
@media (max-width: 479px) {
	.ml-table th:nth-child(3),
	.ml-table td:nth-child(3) {
		display: none;
	}
	.ml-table .ml-agent {
		word-break: normal;
		overflow-wrap: normal;
		white-space: nowrap;
	}
	.ml-table .ml-vc {
		white-space: nowrap;
	}
}

/* long page titles (search, archives) wrap instead of running off small phones */
h1,
.wp-block-query-title {
	overflow-wrap: anywhere;
}

@media (max-width: 479px) {
	h1,
	.wp-block-query-title {
		font-size: var(--wp--preset--font-size--title, 28px);
	}
}

/* vary the city slice between image-less cards */
.ml-post-grid > li:nth-child(3n + 1) .ml-post-card:not(:has(.ml-post-thumb))::before {
	background-position: 18% 0;
}

.ml-post-grid > li:nth-child(3n + 2) .ml-post-card:not(:has(.ml-post-thumb))::before {
	background-position: 82% 0;
}

/* single post: no empty "Next" card on the newest post; no gap above the form when there are no comments */
.ml-post-nav .wp-block-post-navigation-link:empty {
	display: none;
}

.ml-comments > .comment-respond:first-child {
	margin-top: 0;
}

.ml-empty .wp-block-buttons {
	margin-top: var(--ml-s4);
}

/* ------------------------------------------------------------------ connect agent dialog (inc/connect.php) */
.mlc-routes {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mlc-route {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	color: var(--ml-ink);
	text-decoration: none;
	background: rgba(var(--ml-ink-rgb), 0.03);
	border: 1px solid var(--ml-line);
	border-radius: 10px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mlc-route:hover,
.mlc-route:focus-visible {
	border-color: var(--ml-violet-bright);
	background: rgba(var(--ml-violet-rgb), 0.08);
}

.mlc-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--ml-violet-bright);
	background: rgba(var(--ml-violet-rgb), 0.12);
	border-radius: 10px;
}

.mlc-route-city .mlc-icon {
	color: var(--ml-cyan);
	background: rgba(var(--ml-cyan-rgb), 0.1);
}

.mlc-route-self .mlc-icon {
	color: var(--ml-neon);
	background: rgba(var(--ml-neon-rgb), 0.1);
}

.mlc-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mlc-text strong {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body, 16px);
}

.mlc-text span {
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.4;
	color: var(--ml-muted);
}

.mlc-cta {
	font-size: var(--wp--preset--font-size--caption, 12px);
	font-weight: 600;
	color: var(--ml-violet-bright);
	white-space: nowrap;
}

.mlc-cta::after {
	content: " →";
}

.mlc-foot {
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
	text-align: center;
}

@media (max-width: 480px) {
	.mlc-route {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.mlc-cta {
		grid-column: 2;
	}
}

/* the wallet's own words under a wallet error (1.31.7) */
.mlw-error-detail {
	display: block;
	margin-top: 4px;
	font-family: var(--ml-mono);
	font-size: 12px;
	opacity: 0.75;
	word-break: break-word;
}

.mlw-error-action {
	display: block;
	margin-top: 10px;
}

/* Live draws: from sales close until the next draw opens a countdown shows "Drawing…" (countdown.js adds .is-done). */
.is-style-countdown.is-done,
.ml-game-next.is-done {
	animation: ml-drawing-pulse 1.6s ease-in-out infinite;
}
@keyframes ml-drawing-pulse {
	50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
	.is-style-countdown.is-done,
	.ml-game-next.is-done { animation: none; }
}

/* Number Chamber: new numbers arrive (live.js adds .is-new, staggered) */
.is-style-ball.is-new,
.ml-stage .ml-s-ball.is-new {
	animation: ml-ball-new 2.2s ease-out both;
}
@keyframes ml-ball-new {
	0% { opacity: 0; filter: brightness(2.6) blur(2px); }
	25% { opacity: 1; filter: brightness(2.2); }
	100% { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
	.is-style-ball.is-new,
	.ml-stage .ml-s-ball.is-new { animation: none; }
}

/* Draw time (inc/drawtime.php): the hero's "Est. draw time ?" button and the "Why?" dialog */
.ml-drawtime-why {
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
.ml-drawtime-why:hover,
.ml-drawtime-why:focus-visible {
	color: var(--ml-cyan);
}
.ml-why-mark {
	display: inline-block;
	min-width: 1.4em;
	line-height: 1.4em;
	margin-left: 4px;
	text-align: center;
	border: 1px solid currentColor;
	border-radius: 50%;
}
.mldt-steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mldt-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	padding: 12px 14px;
	background: rgba(var(--ml-ink-rgb), 0.03);
	border: 1px solid var(--ml-line);
	border-radius: 10px;
}
.mldt-num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	font-family: var(--ml-mono);
	font-size: 13px;
	color: var(--ml-cyan);
	background: rgba(var(--ml-cyan-rgb), 0.1);
	border-radius: 50%;
}
.mldt-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.mldt-text strong {
	font-weight: 600;
}
.mldt-text > span {
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.45;
	color: var(--ml-muted);
}
.mldt-time {
	margin-left: 6px;
	font-family: var(--ml-mono);
	font-size: 12px;
	font-weight: 400;
	color: var(--ml-cyan);
	white-space: nowrap;
}
.mldt-foot {
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
}
.mldt-foot a {
	color: var(--ml-violet-bright);
}

/* ------------------------------------------------------------------ live health (inc/health.php) */
/* the top bar's status line: dot green / amber / red by how fresh the feed is */
.ml-testbar .ml-health {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ml-ink);
}
.ml-testbar .ml-health::before {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 2px 0 0;
	border-radius: 50%;
	background: var(--ml-live);
}
.ml-testbar .ml-health.is-slow::before { background: #f2c44a; }
.ml-testbar .ml-health.is-down::before { background: #ff6b6b; }
.ml-health-age { color: var(--ml-muted); white-space: pre; }

/* alerts above everything: feed delayed, a draw cancelled, the test contract's rules */
.ml-alerts { position: relative; z-index: 21; }
.ml-alert {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding: 9px 16px;
	font-size: var(--wp--preset--font-size--label, 13px);
	line-height: 1.45;
	color: var(--ml-ink);
	border-bottom: 1px solid var(--ml-line);
	background: rgba(var(--ml-violet-rgb), 0.16);
}
.ml-alert[hidden], .ml-hide-alert-v0 [data-ml-alert="v0"], .ml-hide-alert-preprod [data-ml-alert="preprod"] { display: none; }
.ml-alert p { margin: 0; max-width: 1100px; }
.ml-alert a { color: var(--ml-violet-bright); white-space: nowrap; }
.ml-alert.is-warn { background: rgba(242, 196, 74, 0.12); }
.ml-alert.is-warn a { color: #f2c44a; }
.ml-alert.is-error { background: rgba(255, 107, 107, 0.14); }
.ml-alert.is-error a { color: #ff9b9b; }
.ml-alert-close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--ml-muted);
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.ml-alert-close:hover, .ml-alert-close:focus-visible { color: var(--ml-ink); background: rgba(var(--ml-ink-rgb), 0.08); }
@media (max-width: 719px) {
	/* phones: the top bar keeps the draw status, without "· updated …" or the badge's second part */
	.ml-health-age,
	.ml-testbar:has(.ml-health) .ml-sim-sub { display: none; }
	.ml-alert { justify-content: space-between; }
}

/* "Simulated" notice on the Agents and Leaderboard pages while draws are live (inc/activity.php) */
.mlg-sim-notice {
	margin: 0 0 var(--ml-s6);
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.5;
	color: var(--ml-ink);
	background: rgba(242, 196, 74, 0.08);
	border: 1px solid rgba(242, 196, 74, 0.35);
	border-radius: 10px;
}
.mlg-sim-notice strong {
	margin-right: 6px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f2c44a;
}
.mlg-sim-notice a { color: var(--ml-violet-bright); }
.ml-sim-tag { color: #f2c44a; border-color: rgba(242, 196, 74, 0.45); }
.ml-sim-tag::before { background: #f2c44a; }

/* ------------------------------------------------------------------ Rules and FAQ (inc/rules.php) */
.mlr .mlg-panel + .mlg-panel { margin-top: var(--ml-s6); }
.mlr-sec { scroll-margin-top: 110px; }
.mlr-sec p, .mlr-list li { line-height: 1.6; }
.mlr-sec p { margin: 0 0 12px; }
.mlr-toc ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	counter-reset: mlr;
}
.mlr-toc li a {
	display: inline-block;
	padding: 6px 12px;
	font-size: var(--wp--preset--font-size--label, 14px);
	color: var(--ml-ink);
	text-decoration: none;
	border: 1px solid var(--ml-line);
	border-radius: 999px;
}
.mlr-toc li a:hover, .mlr-toc li a:focus-visible { border-color: var(--ml-violet-bright); }
.mlr-toc p { margin: 0; }
.mlr-list { margin: 0 0 12px; padding-left: 1.3em; }
.mlr-list li + li { margin-top: 6px; }
.mlr-test { border-color: rgba(242, 196, 74, 0.4); }
.mlr .mlg-table { width: 100%; margin: 4px 0 14px; }
.mlr .mlg-table-wrap { overflow-x: auto; }
.mlr-faq { padding-top: 6px; padding-bottom: 6px; }
.mlr-q { border-bottom: 1px solid var(--ml-line); }
.mlr-q:last-child { border-bottom: 0; }
.mlr-q summary {
	padding: 14px 0;
	font-weight: 600;
	cursor: pointer;
	list-style-position: inside;
}
.mlr-q summary:hover { color: var(--ml-cyan); }
.mlr-q p { margin: 0 0 16px; line-height: 1.6; color: var(--ml-muted); }
.mlr-more { margin-top: var(--ml-s4); }
.mlr a { color: var(--ml-violet-bright); }

/* the purchase progress list: long errors (big numbers, addresses) wrap instead of running off the panel */
[data-play-progress] li {
	overflow-wrap: anywhere;
}