@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=block');

#rank-header{ 
	display: grid;
	grid-template-columns: min-content auto;
	border-bottom: 2px dotted #ccc;
    align-items: center;
    gap: .5rem;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
	}
#rank-header img{ 
	width: 4.5rem;
	height: 4.5rem; 
	}	
.rank-title{
    font-size: 1.5rem;
    color: var(--asu-maroon);
    font-family: var(--special-font);
    margin-bottom: -.3rem;	 
	}
.score-wrapper{	
	color: #999;
	font-weight: bold; 
	line-height: 1rem;
    margin-top: .25rem;
	}

#level-score{
	display: flex;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	background-size: 100%;
    background-position: center;
    background-image: url('../images/borders/level-score-pipe-small.svg');
	aspect-ratio: 7 / 1;
	}
#level-score-content{
	line-height: 1.5rem;
	padding: 1rem;
    font-size: 1.75rem;
    color: #4faded;
    font-family: var(--special-font);
    background-color: #fff;
    border: 6px solid #aaa;
    border-radius: .5rem;
    text-align: center;
	}


.opening-text{ 
	font-size: 1.25rem; 
	font-family: var(--chatting-font);
	}
.opening-text a{
	color: #fff;
	border-bottom: 2px solid #fff;
	}


.level-complete-feedback-wrapper{
	background-image: url('../images/borders/wave-line.svg');
    background-repeat: repeat-x;
    background-size: 15rem;
    padding-top: 2rem;
	}
.level-complete-feedback-wrapper #new-high-score-title{
	font-size: 3rem;
    font-weight: normal;
    padding: 1rem 0;
    line-height: 3rem;
    font-family: var(--special-font);
    color: var(--asu-orange);
    text-align: center;
	}

.badge-feedback, .expertise-feedback{
	display: grid;
    grid-template-columns: min-content auto;
    grid-gap: 1rem;
    align-items: center;
	}
.badge-feedback img, .expertise-feedback img{ 
	width: 5rem;
	aspect-ratio: 1;
	}
.badge-feedback .title{ font-weight:bold; }


.water-border{
	background-color: #4faded;
	color: #fff;
	position: relative;
	margin: 25px 0;
	padding: 1.5rem 2rem;
	padding: 1rem;
	}
.water-border p{ padding: .5rem 0}	
.water-border:before{
	content: "";
	display: block;
	position: absolute;
	background-image: url('../images/borders/water-top.svg');
	background-repeat: repeat-x;
	background-size: 550px 23px;
	width: 100%;
	height: 23px;
	top: -22px;
	left: 0;
	}
.water-border:after{
	content: "";
	display: block;
	position: absolute;
	background-image: url('../images/borders/water-bottom.svg');
	background-repeat: repeat-x;
	background-size: 550px 23px;
	width: 100%;
	height: 23px;
	bottom: -22px;
	left: 0;
	}	


.mini-icon-grid {
	display: grid;
	gap: .75rem;
    grid-template-columns: 3.5rem auto;
    align-items: center;
	padding: .25rem 0;
	line-height: 1.15;
	}
.mini-icon-grid 	
.mini-icon-grid .title{ 
	font-weight: bold; 
	margin-bottom: .25rem;
	}
.mini-icon-grid img { 
	width: 100%; 
	}
.mini-icon-grid .points{ font-weight:bold; }
.mini-icon-grid.hidden { display: none; }


/* DASHBOARD */
#dashboard #score-summary-link.link, #dashboard #score-summary-link:hover{
	border-bottom: 2px solid #fff;
	color: #fff;
	font-weight: unset;
	}

#dashboard #intro{ padding: .5rem 0 2.5rem 0; }

.dashboard-section h2{ padding-top: 0; }
.dashboard-section .level-status{ margin: .5rem 0 1.5rem 0; }
.dashboard-section .badge-feedback{ 
	margin: .5rem 0 1rem 0;
	grid-gap: .75rem;
	color: #000;
	line-height: 1.4rem;
	}

.dashboard-section .img-right-wrapper img{ 
	width: 10.5rem; 
	padding: .75rem 0;
	}
.dashboard-section.quiz-section .img-right-wrapper img{ width: 18rem; }	
.dashboard-section .img-right-wrapper .badge-feedback img{
	width: 3.5rem;
	min-height: 3.5rem;
	padding: 0;
	animation: none;
	}
.dashboard-section .badge-feedback .max-score {
	color: #aaa;
	font-weight: bold;
	}

.dashboard-section .badge-feedback.unearned{ color: #aaa;}	
.dashboard-section .img-right-wrapper{ align-items: center; }

.dashboard-section #quizzes-taken-feedback{
	font-weight: bold;
	padding: 1rem 0;
	}
#player-summary{
	margin-top: 2rem;
	}

.small-numbers-grid{
	display: grid;
	grid-template-columns: 2rem auto;
	grid-gap: 1rem;
	margin: 1rem 0;
	}
.small-numbers-grid .number{
	background-color: var(--asu-maroon);
	color: #fff;
	display: grid;
	font-weight: bold;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	justify-content: center;
    align-items: center;
	}	


.panel .heading {
	background-color: var(--asu-maroon);
	padding: 1rem;
	color: #fff;
	text-transform: uppercase;
	font-family: var(--special-font);
	font-size: 1.5rem;
	line-height: 1.75rem;
	word-spacing: 0.2rem;
    letter-spacing: .1rem;
	display: flex;
	grid-gap: 1rem;
	border-radius: 0;
	border-radius: .75rem .75rem 0 0;	
	}
.panel .content{ 
	background-color: #efefef;
	padding: 1rem;
    border-radius: 0 0 .75rem .75rem;	
	}
.panel .content h2{
	color: var(--asu-maroon);
    font-weight: bold;
    padding-top: 0;
	}
.panel .close-icon {
	width: 2rem;
	aspect-ratio: 1;
	margin: 0 0 0 auto;
	}
.panel .block{
    border-radius: 0.75rem;
    margin-bottom: 1rem;
	}

img.wide-panel-image{
	width: 100%;
	border-radius: .5rem;
	margin: 1rem 0;
	}	

/* TOGGLE BOXES ---------------------------------- */

.panel .toggle-box{
	border-top: dotted 2px #bbb;
	border-bottom: dotted 2px #bbb;
	padding: 0;
	}
.panel .toggle-box + .toggle-box { 
	border-top: none; 
	}
.panel .toggle-title{ 
	background-color: transparent; 
	padding-left: 0;
	padding-right: 0;
	}
.panel .toggle-title:hover{ background-color: transparent; }	
.panel .toggle-box .toggle-content-wrapper{	
	border: none; 
	padding: 0 0 1.5rem 0;
	}



.point-feedback{
    display: flex;
    gap: .5rem;
    align-items: center;
    font-weight: bold;
    }
.point-feedback img{ width: 1.75rem; }
.money-feedback{
    display: flex;
    gap: .5rem;
    align-items: center;
    }    
.money-feedback img{ width: 2.5rem; }





#point-feedback-wrapper{
	border-image-source: url('../images/game/challenges-complete-bg.jpg');
	border-image-repeat: stretch;
	border-width: 40px;
	border-style: solid;
	border-image-slice: 60;
	margin: 1rem 0 -1rem 0;
	position: relative;
	}

#bottom-button-wrapper.right{ text-align: right; }
#bottom-button-wrapper.no-margin-padding{ 
	margin: 0; 
	padding: 0;
	}


#continue-wrapper { margin-top: 1.5rem; }
#continue-wrapper h3 { text-align: center; }
#continue-wrapper .large{ margin: 1rem auto 4rem auto; }



.in-progress-feedback{ 
	background-color: #d6f1ff; 
	margin-bottom: 1rem;
	padding: 1rem;
	}



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

	#level-score-content{
		padding: 1.25rem;
	    font-size: 2rem;
		}

	.water-border{ padding: 1.5rem 2rem; }
	.water-border:before{
		background-size: 1100px 45px;
		width: 100%;
		height: 45px;
		top: -44px;
		}
	.water-border:after{
		background-size: 1100px 45px;
		width: 100%;
		height: 45px;
		bottom: -44px;
		}	
	.water-border{ margin: 45px 0; }

	.dashboard-section .img-right-wrapper{ padding: 1rem 0; }

	#level-score{
		background-image: url('../images/borders/level-score-pipe-large.svg');
		aspect-ratio: 8 / 1;
		}
	#level-score-content{ margin: 0 3rem; }

	.panel .heading { 
		border-radius: 0;
		padding: 1.25rem 1.25rem 1.25rem 1.75rem; 
		font-size: 2rem;
		line-height: 2rem;
		}
	.panel .content{ 
		margin: 0;
		padding: 3rem; 
		}
	.panel .block{
		background-color: #fff;
		padding: 2rem;
		}

	#point-feedback-wrapper{ border-width: 60px; }

	#point-feedback-wrapper{ margin: 1rem 0 -.5rem 0; }
	#point-feedback-wrapper::after{
		content: url(../images/game/badges/badge-earned-arrow.svg);
	    position: absolute;
	    bottom: -80px;
	    height: 50px;
	    width: 30px;
	    left: -30px;
		}

	.level-complete-feedback-wrapper{ padding-top: 3rem; }	

	.badge-feedback img, .expertise-feedback img{ 
		width: 7rem;
		animation: pulse-scale 1s infinite;
		animation-timing-function: ease-in-out;
		animation-direction: alternate;
		}
	@keyframes pulse-scale {
		0% { transform: scale(1.0); }
		100% { transform: scale(1.1); } 
		}	

	#game-complete img{ width: 8rem; }
	#game-complete {
		grid-template-columns: min-content auto;
	    grid-gap: 2rem;
		}
	
}    




@media print {
	.panel .toggle-box .toggle-content-wrapper{	padding: 0 0 .75rem 0; }

	#continue-wrapper h3{
		font-size: 1.2rem;
    	line-height: 1.4rem;
    	padding-top: 0;
		}

	.mini-icon-grid { 
		grid-template-columns: 3.5rem auto; 
		gap: .5rem; 
		} 

	#level-score-content {
        padding: .75rem;
        font-size: 1.5rem;	
       	}
}