/* predownload.css — the "download game data" card on the play gate.
   Fixed-position and appended to <body>, so it borrows nothing from the gate's
   own layout and cannot push it around. Gold on oxblood, same palette as the
   site; it is a first-party offer, not a browser prompt. */

.mvm-dl {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9000;
	width: min(320px, calc(100vw - 32px));
	padding: 13px 14px 14px;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(30, 10, 14, .97) 0%, rgba(18, 6, 10, .97) 100%);
	box-shadow:
		0 0 0 1px rgba(196, 158, 82, .42),
		0 10px 30px rgba(0, 0, 0, .6);
	color: #e8dcc6;
	font-family: 'Barlow Semi Condensed', ui-sans-serif, system-ui, sans-serif;
	transition: opacity .2s ease, transform .2s ease;
}

/* Never over the running game, and dismissible for this visit. */
.mvm-dl[data-playing='true'],
.mvm-dl[data-hidden='true'] {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.mvm-dl__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.mvm-dl__title {
	font-family: Cinzel, Georgia, serif;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #e8b84b;
}

.mvm-dl__x {
	border: 0;
	background: none;
	color: rgba(232, 220, 198, .55);
	font-size: 13px;
	line-height: 1;
	padding: 3px 4px;
	cursor: pointer;
}
.mvm-dl__x:hover { color: #e8b84b; }

.mvm-dl__sub {
	margin: 5px 0 10px;
	font-size: 12px;
	line-height: 1.35;
	color: rgba(232, 220, 198, .68);
}

.mvm-dl__bar {
	height: 7px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .55);
	box-shadow: inset 0 0 0 1px rgba(196, 158, 82, .3);
	overflow: hidden;
}
.mvm-dl__bar i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, #a8823a 0%, #e8b84b 60%, #f6dd9c 100%);
	transition: width .18s linear;
}

.mvm-dl__stat {
	margin: 8px 0 10px;
	font-size: 12px;
	letter-spacing: .02em;
	color: rgba(232, 220, 198, .85);
	font-variant-numeric: tabular-nums;
}

.mvm-dl__go {
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 7px;
	background: linear-gradient(180deg, #e8b84b 0%, #a8823a 100%);
	color: #1a0d06;
	font-family: Cinzel, Georgia, serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
}
.mvm-dl__go:hover { filter: brightness(1.07); }
.mvm-dl__go:disabled { opacity: .55; cursor: default; filter: none; }

.mvm-dl[data-state='done'] .mvm-dl__title::after {
	content: ' ✓';
	color: #8fd18a;
}

/* On a phone the gate is already tight; sit the card flush to the bottom. */
@media (max-width: 560px) {
	.mvm-dl {
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mvm-dl, .mvm-dl__bar i { transition: none; }
}

/* ---- the gate's own button skin has to be held off ----------------------
   The play page styles bare <button> with a pale ui-button texture (it is the
   engine's window chrome, reused by the site). Our two buttons inherited it and
   came out as light blue plates on an oxblood card — see
   evidence/predownload/gate-card.png, first deploy. These are the properties
   that skin touches, restated at a specificity it cannot reach, plus
   !important because parts of that skin carry it too.
   -------------------------------------------------------------------- */
.mvm-dl .mvm-dl__go,
.mvm-dl .mvm-dl__x {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	border-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	image-rendering: auto !important;
}

.mvm-dl .mvm-dl__go {
	background-image: linear-gradient(180deg, #e8b84b 0%, #a8823a 100%) !important;
	color: #1a0d06 !important;
	border-radius: 7px !important;
	padding: 9px 12px !important;
}
.mvm-dl .mvm-dl__go:disabled { opacity: .55 !important; }

.mvm-dl .mvm-dl__x {
	background-image: none !important;
	color: rgba(232, 220, 198, .55) !important;
	width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	border-radius: 6px !important;
	font-size: 13px !important;
}
.mvm-dl .mvm-dl__x:hover {
	color: #e8b84b !important;
	background-color: rgba(232, 184, 75, .12) !important;
}