/* Halloween Theme (deluoode/halloween)
   Colours and background images are recoloured by halloween.js; this file holds
   the cursor and the bottom-right character. */

/* Jack-o'-lantern cursor everywhere, text boxes included. Browsers only ever show
   a cursor GIF's first frame, so halloween.js animates it by stepping the
   <html> cursor through the GIF's frames (cursor/0.png ... 9.png). */
html {
	cursor: url("cursor/pumpkin.gif") 24 23, auto;
}

html * {
	cursor: inherit !important;
}

/* 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;
}

#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);
	}
}

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

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