@import url(../../../var.css);

body {
	margin: 0%;
	background-color: var(--background-color);
	font-family: var(--font-family);
}

header {
	padding: 0.5% 0%;
	display: flex;
	justify-content: center;
	align-content: center;
	text-shadow: var(--box-shadow);
	font-size: var(--font-size-xxxLarge);
	color: var(--text-color);
	background: var(--secondary-color);
	background: radial-gradient(circle, 
	var(--secondary-color) 50%, 
	var(--primary-color) 95%
	);
	box-shadow: var(--box-shadow-light);
	margin: 0% 0% 4% 0%;
}

main {
	display: flex;
	justify-content: center;
	/* align-items: center; */
	gap: 20px;
}

.js-leaderboard {
    position: relative;
    width: 18%;
    text-align: center;
    background-color: var(--card-background);
    color: var(--text-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 1% 2%;
    z-index: 0;
}

.js-leaderboard::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 6px 6px 6px 0px; /* Border thickness */
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-mask: 
        linear-gradient(white 0 0) content-box, 
        linear-gradient(white 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.js-leaderboard h2 {
    margin-bottom: 10px;
    font-size: var(--font-size-large);
}

#leaderboard-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#leaderboard-list li {
    background-color: var(--background-color);
    margin: 5px 0;
    padding: 8px;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
}

.js-card-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	width: 60%;
	max-width: fit-content;
	background-color: var(--background-color);
	padding: 20px;
	row-gap: 5px;
	column-gap: 5px;
}

.js-card {
	height: var(--card-size);
	width: var(--card-size);
	font-size: var(--font-size-xxLarge);
	text-align: center;
	background-color: var(--card-background);
	border: var(--card-border);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	color: var(--text-color);
	justify-content: center;
	align-content: center;
	cursor: pointer;
    transition: all var(--transition-speed);
}

.js-card:hover {
    transform: scale(1.015);
	border-color: var(--hover-border-white);
}

.js-card.flipped {
    border-color: var(--highlight-color);
}

.js-card.matched {
    border-color: var(--primary-color);
    cursor: default;
}

.js-player-info {
    position: relative;
    width: 18%;
    text-align: center;
    background-color: var(--card-background);
    color: var(--text-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding: 1% 2%;
    z-index: 0;
}

.js-player-info::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 6px 0px 6px 6px; /* Left border instead of right */
    border-radius: inherit;
    background: linear-gradient(-90deg, var(--primary-color), var(--secondary-color)); /* Reverse the gradient */
    -webkit-mask: 
        linear-gradient(white 0 0) content-box, 
        linear-gradient(white 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}


.js-player-info h2 {
    margin-bottom: 10px;
    text-align: center;
    font-size: var(--font-size-large);
}

.player-stat {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0px;
    font-size: var(--font-size-medium);
}

.player-stat span:first-child {
    font-weight: bold;
}

#player-name {
    /* border: var(--card-border); */
    /* border-radius: var(--border-radius); */
    /* padding: 5px; */
    font-size: var(--font-size-medium);
    width: 60%;
    text-align: center;
	align-self: center;
}

.model {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
    height: 100%;
	justify-content: center;
	align-content: center;
	z-index: 999;
	background-color: var(--background-modal);
}

.model-border {
    position: relative;
	align-self: center;
    display: flex;
    border-radius: var(--border-radius);
    padding: 8px;
	width: fit-content;
	height: fit-content;
	box-shadow: var(--box-shadow);
}

.model-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    padding: 8px;
    background: linear-gradient(90deg, var(--primary-color) 5%, var(--secondary-color) 30% 70%, var(--primary-color) 95%);
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.modal-content {
	background-color: var(--background-color);
    color: var(--text-color);
    font-size: var(--font-size-xxLarge);
    padding: 6% 6%;
    border-radius: var(--border-radius);
    display: flex;
	flex-flow: wrap;
	justify-content: center;
	column-gap: 20px;
    row-gap: 40px;
	z-index: 1;
}

.modal-content button {
	color: var(--text-color);
	background-color: transparent;
	border-radius: var(--border-radius);
	width: fit-content;
	height: fit-content;
	font-size: var(--font-size-large);
	font-family: var(--font-family);
	border: var(--card-border);
	padding: 1% 2%;
	transition: all var(--transition-speed);
}

.modal-content button:hover {
	transform: scale(1.015);
	border-color: var(--hover-border-white);
}

.modal-text {
	text-shadow: var(--box-shadow);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: inherit;
	padding: inherit;
	font: inherit;
	font-family: inherit;
	white-space: inherit;
	line-height: inherit;
	position: inherit;
}

input {
	font-family: inherit;
}