html {
	background-image: url("../images/background.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	font-size: 62.5%;
}

html, body {
	width: 100%;
	height: 100%;
	position: fixed;
}

body {
	display: block;

	padding: 0;
	margin: 0;

	font-size: 20px;
	font-size: 2.0rem;

	font-family: sans-serif;

	overflow: hidden;
}

a {
	color: white;
	font-weight: 600;
}

#settings {
	padding: 20px;
	padding: 2rem;

	transition: opacity 0.2s;

	width: 80%;
	max-width: 500px;
	max-width: 50rem;

	color: white;

	position: absolute;

	z-index: 100;
}

#settings-link {
	background-color: rgba(88, 15, 13, 0.8);
	padding: 10px;
	padding: 1rem;
	line-height: 200%;
	height: 200%;
}

.inner-container {
	background-color: rgba(88, 15, 13, 0.8);
	padding: 20px;
	padding: 2rem;
}

.inner-container.invisible {
	display: none;
}

.invisible {
	opacity: 0;
}

.contestant-settings {
	width: 100%;
	height: 72px;
	height: 7.2rem;

	margin-top: -1px;
	margin-top: -0.1rem;

	border: 1px solid rgba(0, 0, 0, 0.6);
	border: 0.1rem solid rgna(0, 0, 0 , 0.6);
}

.contestant-settings * {
	float: right;

	margin-right: 10px;
	margin-right: 1rem;
}

.contestant-settings .img-container {
	height: 72px;
	width: 72px;

	height: 7.2rem;
	width: 7.2rem;

	display: block;

	float: left;
}

.contestant-settings img {
	max-width: 72px;
	max-height: 72px;

	max-width: 7.2rem;
	max-height: 7.2rem;

	display: block;
}

.contestant-settings label {
	line-height: 72px;
	line-height: 7.2rem;
}

.contestant-settings input {
	width: 90px;
	width: 9rem;

	font-size: 30px;
	font-size: 3rem;
	height: 30px;
	height: 3rem;

	padding: 0;
	border: none;

	margin-top: 21px;
	margin-top: 2.1rem;
}

.contestant-settings .delete {
	line-height: 72px;
	line-height: 7.2rem;

	padding: 0 4px;
	padding: 0 0.4rem;

	cursor: pointer;
}

#add {
	text-align: center;
	line-height: 64px;
	line-height: 6.4rem;
}

main {
	width: 1400px;
	height: 413px; /* Default height for single row */
	position: absolute;
	left: 0;
	top: 0; /* Reset to top 0 - we'll center manually in JS */
	transform: none; /* Remove translateY(-50%) which is causing issues */
	margin: 0;
	-ms-transform-origin: left top; /* Change origin to top */
	transform-origin: left top; /* Change origin to top */
	display: block;
	overflow: visible;
}

.contestant {
	width: 205px;
	margin: 0 auto;
	position: absolute;
	transition: transform 1s ease-in-out;
	will-change: transform; /* Help browser optimize the animation */
}

.contestant img {
	width: 100%;
}

.score-container, .frame-container {
	position: relative;
}

/* Better layout of the score container to avoid overlapping */
/* align the container in the center */
.score-container {
	/* margin-top: 25px; */
	position: relative;
	cursor: text;
	/* Add scaling to 75% */
	transform: scale(0.75);
	/* Center the scaled container */
	transform-origin: top center;
	/* Adjust left position to center it below the frame */
	/* left: 12.5%; This creates a center alignment effect after scaling */
}

.frame-scaler {
	transition: transform 2s;

	-ms-transform-origin: bottom;
	transform-origin: bottom;
}

.larger {
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.large {
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.frame-container {
	filter: drop-shadow(15px 15px 3px rgba(0, 0, 0, 0.4));

	margin-bottom: 25px;
	height: 250px;

	-ms-transform-origin: center;
	transform-origin: center;

	-webkit-animation: rotate 3s ease-in-out alternate infinite;
	animation: rotate 3s ease-in-out alternate infinite;

	cursor: pointer;
}

.frame {
	transform: translateZ(0);
}

@keyframes rotate {
	0% {
		transform: rotate(-4deg);
	}

	100% {
		transform: rotate(4deg);
	}
}

.frame-container img {
	position: absolute;
}

.fill {
	top: 33px;
	right: 33px;
	bottom: 33px;
	left: 33px;

	position: absolute;

	background-color: white;
	background-position: center;
	background-size: cover;

	overflow: hidden;
}

.shadow {
	width: 100%;
	height: 100%;
	position: absolute;

	top: 0;
	left: 0;

	box-shadow: inset -5px 5px 7px rgba(0, 0, 0, 0.5);
}

.score {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	width: 100%;
	height: 100%;

	box-sizing: border-box;

	/* Use flexbox for centering */
	display: flex;
	justify-content: center;
	align-items: center;

	/* Slight adjustment to visually center text on the seal image */
	transform: translateX(8px);

	margin: 0;
	padding: 0;

	color: white;
	font-family: "veteran_typewriterregular", sans-serif;

	/* Use relative font size instead of fixed pixel size */
	font-size: calc(59px * 1); /* Base size with a scaling factor */

	font-weight: normal;
	font-style: normal;

	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.score-edit {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	font-size: 92px;
}

.cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;

	background-size: cover;
	background-position: center;

	display: none;
}

noscript h1 {
	background-color: white;
}

#file-input {
	display: none;
}

#play-button {
	/* Remove the original play button styling */
	color: transparent;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid black;
	background: rgba(88, 15, 13, 0.8);
	position: absolute;
	right: 32px;
	top: 32px;
	cursor: pointer;
	display: flex; /* Use flexbox for centering the SVG */
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, background-color 0.2s;
}

#play-button:hover {
	background: rgba(88, 15, 13, 1);
	transform: scale(1.1);
}

#play-button.loading {
	animation: pulsate 1.5s infinite;
}

#play-button.has-updates {
	animation: flash-green 0.5s ease-in-out 3; /* 0.5s duration * 3 iterations = 1.5s */
}

#play-button.no-updates {
	animation: flash-red 0.5s ease-in-out 2; /* 0.5s duration * 2 iterations = 1.0s */
}

@keyframes pulsate {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes flash-green {
	0% { background-color: #4CAF50; transform: scale(1); }
	50% { background-color: #66BB6A; transform: scale(1.05); }
	100% { background-color: #4CAF50; transform: scale(1); }
}

@keyframes flash-red {
	0% {
		background-color: #ff4136; /* Red */
		transform: scale(1);
	}
	50% {
		background-color: #ff766e; /* Lighter red */
		transform: scale(1.05);
	}
	100% {
		background-color: #ff4136; /* Red */
		transform: scale(1);
	}
}

.exit-button {
	position: absolute;
	top: -25px;
	right: -25px;

	border-radius: 50%;
	width: 50px;
	height: 50px;

	font-size: 32px;
}

.locked .exit-button, .locked .add-button {
	display: none;
}

.add-button {
	top: 149.5px;

	position: absolute;
	width: 72px;
	height: 72px;

	border-radius: 50%;

	background: black;
	background: rgba(127, 127, 127, 0.8);
	border: 2px solid black;

	font-size: 50px;
	color: white;

	cursor: pointer;
}

#csv-input {
	display: none;
}

.control-panel {
	position: absolute;
	bottom: 32px;
	right: 32px;
	background: rgba(88, 15, 13, 0.8);
	padding: 15px;
	border-radius: 5px;
	display: none; /* Hide this since we're not using it anymore */
}

.control-panel button {
	background: #fff;
	border: 2px solid black;
	padding: 8px 12px;
	cursor: pointer;
	font-weight: bold;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.control-panel button:hover {
	background: #eee;
}

#csv-status {
	color: white;
	font-weight: bold;
	text-align: center;
	padding: 5px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

#csv-status.linked {
	background: rgba(20, 150, 20, 0.5);
}

#csv-status.error {
	background: rgba(200, 0, 0, 0.5);
}

#check-updates {
	background: #4CAF50;
	color: white;
}

#check-updates:hover {
	background: #45a049;
}

.contestant-name {
    position: absolute;
    bottom: -25px; /* Increased from -30px to -50px to provide more space */
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 5;
    font-family: "veteran_typewriterregular", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

.task-info {
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
    background: rgba(88, 15, 13, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 80%;
    margin: 0 auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

/* Add styles for the table toggle button */
#table-toggle-button {
    position: absolute;
    top: 120px;
    right: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(88, 15, 13, 0.8);
    border: 2px solid black;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

#table-toggle-button:hover {
    background: rgba(88, 15, 13, 1);
    transform: scale(1.1);
}

/* Remove the reset state button CSS since we're no longer using it */
/*
#reset-state-button {
    position: absolute;
    top: 180px;
    right: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(88, 15, 13, 0.8);
    border: 2px solid black;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

#reset-state-button:hover {
    background: rgba(88, 15, 13, 1);
    transform: scale(1.1);
}
*/

/* Add styles for the table overlay */
#scores-table-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    background-color: rgba(88, 15, 13, 0.95);
    padding: 30px;
    border-radius: 10px;
    width: 80%;
    max-width: 1000px;
    max-height: 80vh;
    position: relative;
    color: white;
    border: 3px solid #ffd700;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#close-table-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
}

#close-table-button:hover {
    color: #ffd700;
}

.overlay-content h2 {
    text-align: center;
    font-family: "veteran_typewriterregular", sans-serif;
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #ffd700;
}

.table-container {
    overflow-x: auto;
    max-height: calc(80vh - 100px);
}

#scores-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "veteran_typewriterregular", sans-serif;
}

#scores-table th, #scores-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#scores-table th {
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffd700;
    font-weight: normal;
    font-size: 20px;
}

#scores-table tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.2);
}

#scores-table tr:hover {
    background-color: rgba(255, 215, 0, 0.1);
}

#scores-table td.contestant-name {
    text-align: left;
    font-weight: bold;
    color: white;
    padding-left: 20px;
    position: sticky;
    left: 0;
    background-color: rgba(88, 15, 13, 0.95);
}

#scores-table td.highlight {
    color: #ffd700;
    font-weight: bold;
}