/* Halloween Theme (deluoode/halloween)
   Colours and background images are recoloured by halloween.js; this file holds
   the bottom-right character. (The pumpkin cursor was removed in 1.0.1: it broke
   in Firefox on Linux.) */

/* Parts the browser draws itself in its own blue, which no stylesheet rule
   sets (so halloween.js can't recolour them): ticked radio buttons and
   checkboxes (e.g. the Duels page), sliders, highlighted text and Chrome's
   tint on autofilled fields (the login form). */
html {
	accent-color: #ec781e;
}

::selection {
	background: rgba(236, 120, 30, 0.6);
	color: #fff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px rgb(228, 206, 187) inset;
	-webkit-text-fill-color: #000;
}

/* Bottom-right character: decorative only, clicks pass straight through it */
#halloween-mascot {
	position: fixed;
	right: 10px;
	bottom: 0;
	z-index: 1; /* under dropdown menus (2+), pop-up alerts (50) and the nav submenus/modal (100+) */
	height: min(480px, 63vh);
	pointer-events: none;
	user-select: none;
}

/* Daru (6) is the widest picture, so at full height he looked much bigger than the rest */
#halloween-mascot[data-mascot="6"] {
	height: min(336px, 44vh);
}

#halloween-mascot img {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	width: auto;
	max-width: none;
	opacity: 0;
	transform: translateY(12%);
	transition: opacity 0.8s ease, transform 0.8s ease;
	filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.45));
}

#halloween-mascot img.shown {
	opacity: 1;
	transform: none;
}

@media (max-width: 700px) {
	#halloween-mascot {
		right: 4px;
		height: min(255px, 39vh);
	}

	#halloween-mascot[data-mascot="6"] {
		height: min(180px, 27vh);
	}
}

@media (prefers-reduced-motion: reduce) {
	#halloween-mascot img {
		transition: none;
		transform: none;
	}
}

@media print {
	#halloween-mascot {
		display: none;
	}
}