.container {
    max-width: 360px;
    margin: 0 auto;
    background-color: #eee;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.modal { color: #111; }

h1, h2 {
    color: #333;
}

label {
    font-weight: bold;
}

button {
    padding: 10px 15px;
    /*background-color: #4CAF50;*/
    background-color: #60a74f;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

fieldset {
	display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 1em;
	margin-bottom: 1em;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin: 0 0 1em;
}

fieldset.wrap {
	flex-wrap: wrap;
}

#pegDraw,
#matchLobby {
	color: #ccc;
}

@media screen and (max-width: 32em) {
	#pegDraw:first-child hr {
		margin-top: .5em;
	}
}

#weighInStatus,
#drawStat {
	color: #777;
}

#anglerInfo input {
	display: block;
	width: 96%;
	margin: .5em 0;
	padding: .5em 2%;
}

#matchLobby input {
	padding: .5em;
	border: 0;
}

#matchLobby input,
#matchLobby button {
	display: inline-block;
    vertical-align: middle;
}

#matchLobby button {
	padding: 1em;
}

ul#matchList {
	padding: 0;
}

ul#matchList li {
	list-style: none;
	cursor: pointer;
	display: inline-block;
    padding: .5em .75em;
    border-radius: 4px;
    border: 1px solid #999;
    margin: .5em .25em 0;
	font-weight: bold;
	color: #efefef;
}
ul#matchList li:hover,
ul#matchList li:active,
ul#matchList li:focus {
	color: #4CAF50;
}

#anglerInfo input:disabled {
	background: #ddd;
}

#anglerInfo input[type=checkbox] {
	width: auto;
	display: inline;
}

#resultsTable {
	margin: 1em 0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

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

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

table.meta-table th {
	background: #222;
}

table.meta-table,
table.meta-table th,
table.meta-table td {
    border: 1px solid #444;
}

.hidden {
    display: none;
}

/* Show these fields when the checkbox is checked */
#teamName, #pegNumber, #teamNameLabel, #pegNumberLabel {
    display: block;
}

footer#colophon {
	margin-bottom: 1em;
}

#progressBarContainer {
  background-color: #4EC9B0;
  height: 20px;
  border-radius: 5px;
  margin: 1em 0;
  overflow: hidden;
}

#progressBar {
  height: 100%;
  background-color: #f44336;
  width: 0%;
  border-radius: 5px;
  transition: width 1s ease-in-out;
}

#remainingTime {
  font-size: .7em;
  color: #111;
  line-height: 1.85em;
  text-transform: uppercase;
  opacity: .7;    
  position: absolute;
  left: 0;
  right: 0;
}
/*
section {
  margin-bottom: 30px;
}*/

#drawContent, #weighInContent {
  font-size: 18px;
  color: #111;
  margin-top: 1em;
}

.bubble {
	border-radius: 4px;
	background: white;
	padding: .75em 1em;
	position: relative;
	margin-bottom: .25em;
}

.bubble span {
	display: inline-block;
}

.bubble span.notification-type,
.bubble span.notification-timestamp {
	display: block;
	font-size: .8em;
	color: #aaa;
}

.bubble span.notification-type {
	text-align: left;
	border-bottom: 1px solid #ccc;
	padding-bottom: .25em;
	margin-bottom: .5em;
}

.bubble span.notification-angler {
	font-weight: bold;
}

.bubble span.notification-angler:after {
	content: "→";
	display: inline-block;
	margin: 0 .5em;
}

.bubble span.notification-weight {
	font-size: 1em;
}

.bubble span.notification-timestamp {
	text-align: right;
	border-top: 1px solid #ccc;
	padding-top: .25em;
	margin-top: .5em;
}

.notification-ended {
	background-color: #60a74f;
	border-radius: 4px;
	padding: .5em;
	color: #111;
	margin-top: .25em;
	
	display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: .25em;
}

#leaveMatchRoomBtn {
	background-color: #f44336;
	vertical-align: middle;
}

h2#matchRoomCode {
	background: #ededed;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: .5em .5em;
    color: darkgreen;
    margin: .5em;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;    
}

h2#matchRoomCode:hover,
h2#matchRoomCode:active,
h2#matchRoomCode:focus {
	color: white;
	background: darkgreen;
}

#drawNotifications,
#weighInNotifications {
  overflow: hidden; /* Hide overflow when collapsed */
  max-height: 0px; /* Start with collapsed height */
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition for both height and opacity */
  opacity: 0;

}

#drawNotifications.expanded,
#weighInNotifications.expanded {
  max-height: 10000px; /* Start with collapsed height */
  opacity: 1;
}

#drawToggle,
#weighInToggle {
	width: 100%;
	font-weight: bold;
	text-transform: uppercase;
}

#matchResultsTable {
	margin-top: 1em;
	color: #111;
}

.modal img {
    max-width: 120px;
    float: left;
    margin: 1.5em 1.5em 1.25em 0;
}

/* NAV */
/* Initially hide all sub-menus */
.sub-menu {
    display: none;
}

/* Show sub-menu when toggled-on class is added */
.sub-menu.toggled-on {
    display: block;
}

/* Optional: for mobile, hide the menu when it's toggled off */
.main-navigation.toggled-on .menu-top-menu-container {
    display: block;
}

/* Optional: collapse the menu by default (for mobile/tablet) */
.main-navigation .menu-top-menu-container {
    display: none;
}

nav .icon {
    color: #fff;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: .5em;
    fill: #ddd;
    transition: transform 0.3s ease;
}
nav .icon-angle-down {
    background: rgb(17, 17, 17);
    position: absolute;
    right: 1em;
    top: .7em;
    width: 26px;
    height: 26px;
}
.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.pegBall {
    position: static;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #a8dfff 0%, #60b0d3 50%, #1d3a50 100%);
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: none;
    z-index: 1;
    color: #111 !important;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

.match {
	border-radius: 4px;
	border: 1px solid #444;
	background: #222;
	margin: 0;
	padding: .5em 1em;
	font-weight: bold;
	vertical-align: middle;
	line-height: 1.2em;
}

.match.starting-soon {
	border: 1px solid #2a6c7a;
	background: #48a9be;
	color: #111;
	animation: pulseSaturation 1s infinite ease-in-out;
}

.match.ending-soon {
	border: 1px solid #a9702c;
	background: #f49d36;
	color: #111;
	animation: pulseSaturation 1s infinite ease-in-out;
}

@keyframes pulseSaturation {
	0%, 50% {
		filter: saturate(100%);
		opacity: 1;
	}
	25% {
		filter: saturate(20%);
		opacity: .3;
	}
}

.match.all-in {
	border: 1px solid #44d64a;
	background: #4caf50;
	color: #111;
}

.match.all-out {
	border: 1px solid #b63027;
	background: #f44336;
	color: #111;
}

.match.in-progress {
	border: 1px solid #444;
	background: #222;
	color: #999;
}

.audio-button {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  width: 32px;
  height: 32px;
  padding: 0;
  top: 1px;
  right: .5em;
}

.audio-button:hover,
.audio-button:active,
.audio-button:focus {
	background: none;
}

.audio-button .icon {
  width: 100%;
  height: 100%;
  fill: #555;
  transition: opacity 0.2s ease;
}

.audio-button .icon:focus,
.audio-button .icon:hover,
.audio-button .icon:active {
  fill: #d1d066;
}

.audio-button .muted-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.audio-button .muted-overlay.hidden {
  opacity: 0;
}

.audio-button .muted-overlay.visible {
  opacity: 1;
}

@media screen and (max-width: 32em) {
	#matchLobby input {
		width: 92%;
		padding: .5em 4%;
		text-align: center;
	}
	#matchLobby button {
		width: 100%;
	}
}