:root {
	--rank-width: 7.5ch;
	--hue: 200;
	--clr-mid: hsl(var(--hue), 23%, 23%);
	--clr-dark: hsl(var(--hue), 23%, 11%);
	--clr-light: hsl(var(--hue), 9%, 86%);
	--wood-light: #a67643;
	--wood-dark: #523a20;
	/* --clr-mid: hsl(232, 10%, 23%);
	--clr-dark: hsl(232, 10%, 15%);
	--clr-light: hsl(232, 9%, 86%); */
	/* --clr-mid: hsl(290, 10%, 23%);
	--clr-dark: hsl(290, 10%, 15%);
	--clr-light: hsl(290, 9%, 86%); */
}

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

html {
	--s: 65px; /* control the size*/
	/* --c2: #242531;
	--c1: #2a2b36; */
	--c2: hsl(var(--hue), 15%, 16%);
	--c1: hsl(var(--hue), 13%, 18%);
	--l1: #0000 48%, var(--c1) 0 52%, #0000 0;
	--l2: #0000 1.3%, var(--c2) 0 32%, #0000 0;
	background: linear-gradient(-45deg, var(--l2)),
		linear-gradient(45deg, var(--l1)),
		linear-gradient(45deg, var(--l2)) calc(var(--s) / 2) calc(var(--s) / 2),
		linear-gradient(-45deg, var(--l1)) var(--c2);
	background-size: calc(2 * var(--s)) var(--s), var(--s) var(--s);
}

body {
	padding-top: 130px;

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 6rem;

	color: var(--clr-light);
}

@media (max-width: 600px) {
	body {
		padding-top: 80px;
	}
}

/* --------------------------- */
/*                             */
/*     COMMON COMPONENTS       */
/*                             */
/* --------------------------- */
a {
	text-underline-offset: 3px;
	color: var(--clr-light);
}

.section {
	width: min(400px, 92vw);
	display: flex;
	flex-flow: column nowrap;
}

.section-title {
	width: fit-content;
	padding: 0.5rem 2ch;
	padding-bottom: calc(0.5rem - 6px);
	margin: auto;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	text-align: center;
	gap: 1.5ch;

	font-size: 1.125rem;
	font-weight: bold;
	color: white;

	background-color: var(--wood-light);
	z-index: 2;
}

.section-content {
	width: 100%;
	padding: 3rem min(2.5rem, 6vw);
	margin: auto;
	border: 6px solid;
	border-top-color: var(--wood-light);
	border-left-color: var(--wood-light);
	border-bottom-color: var(--wood-dark);
	border-right-color: var(--wood-dark);

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 2.25rem;

	/* clip-path: polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%); */
	background-color: var(--clr-dark);
	box-shadow: 0px 18px 27px rgba(0, 0, 0, 0.9);

	text-align: center;
}

.section-row {
	width: 100%;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}

.widget {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.25rem;
}

.widget-full {
	width: 100%;
}

.widget-title {
	background: none;
	color: var(--clr-light);
	/* border: 1px solid var(--clr-light); */
	border-radius: 6px;
	padding-inline: 1.5ch;
	padding-block: 0.25rem;
	font-weight: bold;
}

.widget-content {
	padding-block: 0.5rem;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--clr-mid);
	color: var(--clr-light);
}

.widget-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-around;

	background-color: var(--clr-mid);
	color: var(--clr-light);
}

.widget-value {
	width: fit-content;
	padding-inline: 1ch;

	display: flex;
	align-items: baseline;
	justify-content: center;

	font-size: 2rem;
	font-weight: bold;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th {
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--clr-light);
	font-size: var(--tableHeader-fs, 1rem);
}

/* Table row height */
tr:not(:first-of-type) {
	height: var(--tableRow-height);
	font-size: var(--tableData-fs, 1rem);
}

.rank {
	width: var(--rank-width);
	height: min-content;
	padding: 0.25rem 1ch;
	border-radius: 6px;

	font-size: 1rem;
	font-weight: bold;

	color: var(--rank-color);
	background: var(--rank-bg);
	border: 2px solid;
}

.rank1 {
	--rank-color: hsl(45, 70%, 20%);
	--rank-bg: linear-gradient(45deg, hsl(45, 70%, 40%), hsl(45, 70%, 80%));
}

.rank2 {
	--rank-color: hsl(0, 0%, 30%);
	--rank-bg: linear-gradient(45deg, hsl(0, 0%, 60%), hsl(0, 0%, 85%));
}

.rank3 {
	--rank-color: hsl(30, 60%, 20%);
	--rank-bg: linear-gradient(45deg, hsl(30, 60%, 38%), hsl(30, 60%, 63%));
}

.rankNR {
	border: 1px solid;
	font-weight: normal;
}

/* --------------------------- */
/*                             */
/*       TITLE PAGE            */
/*                             */
/* --------------------------- */

#titleSection {
	border: 6px solid;
	border-top-color: var(--wood-light);
	border-left-color: var(--wood-light);
	border-bottom-color: var(--wood-dark);
	border-right-color: var(--wood-dark);
	box-shadow: 0px 18px 27px rgba(0, 0, 0, 0.9);
}

#titleSection .section-content {
	border: none;
	box-shadow: none;
	gap: 1.75rem;
	background-color: var(--clr-mid);
}

h1 {
	font-size: 4rem;
	font-family: "Limelight", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
}

@media (max-width: 600px) {
	h1 {
		font-size: 3.75rem;
	}
}

#appDescription {
	line-height: 1.4;
	font-size: 1.125rem;
	/* padding-bottom: 0.5rem; */
}

#titleSection #support {
	padding: 1.5rem 1.5rem;
	/* font-size: 1rem; */
	background-color: var(--clr-dark);
	box-shadow: none;
}

/* #coffeeLink {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background-color: #ffdd00; 
	color: var(--clr-dark);
	border-radius: 0.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#coffeeLink:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
} */

#coffeeLink {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.5rem 1.2rem;
	/* background: linear-gradient(to bottom, #fff5a3, #ffeb66 40%, #ffdd00); */
	background: linear-gradient(to bottom, white, var(--clr-light));
	color: var(--clr-dark);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15),
		inset 0 -2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	display: inline-block;
	vertical-align: middle;
	line-height: 1.2;
}

/* #coffeeLink:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2),
		inset 0 -2px 4px rgba(0, 0, 0, 0.15);
} */

/* --------------------------- */
/*                             */
/*       WIN LOSS WIDGET       */
/*                             */
/* --------------------------- */

#winLoss .section-row {
	justify-content: center;
	gap: 2.5rem;
}

#winLoss .widget-content {
	width: 5.5rem;
	height: 5.75rem;

	font-size: 4rem;
	font-weight: bold;
}

/* --------------------------- */
/*                             */
/*      TITAN LEADERBOARD      */
/*                             */
/* --------------------------- */

#titanLeaderboard .section-content {
	padding-bottom: 2rem;
}

#titanLeaderboard table {
	--tableRow-height: 4.5rem;
	--tableData-fs: 1.125rem;
}

/* Titan Rank column*/
#titanLeaderboard th:nth-of-type(1) {
	width: var(--rank-width);
}

/* Titan Name column */
#titanLeaderboard th:nth-child(2),
#titanLeaderboard td:nth-child(2) {
	padding-inline: 1rem;
	text-align: left;
}

/* Win-Loss-Tie column */
#titanLeaderboard td:nth-child(3) {
	font-weight: bold;
}

#titanRankingCaption {
	font-style: italic;
}

/* --------------------------- */
/*                             */
/*        TITAN CARD           */
/*                             */
/* --------------------------- */
.section-title-name {
	display: flex;
	flex-flow: column nowrap;
	align-items: start;
}

.section-title-name h2 {
	font-size: 1.125rem;
}

.titanCard .section-content {
	padding-top: 2rem;
	padding-bottom: 1.5rem;
	/* padding-inline: min(2.25rem, 6vw); */
}

/* --------------------------- */
/*      INGREDIENT LIST        */
/* --------------------------- */
.titanCard-ingredientList {
	flex-flow: column nowrap;
	text-align: left;
	font-size: 1rem;
}

.titanCard-ingredientList ul {
	list-style-type: none;
	font-weight: normal;
}

.titanCard-ingredientList li {
	margin-top: 0.25rem;
}

/* --------------------------- */
/*      PER-ROUND TABLE        */
/* --------------------------- */
.titanCard-perRound .widget-content {
	padding-block: 0.25rem 0;
	background-color: var(--clr-dark);
}

.titanCard-perRound table {
	--tableHeader-fs: 0.875rem;
	--tableRow-height: 3rem;
}

.titanCard-perRound th {
	font-weight: normal;
}

/* Widths of columns: (1) Round Num, (2) # Battles,
(3) Avg Score, (4) Avg Margin */
.titanCard-perRound th:nth-of-type(1) {
	width: 6ch;
}
.titanCard-perRound th:nth-of-type(2) {
	text-align: left;
	padding-left: calc(0.25rem + 0.5ch);
}
.titanCard-perRound th:nth-of-type(3),
.titanCard-perRound th:nth-of-type(4) {
	width: 3.375rem;
}

.histogramCount {
	margin-inline: 0.25rem;
	padding-left: 0.5ch;
	padding-block: 0.25rem;
	text-align: left;

	font-weight: bold;

	background-color: var(--clr-mid);
}

/* --------------------------- */
/*                             */
/*      FOOTER                 */
/*                             */
/* --------------------------- */

.section#footer {
	width: 100%;
	margin-top: 2rem;
}

@media (max-width: 600px) {
	.section#footer {
		margin-top: 0.5rem;
	}
}

#footer .section-content {
	padding-block: 2.125rem;
	gap: 1.25rem;
	box-shadow: none;
	border: none;
}

#links {
	width: 100%;
	padding-bottom: 2rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--clr-light);

	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 2.5ch;
}

#links a {
	display: inline-block;
	vertical-align: middle;
	/* white-space: nowrap; */
	line-height: 1.2; /* or whatever looks best */
}

#footer #footnote {
	font-size: 0.875rem;
	font-style: italic;
	text-align: left;
}