/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* app/assets/stylesheets/application.css */
body {
  font-family: Arial, Helvetica, sans-serif;
}
h1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 0.5rem;
  /* add background color */
  background-color: #f4a261;
}
h2 {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 0.5rem;
  /* add background color */
  background-color: #f4a261;
}
nav {
  justify-content: flex-end;
  display: flex;
  font-size: 0.875em;
  gap: 0.5rem;
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem;
}

nav a {
  display: inline-block;
}

main {
}
.score_container {
		display: flex;
    		flex-wrap: wrap;
    		gap: 5px;
  		outline: 1px solid #ccc;
  		padding: 10px;
    		justify-content: center;

	.score {
		text-align: center;
      		align-items: center; /* Vertical center */
  		background-color: lightgreen;
  		font-size: 1.1em;
		border:3px solid green;
		padding: 5px;
		border-radius: 15px;
	}
	.bonus {
		text-align: center;
      		align-items: center; /* Vertical center */
  		background-color: lightyellow;
  		font-size: 1.1em;
		border:3px solid yellow;
		padding: 5px;
		border-radius: 15px;
	}
}
.selectable_lists_wrapper {
	display: flex;
	gap: 20px;
	justify-content: center;
	padding: 10px;
}
.selectable_list_container {
	flex: 1;
	max-width: 45%;
	.selectable_list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		outline: 1px solid #ccc;
		padding: 10px;
		background-color: #E6E6E6;
		justify-content: center;
		.selectable_item {
			text-align: center;
			align-items: center;
			background-color: #FFF0F0;
			font-size: 1.1em;
			border: 3px solid black;
			padding: 5px;
			border-radius: 15px;
			cursor: pointer;
			&:hover {
				background-color: #FFD0D0;
				border-color: #cc0000;
			}
			&.selected {
				background-color: #90EE90;
				border-color: #228B22;
			}
		}
	}
}
.life_bar {
	.life_icon {
		width: 30px;
		height: 30px;
	}
}
#matches_high_scores {
	h2 {
		text-align: center;
  		font-size: 1.5em;
  		margin-bottom: 0.5rem;
  		/* add background color */

	}
	justify-content: center; /* Center horizontally */
	table{
		border-collapse: collapse;
		width: 50%;
		margin: 0 auto;
		color: white:
	}
	th, td {
	padding: 8px;
	text-align: left;
}
}
.bulk-edit-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;

  &.open {
    display: flex;
  }

  .bulk-edit-modal-content {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    min-width: 300px;

    h3 {
      margin-top: 0;
    }
  }

  .bulk-edit-modal-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
  }
}
.guess_result {
	/* have  content horizontal */
	display: flex;
	.correct {
		color: green;
	}
	.incorrect {
		color: red;
	}
	.extra {
		color: orange;
	}
}