/* mm-style.css - custom styles for monster mash pages */

/* fade between pages https://piccalil.li/blog/some-practical-examples-of-view-transitions-to-elevate-your-ui/ */
/* each page must also have a special meta tag for these to work, and they only work on Chrome */


@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');



.blackletter,h1,h2,h3,h4,button {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #fd0c0c !important;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.71);

}

h1 {
	--pico-font-size: 5rem;
	text-shadow: 2px 2px 0px rgba(227,236,18,1);
}

h2 {
	--pico-font-size: 3.5rem;
}

h3 {
	--pico-font-size:2.5rem;
}


@view-transition {
	navigation: auto;
}

::view-transition-group(root) {
	animation-duration: 1s;
}



/* Battle layout background -------------*/

html,body {
		margin: 0;
		min-height: 100vh;
	}
	
	
label {
	font-weight: bold;
	
	text-shadow:
		-1px -1px 0 black,
		 1px -1px 0 black,
		-1px  1px 0 black,
		 1px  1px 0 black;
}

button {
	font-weight: bold;
	--pico-primary-background: #1a0358;
	--pico-primary-border: black;
	font-size: 1.3rem !important;
}


body.battle{
	background: url("background.jpg");
	background-size: cover;
}

body.brackets, body.players{
	background: url("background-texture.jpg");
	background-size: cover;
}

pre.mermaid {
	max-height: 100vh;
	width: auto;
	margin: 10px auto;
}

/* hide the SVG "placeholder" elements that Mermaid adds to the canvas */
.mermaid g.node .basic
{
	fill: none !important;
	stroke: none !important;
}

.nodeLabel{
	background: none;
	color: #420000;
}

body.battle .proportions{
	font-size: 8pt;
	padding: 3px 10px;
}

.champname{
font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #fd0c0c !important;
}

/* monsters are always looking left, so reflect the one on the left so it looks rightward */
		.left img{
			transform: scaleX(-1);
			z-index: 2;
			height: 512px;
			width: 512px;
		}
		.middle img{
			z-index: 2;
			height: 512px;
			width: 512px;
		}
		.right img{
			z-index: 2;
			height: 512px;
			width: 512px;
		}
		
/* don't allow overflowing monsters to cover the attack form */
.bottom, #attackform, #noform {
	z-index: 10;
}

/* center the "You're not part of this battle" message */
#noform {
	text-align: center;
	padding: 5px;
	background: #1e000080;
}

/* Judge speech bubble etc. -------------*/
#judge_surround {
		position: relative;
	}

#judge_speech {
	z-index: 3;
	opacity: 0;
	transition: opacity 300ms ease;
	position: absolute;

	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);

	background: #4c72ad;
	color: black;

	padding: 14px 18px;
	border-radius: 14px;

	box-shadow: 0 8px 24px rgba(0,0,0,0.18);

	min-width: 400px;
	
	transition: all 1s ease-in;
}

#judge_image {
	max-height: 200px;
	z-index: 1;
}

/* animate speech bubble appearing */
#judge_speech.makevisible {
	opacity: 1;
}

/* Bubble tail */
#judge_speech::before {
	content: "";

	position: absolute;

	top: -10px;
	left: 50%;
	transform: translateX(-50%);

	width: 0;
	height: 0;

	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #4c72ad;
}