body {
	font-family: 'Arial', sans-serif;
	background: linear-gradient(135deg, #6a11cb, #2575fc);
	color: #fff;
	margin: 0;
	padding: 0;
}

a {
	color: #ffc107;
}

a:hover {
	color: #ff8c00;
}
a:active {
	color: #ff8c00;
}
a:visited {
	color: #ffc107;
}

#LegalCookieNotice {
	z-index: 999;
	position: sticky;
	bottom: 0;
	display: none;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background: #1c1c1c;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

header h1 {
	font-size: 20px;
	margin: 0;
}

header #HeaderTitle a {
	color: #ffffff;
	text-decoration: none;
}

#HeaderTitle a:hover {
	color: #ffffff;
	text-decoration: none;
}

header .headerInfo {
	padding-right: 40px;
}

div.headerInfo a {
	color: #ffffff;
	text-decoration: none;
}

div.headerInfo a:hover {
	color: #ffffff;
	text-decoration: none;
}

footer {
	background: #333;
	color: white;
	text-align: center;
	padding: 10px 20px;
	position: relative;
	box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}

footer p {
	margin: 0;
}

#HeaderSearchBox {
	display: none;
}

.code {
	width: 100%;
	//DARK	background: #2B2B2B;
	//DARK	color: #6EA196;
	background: #CFCFCF;
	color: #000000;
	border: solid 1px #555555;
	font-family: Courier New;
	font-size: 1em;
	padding: 5px 0px 5px 5px;
}

.code .tag {
	//DARK	color: #E8BF6A;
	color: #0000FF;
}

.code .tag .attribute {
	//DARK	color: #6EA196;
	color: #FF0000;
}

.code .tag .attribute .value {
	//DARK	color: #6CAA4F;
	color: #8000FF;
}

.highlight {
	border: solid 2px #FF0000;
}

.correctTile {
	border: solid 2px #00FF00;
}

.falseTile {
	border: solid 2px #FF0000;
}

.burger-menu {
	display: flex;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	position: absolute;
	left: inherit;
	right: 20px;
	padding: 10px 0;
}

.burger-menu div {
	width: 25px;
	height: 3px;
	background: #fff;
	transition: 0.3s;
}

.dropdown-menu {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 60px;
	right: 20px;
	background: #1c1c1c;
	border-radius: 8px;
	padding: 10px 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	left: inherit;
}

.dropdown-menu a {
	text-decoration: none;
	color: #fff;
	padding: 10px 20px;
	display: block;
	transition: background 0.3s;
}

.dropdown-menu a:hover {
	background: #444;
}
.board {
	display: grid;
	grid-template-columns: repeat(4, 80px);
	grid-gap: 10px;
	justify-content: center;
	align-items: center;
	/*padding: 20px;*/
	/*background: rgba(255, 255, 255, 0.1);*/
	/*border-radius: 15px;*/
	/*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);*/
}

.centrePanel {
	text-align: center;
	justify-content: center;
	align-items: center;
}

.questionTile {
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.2s, background 0.3s;
}

.questionTile:hover {
	transform: scale(1.1);
}

.questionTile.highlight {
	background: #f39c12;
	color: #000;
}

.questionTile.correctTile {
	background: #009c00;
	color: #000;
}

.questionTile.falseTile {
	background: #f30000;
	color: #000;
}

.playerGridIcon {
  position: relative;
  cursor: pointer;
}

.playerGridIcon .answerGridToolTip {
    position: absolute;
	cursor: pointer;
    top: 20px;
    background: silver;
    padding: 4px;
    left: 0;
    white-space: nowrap;
	z-index: 999;
}

.questionText {
	margin: 20px 0;
	font-size: 18px;
}

.answerOption {
	list-style: none;
	padding: 0;
}

.answerOption li {
	margin: 15px 0;
}

.answerOption input[type="radio"] {
	display: none;
}

.answerOption label {
	display: block;
	padding: 15px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background 0.3s, transform 0.2s;
}

.answerOption label:hover {
	background: rgba(255, 255, 255, 0.4);
	transform: scale(1.02);
}

.answerOption input[type="radio"]:checked + label {
	background: #ffc107;
	color: #000;
	font-weight: bold;
}

.answerOption.correctTile input[type="radio"] + label {
	background: #009c00;
	color: #000;
}

.answerOption.falseTile input[type="radio"] + label {
	background: #f30000;
	color: #000;
}

.answerheat {
	float: right;
}

.answerButton {
	margin-top: 20px;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.answerButton:hover {
	background: #ff8c00;
}

.copyButton {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.copyButton:hover {
	background: #ff8c00;
}

.copyInviteLinkButton {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.copyInviteLinkButton:hover {
	background: #ff8c00;
}

#Scoreboard {
	width: 120px;
	height: 120px;
}

.disputeButton {
	margin-top: 20px;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.disputeButton:hover {
	background: #ff8c00;
}

.complainButton {
	margin-top: 20px;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.complainButton:hover {
	background: #ff8c00;
}

.editButton {
	margin-top: 20px;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.editButton:hover {
	background: #ff8c00;
}

#DisputeFeedback {
	display:none;
}

#DisputeSent {
	display:none;
}

.statisticDetail {
	list-style: none;
	padding: 0;
}

.statisticDetail li {
	margin: 15px 0;
}

.statisticDetail label {
	display: block;
	padding: 15px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.2);
	/*cursor: pointer;*/
	transition: background 0.3s, transform 0.2s;
}

.statisticDetail label:hover {
	background: rgba(255, 255, 255, 0.4);
	/*transform: scale(1.02);*/
}

.gridIcon {
    height: 16px;
    overflow: hidden;
    position: relative;
	margin-top: -3px;
}

.gridIcon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container without distortion */
}

.randomNameExamples li {
	cursor: pointer;
}

/*.scoreboardRow td {
	text-align: center;
	vertical-align: middle;
}*/

#TeamDescription {
	color: #555;	
}

.createTeamButton {
	margin-top: 20px;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.createTeamButton:hover {
	background: #ff8c00;
}

.deleteTeamButton {
	margin-top: 20px;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.deleteTeamButton:hover {
	background: #ff8c00;
}

.joinTeamButton {
	margin-top: 20px;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.joinTeamButton:hover {
	background: #ff8c00;
}

.cancelTeamEditButton {
	margin-top: 20px;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.cancelTeamEditButton:hover {
	background: #ff8c00;
}

.smallActionButton {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

.smallActionButton:hover {
	background: #ff8c00;
}

#LeagueButton {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background: #ffc107;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
}

#LeagueButton:hover {
	background: #ff8c00;
}

#fireworksCanvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* So users can still click underlying elements */
  width: 100vw;
  height: 100vh;
  z-index: 9000; /* Keep it above all content */
}

#congratulationsBox {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #FFFFFF;
	z-index: 9999;
}