/*
 * The Starfall page (inc/starfall-page.php): header, tabs, Quick play /
 * Create your own, results, how to play. Builds on games.css.
 */

.mlsf {
	--sf-gap: var(--ml-s6, 24px);
}

/* ------------------------------------------------------------ header */

.mlsf-head {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--sf-gap);
	align-items: center;
}

.mlsf-title {
	margin: 4px 0 6px;
}

.mlsf .mlsf-format {
	margin: 0;
	font-size: var(--wp--preset--font-size--body, 16px);
	color: var(--ml-ink);
}

.mlsf .mlsf-price {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--label, 14px);
	color: var(--ml-muted);
}

.mlsf-draw {
	padding: var(--ml-s4) var(--ml-s4);
	text-align: center;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-void-rgb), 0.45);
}

.mlsf .mlsf-k {
	margin: 0 0 6px;
	font-family: var(--ml-pixel);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.mlsf .mlsf-sub {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
}

.mlsf-pot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ml-s3);
}

.mlsf-pot .mlg-jp-block {
	margin: 0;
}

.mlsf-cta {
	min-width: 180px;
}

@media (max-width: 900px) {
	.mlsf-head {
		grid-template-columns: 1fr;
		gap: var(--ml-s4);
	}

	.mlsf-draw {
		text-align: left;
	}

	.mlsf-cta {
		width: 100%;
	}
}

/* ------------------------------------------------------------ tabs */

.mlsf-tabs {
	display: flex;
	gap: 4px;
	margin: var(--sf-gap) 0 var(--ml-s4);
	padding: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-panel-rgb), 0.85);
}

.mlsf-tabs::-webkit-scrollbar {
	display: none;
}

.mlsf-tab {
	flex: 1 0 auto;
	padding: 10px 18px;
	font-size: var(--wp--preset--font-size--label, 14px);
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	color: var(--ml-muted);
	border-radius: var(--ml-r-sm);
}

.mlsf-tab:hover {
	color: var(--ml-ink);
	background: rgba(var(--ml-violet-rgb), 0.12);
}

.mlsf-tab.is-on {
	color: #fff;
	background: var(--ml-violet);
}

.mlsf-tab:focus-visible {
	outline: 2px solid var(--ml-cyan);
	outline-offset: 2px;
}

/* the script shows one tab's content at a time; without it every tab shows */
.mlsf-js .mlsf-panel:not(.is-on) {
	display: none;
}

.mlsf-panel > * + * {
	margin-top: var(--sf-gap);
}

/* ------------------------------------------------------------ play */

.mlsf .mlp {
	margin-top: 0;
}

.mlp-ways {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ml-s3);
	margin: var(--ml-s4) 0 var(--sf-gap);
}

.mlp-way {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--ml-s4);
	font: inherit;
	text-align: left;
	color: var(--ml-ink);
	cursor: pointer;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-void-rgb), 0.45);
	transition: border-color 0.15s, background 0.15s;
}

.mlp-way strong {
	font-size: var(--wp--preset--font-size--body, 16px);
}

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

.mlp-way:hover {
	border-color: rgba(var(--ml-violet-rgb), 0.7);
}

.mlp-way.is-on {
	border-color: var(--ml-violet);
	background: rgba(var(--ml-violet-rgb), 0.16);
	box-shadow: inset 0 0 0 1px var(--ml-violet);
}

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

.mlp-way.is-soon {
	cursor: default;
	opacity: 0.55;
	border-style: dashed;
}

@media (max-width: 640px) {
	.mlp-ways {
		grid-template-columns: 1fr 1fr;
	}

	.mlp-way.is-soon {
		grid-column: 1 / -1;
	}
}

.mlsf .mlp-step {
	display: flex;
	align-items: center;
	gap: var(--ml-s2);
	margin: var(--ml-s6) 0 var(--ml-s3);
	font-weight: 600;
	color: var(--ml-ink);
}

.mlsf .mlp-form > div > .mlp-step:first-child {
	margin-top: 0;
}

.mlp-step-n {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	border-radius: 50%;
	background: var(--ml-violet);
}

.mlsf .mlp-step .mlp-count {
	margin-left: auto;
}

/* package cards */
.mlp-packs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--ml-s3);
	margin-bottom: var(--ml-s3);
}

.mlp-pack {
	display: grid;
	gap: 2px;
	padding: var(--ml-s3) var(--ml-s4);
	font: inherit;
	text-align: left;
	color: var(--ml-ink);
	cursor: pointer;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-void-rgb), 0.45);
	transition: border-color 0.15s, background 0.15s;
}

.mlp-pack:hover {
	border-color: rgba(var(--ml-violet-rgb), 0.7);
}

.mlp-pack.is-on {
	border-color: var(--ml-gold);
	background: rgba(var(--ml-gold-rgb), 0.1);
	box-shadow: inset 0 0 0 1px var(--ml-gold);
}

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

.mlp-pack-name {
	font-weight: 700;
}

.mlp-pack-games,
.mlp-pack-tx {
	font-size: var(--wp--preset--font-size--caption, 12px);
	color: var(--ml-muted);
}

.mlp-pack-price {
	margin-top: 4px;
	font-family: var(--ml-mono);
	font-size: 15px;
	color: var(--ml-gold);
}

/* entry-type buttons */
.mlp-kinds {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s2);
	margin-bottom: var(--ml-s3);
}

.mlp-kinds .mlp-chip {
	min-width: 96px;
	min-height: 40px;
}

.mlsf-js [data-play-panel="choose"] .mlp-select[data-play-entry].is-hidden {
	display: none;
}

.mlp-add {
	width: 100%;
}

/* the summary */
.mlsf .mlp-side-title {
	margin: 0 0 var(--ml-s3);
	font-size: var(--wp--preset--font-size--body, 16px);
}

.mlp-sum .mlp-total {
	padding-top: var(--ml-s2);
	border-top: 1px solid var(--ml-line);
}

.mlp-sum .mlp-total dd {
	font-family: var(--ml-mono);
	font-size: 22px;
	color: var(--ml-gold);
}

@media (min-width: 901px) {
	.mlsf .mlp-side {
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

/* accessible-only text and the package select the cards drive */
.mlp-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------ balls */

.mlsf-balls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mlsf-ball {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	font-family: var(--ml-mono);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	color: #f4f6ff;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(var(--ml-electric-glow-rgb), 0.55), rgba(var(--ml-electric-rgb), 0.85) 60%, #1a237a);
	box-shadow: 0 0 0 1px rgba(var(--ml-electric-glow-rgb), 0.5);
}

.mlsf-ball-bonus {
	color: #1a1204;
	font-weight: 700;
	background: radial-gradient(circle at 35% 30%, var(--ml-gold-glow), var(--ml-gold) 60%, #a07a16);
	box-shadow: 0 0 0 1px var(--ml-gold-glow);
}

.mlsf-plus {
	padding: 0 2px;
	font-weight: 700;
	color: var(--ml-muted);
}

/* ------------------------------------------------------------ results */

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

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

.mlsf-js .mlsf-res:not(.is-on) {
	display: none;
}

.mlsf-res + .mlsf-res {
	margin-top: var(--sf-gap);
}

.mlsf-res-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ml-s2) var(--ml-s4);
	margin-bottom: var(--ml-s3);
}

.mlsf-res-head h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading, 22px);
}

.mlsf-res-head p {
	margin: 0;
}

.mlsf-res-balls {
	padding: var(--ml-s4);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-void-rgb), 0.45);
}

.mlsf-k-b {
	float: right;
	color: var(--ml-gold);
}

.mlsf .mlsf-res-jp {
	margin: var(--ml-s3) 0;
	color: var(--ml-muted);
}

.mlsf .mlsf-res-jp.is-won {
	font-weight: 700;
	color: var(--ml-gold);
}

.mlsf .mlsf-res-void {
	padding: var(--ml-s3) var(--ml-s4);
	color: var(--ml-ink);
	border: 1px dashed rgba(var(--ml-alert-rgb), 0.6);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-alert-rgb), 0.08);
}

.mlsf .mlsf-res-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s4);
	margin: var(--ml-s3) 0 0;
	font-size: var(--wp--preset--font-size--label, 14px);
}

.mlsf-check {
	margin-top: var(--sf-gap);
	padding-top: var(--sf-gap);
	border-top: 1px solid var(--ml-line);
}

.mlsf-check h3 {
	margin: 0 0 4px;
}

.mlsf-check-form {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto 80px auto;
	align-items: center;
	gap: var(--ml-s2) var(--ml-s3);
	margin-top: var(--ml-s3);
}

.mlsf-check-form .mlp-label {
	margin: 0;
}

.mlsf-input {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 700px) {
	.mlsf-check-form {
		grid-template-columns: 1fr;
	}
}

.mlsf .mlsf-check-out {
	min-height: 1.5em;
	margin: var(--ml-s3) 0 0;
	font-weight: 600;
}

.mlsf-check-out.is-win {
	color: var(--ml-gold);
}

.mlsf-check-out.is-bad {
	color: var(--ml-alert);
}

/* ------------------------------------------------------------ how to play */

.mlsf-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ml-s3);
	margin: var(--ml-s4) 0 var(--sf-gap);
	padding: 0;
	list-style: none;
}

.mlsf-step {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--ml-s4);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-void-rgb), 0.45);
}

.mlsf-step-n {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	font-weight: 700;
	color: #fff;
	border-radius: 50%;
	background: var(--ml-violet);
}

.mlsf-step .mlg-muted {
	font-size: var(--wp--preset--font-size--label, 14px);
	line-height: 1.45;
}

@media (max-width: 1000px) {
	.mlsf-steps {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.mlsf-steps {
		grid-template-columns: 1fr;
	}
}

.mlsf-pools-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ml-s3);
	margin: var(--ml-s4) 0;
}

.mlsf-pool {
	padding: var(--ml-s4);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	background: rgba(var(--ml-void-rgb), 0.45);
}

.mlsf-pool p {
	margin: 0;
}

.mlsf-pool .mlsf-pool-range {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--ml-s3);
}

.mlsf-dots {
	letter-spacing: 2px;
	color: var(--ml-muted);
}

.mlsf-div1 {
	font-family: var(--ml-pixel);
	color: var(--ml-gold);
}

.mlsf-dotrow {
	display: inline-flex;
	gap: 3px;
}

.mlsf-dotrow i,
.mlsf-dot-b {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ml-electric);
}

.mlsf-dot-b {
	background: var(--ml-gold);
}

@media (max-width: 800px) {
	.mlsf-pools-grid {
		grid-template-columns: 1fr;
	}
}

.mlsf [data-play-panel="choose"] .mlp-label {
	margin-top: var(--ml-s3, 12px);
	margin-bottom: var(--ml-s2, 8px);
}

.mlsf .mlp-row {
	margin-top: var(--ml-s3, 12px);
}