:root {
  --ui-blue: #def1ff;
}

#game-title{ padding-bottom: 1rem; }


#settings{ padding-bottom: 1rem;}
#settings #all-switches-wrapper{ padding: .5rem 0; }


#preload-wrapper{
	width: 100%;
	font-size: 1.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: normal;
	filter: drop-shadow(0 0 1rem rgba(0,0,0,0.3));
	z-index: 10;
	background-color: var(--color-white);
	text-align: center;
	padding: 2rem;
	animation: pulseUpDown 1s ease-in-out infinite alternate;
  transform-origin: center;
	}

button#start-btn{
	border-width: 4px;
	font-size: 1.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: normal;
	filter: drop-shadow(0 0 1rem rgba(0,0,0,0.3));
	z-index: 10;
	transform-origin: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
	align-items: center;
	border-radius: 3rem;
	}
button#start-btn:before { 
	inset: -.75rem; 
	border-width: .3rem;
	}	

button#start-btn[hidden]{ display:none; }	
button#start-btn.scale-hover:hover{ 
	transition: transform .2s ease-in-out;  
	transform: translate(-50%, -50%) scale(1.15); 
	}
button#start-btn svg{ width: 3rem; }
button#start-btn svg .flag {
  fill: var(--color-white);
  stroke: var(--color-black);
  stroke-linejoin: round;
  stroke-width: 6;
	}
button#start-btn svg .pole{
  stroke: var(--color-black);
  stroke-linecap: round;
	stroke-width: 9;
	}
button#start-btn svg .square{ fill: var(--color-black); }



@keyframes pulseUpDown {
  0% { transform: translate(-50%, -40%); }
  100% { transform: translate(-50%, -60%); }
	}

#game-wrapper{
	padding: .5rem;
	gap: .6rem;
	width: min(100%, 800px);
	border: 1px solid transparent;
	border-radius: .25rem;
	margin: 0 auto;
	background-color: var(--ui-blue);
	display: grid;
	}

#game-board{ position: relative; }

#canvas-wrapper{
	border-radius: 0 0 .25rem .25rem;
	overflow: hidden;
	aspect-ratio: 8/6;
	}

#canvas-wrapper:has(canvas.light:focus) {
	outline: 6px solid var(--asu-maroon);
	border-radius: .125rem;
	}
#canvas-wrapper:has(canvas.dark:focus) {
	outline: 6px solid var(--asu-gold);
	border-radius: .125rem;
	}

#canvas-wrapper canvas{ 
	width: 100%; 
	background-size: cover; 
	filter: blur(3px) saturate(0) contrast(0.5);
	cursor: not-allowed;
	}	

#canvas-wrapper canvas.is-active { 
	filter: blur(0); 
	cursor: none;
	}

canvas.light{ background-image: url("../images/light-forest.jpg"); }
canvas.dark{ background-image: url("../images/dark-forest.jpg"); }

canvas.flat.light{ 
	background-image: none; 
	background-color: var(--color-background);
	}
canvas.flat.dark{ 
	background-image: none; 
	background-color: #2d2d2d;
	}


#ui-stats{
	width: 100%;
	margin: 0 auto;
  padding: 0 .5rem;
  line-height: 1.5;
  border-radius: .25rem .25rem 0 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: space-around;
	}

#timer.pulse-scale {
	animation: pulseScale 0.4s ease-in-out infinite alternate;
	transform-origin: center;
	color: #a30000;
  font-weight: bold;
	}
@keyframes pulseScale {
	from { transform: scale(1); }
	to { transform: scale(1.15); }
	}



#ui-controls{ 
	display: grid;
	gap: .5rem;
	width: 100%;
	}

#ui-action-controls, 
#ui-movement-controls { line-height: 1; }

#ui-action-controls .button-wrapper, 
#ui-movement-controls .button-wrapper{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	}
#ui-action-controls[hidden],
#ui-movement-controls[hidden]{ display: none; }	

#ui-action-controls button, 
#ui-movement-controls button, 
#ui-pause-controls button{
	font-weight: 500;
	flex: 1;
  border-radius: 2rem;
  min-width: max-content;
  display: flex;
	justify-content: center;
  align-items: center;
  min-height: 3rem;
  }
#ui-action-controls button, 
#ui-movement-controls button { background-color: #92d2ff; }


#ui-action-controls button{ gap: .2rem; }
#ui-movement-controls button { gap: .5rem; }
#ui-pause-controls button { gap: .5rem; }

#ui-pause-controls button[disabled], 
#ui-action-controls button[disabled],
#ui-movement-controls button[disabled] {
	opacity: 0.5;
  cursor: not-allowed;
	}
#ui-movement-controls button#strike-btn{ grid-column: span 2; }


#ui-action-controls button svg{
	height: 1.25rem;
	display: block;
	transform-origin: center;
	}
#ui-action-controls button#eat-light-btn path{ 
	fill: var(--color-white); 
	stroke: var(--color-black);
	stroke-width: 2;
	}
#ui-action-controls button#eat-dark-btn path{ 
	fill: var(--color-black); 
	stroke: var(--color-white);
	stroke-width: 2; 
	} 


#ui-movement-controls button#strike-btn svg{
	height: 2.25rem;
	width: 2.25rem;
	display: block;
	}
#ui-movement-controls button#strike-btn line, 
#ui-movement-controls button#strike-btn circle {
	stroke-width: 8;
  stroke: var(--color-white); 
	fill: none;
	}


#ui-movement-controls button.arrow svg{
	height: 1.5rem;
	width: 1.5rem;
	display: block;
	transform-origin: center;
	}
#ui-movement-controls button.arrow path{ fill: var(--color-white); } 
button[data-direction="up"] svg { transform: rotate(0deg); }
button[data-direction="right"] svg { transform: rotate(90deg); }
button[data-direction="down"] svg { transform: rotate(180deg); }
button[data-direction="left"] svg { transform: rotate(270deg); }




#ui-pause-controls{
	align-items: flex-end;
  display: flex;
  justify-content: center;
	}		
#ui-pause-controls button#pause-btn svg{
	height: 1.3rem;
	width: 1.3rem;
	}
#ui-pause-controls button#pause-btn line{
	stroke-width: 22;
	stroke: var(--color-black);
	stroke-linecap: round;
	}
#ui-pause-controls button#pause-btn path{ fill: var(--color-black); }


#play-again-btn{ margin: 2rem 0; }

#print-wrapper{ padding-bottom: 1.5rem; }





@media print, (min-width: 420px) {
	
	#ui-stats{
		gap: 2rem;
	  justify-content: center;
		}

	#ui-action-controls .button-wrapper{
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		}	
	#ui-action-controls button{
		display: flex;
		justify-content: center;
	  align-items: center;
		}
	#ui-action-controls button svg{ height: 1.7rem; }

	#ui-movement-controls button.arrow svg{
		height: 1.7rem;
		width: 1.7rem;
	}

}





/* Targeting landscape small devices */
@media screen and (orientation: landscape) and (height <= 650px) {
	#game-wrapper{
		padding: .5rem 0;
		width: 100%;
		grid-template-columns: 3fr 2fr;
		gap: .6rem .25rem;
		grid-template-areas:
	    "top top"
	    "left right"
		}

	#ui-stats{ grid-area: top; }
	#game-board { grid-area: left; }
	#ui-controls{ 
		grid-area: right; 
		grid-template-rows: min-content min-content auto;
    align-items: start;
    gap: 1rem;
    max-width: 20rem;
    margin: 0 auto;
		}

	#ui-action-controls, #ui-movement-controls{padding: 0 .25rem; }
	#ui-action-controls .button-wrapper, 
	#ui-movement-controls .button-wrapper{ gap: .5rem .25rem; }
	#ui-movement-controls button { gap: .25rem; }

	#ui-pause-controls button { 
		max-width: unset;
		margin: 0 .25rem;
		}
	
}



@media print, (min-width: 700px) {
	#ui-movement-controls .button-wrapper{
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		justify-content: center;
		}	

	#ui-movement-controls button{ 
		min-width: 7rem;
		gap: .3rem; 
		}
	#ui-movement-controls button#strike-btn { flex-basis: 100%; }
	#ui-movement-controls button#strike-btn, 
	#ui-pause-controls button{ max-width: 22rem; }	

}



@media print, (min-width: 800px) {

	#game-title{ padding-bottom: 2rem; }

	button#start-btn{
		font-size: 2rem;
		min-width: 16rem;
		}

	#ui-pause-controls{ margin: .25rem 0; }

	#ui-action-controls button, 
	#ui-movement-controls button{ 
		gap: .4rem; 
    padding: 0 .25rem;
    }	

}	





@media print{ 
  #game, 
  #setup, 
  #print-wrapper, 
  #play-again-btn {
    display: none;
    }
}



@media screen and (forced-colors: active) {

	#ui-action-controls, #ui-movement-controls{ border-top: none; }

  .forced-colors #ui-action-controls.flat button#eat-light-btn path{ 
		stroke: CanvasText;
		fill: Canvas;
  	} 	
  .forced-colors #ui-action-controls.flat button#eat-dark-btn path{ 
		stroke: Canvas;
		fill: CanvasText;
  	} 	

  #ui-movement-controls button.arrow path{
  	stroke: ButtonText;
    stroke-width: 5; 
    fill: Canvas;
  	}

  #ui-movement-controls button#strike-btn line, 
	#ui-movement-controls button#strike-btn circle { 
		stroke: ButtonText; 
		stroke-width: 5; 
		}	

  #ui-action-controls button#eat-light-btn[disabled] path, 
  #ui-action-controls button#eat-dark-btn[disabled] path, 
  #ui-movement-controls button.arrow[disabled] path, 
  #ui-movement-controls button#strike-btn[disabled] line, 
	#ui-movement-controls button#strike-btn[disabled] circle{
  	stroke: GrayText;
  	}	

  button#start-btn{ filter: none; }
	button#start-btn svg .flag {
	  fill: transparent;
	  stroke: ButtonText;
		}
	button#start-btn svg .pole{ stroke: ButtonText; }
	button#start-btn svg .square{ fill: ButtonText; }

	#ui-pause-controls button#pause-btn line{ stroke: ButtonText; }
	#ui-pause-controls button#pause-btn path{ fill: ButtonText; }

  #canvas-wrapper:has(canvas.light:focus), 
  #canvas-wrapper:has(canvas.dark:focus) { outline-color: Highlight; }

  #canvas-wrapper canvas.flat { forced-color-adjust: none; }
  .forced-colors #canvas-wrapper canvas.flat { forced-color-adjust: auto; }

  .forced-colors #canvas-wrapper canvas { filter: opacity(0.5) blur(3px); }
  .forced-colors #canvas-wrapper canvas.is-active { filter: blur(0); }

  .forced-colors canvas.light { background-color: Canvas; }
  .forced-colors canvas.dark { background-color: CanvasText; }

}