#title{
  text-align: center;
  font-size: xx-large;
  font-family: WesternTitle;
}

#room{
	text-transform: uppercase;
}

#room::placeholder{
	text-transform: none;
}

.hidden{
	pointer-events: none;
	visibility: hidden;
}

#errorMsg {
  padding: 10px;
  margin: 10px;
  background: #ffdddd;
  border: 1px solid;
  opacity: 0;
  transition: opacity 2.5s ease;
  visibility: hidden;
}

#errorMsg.visible{
	/*visibility: visible;*/
	transition: opacity 0s;
        opacity: 1;
        pointer-events: none;
}

#playerList{
	list-style-type: none;
	padding: 0;
}	

#playerList li{
	margin: 4px 0;
	font-weight: bold;
}

.invisible{
	display: none;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(30, 30, 30, 0.95);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
}

.overlay.visible {
  visibility: visible;
}

.overlay-content {
  text-align: center;
  background: #222;
  padding: 2rem;
  border: solid 4px #000;
  position: relative;
  max-width: 90%;
}

.overlay-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.socketoverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(36, 1, 1, 0.95);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
}

.socketoverlay.visible {
  visibility: visible;
}

.socketoverlay-content {
  text-align: center;
  background: #2d0101;
  padding: 2rem;
  border: solid 4px #000;
  position: relative;
  max-width: 90%;
}

.socketoverlay-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

#dynamic-content {
  margin-top: 20px;
  padding: 10px;
}

.role-screen {
  text-align: center;
}

.reveal-role-btn {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  background-color: #222;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 1rem;
}

.reveal-role-btn:hover {
  background-color: #444;
}

.role-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: darkred;
}

.role-description {
  font-size: 1rem;
  color: #333;
}

.role-button-container {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 9999;
}

.role-btn-small {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 8px;
  background-color: #444;
  color: #fff;
  border: none;
  cursor: pointer;
}

.role-details {
  position: absolute;
  bottom: 50px;
  right: 0;
  background: white;
  border: 1px solid #aaa;
  padding: 10px;
  width: 200px;
  z-index: 10000;
}

.vote-btn {
  display: inline-block;
  padding: 8px 14px;
  margin: 6px 0;
  border-radius: 12px;          /* rounded rectangle */
  background-color: #bbbbbb;    /* gray background */
  color: #333333;               /* dark text */
  font-family: IM Fell English; /* rustic vibe */
  border: 2px solid black;      /* solid border */
  position: relative;           /* allow pseudo-element overlay */
  overflow: hidden;             /* keep border effect inside */
}

.vote-btn.voted {
  background-color: #2ecc71; /* regular green when selected */
  color: #fff;
  border-color: black;
}

.vote-confirm {
  margin-top: 1em;
  font-weight: bold;
  color: black;
}

:not(.voted):not(.condemned):not(.vote-none-btn)vote-btn{
  border: 2px solid black;
  background-color: #ffffff;
  color: #222222;
}

.vote-btn.voted{
  background-color: #bbffbb;
  border: 2px solid green;
  color: #004400;
}

.vote-btn.condemned{
  background-color: #ffbbbb;
  border: 2px solid red;
  color: #440000;
}

.vote-btn.exorcised{
  background-color: #aaaaaa;
  color: #555555;
  border: 2px solid black;
}

.vote-btn.watched-over{
  background-color: green;
  color: ghostwhite;
  border: 2px dotted #003300;
}

.my-name{
  color: #c1a90e !important;
}

.yesno-btn {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  background-color: #222;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 1rem;
}

.yesno-btn:hover {
  background-color: #444;
}

.yesno-btn.selected-btn{
  background-color: #f6ffbb;
  border: 2px solid orange;
  color: #444300;
}

.vote-buttonholder {
  display: flex;
  /* justify-content: center; */
  /* align-items: center;    */
  gap: 20px;               
  margin-top: 20px;         
}

.vote-btn.hallucination-btn.target-btn { border: 2px dashed #8aa; }
.vote-btn.hallucination-btn.vision-btn { border: 2px dashed #a8a; }

.vote-btn.hallucination-target { background: #2f4f4f; color: #fff; }
.vote-btn.hallucination-vision { background: #4b0082; color: #fff; }

.vote-btn.hallucination-return {
  background: transparent;
  border: 1px solid #888;
  color: #ccc;
}

.trust-requests-container .vote-btn {
  display: inline-block;
  margin: 6px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vote-btn.trust-btn.trust {
  background: #2d8a34;
  color: white;
}

.vote-btn.trust-btn.reject {
  background: #b33;
  color: white;
}

.gameinfo-container {
  margin: 1rem 0;
  padding: 1rem;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.gameinfo-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.gameinfo-options {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0;
}

.gameinfo-options li {
  margin-bottom: 0.4rem;
  color: #444;
}

.evil-attack-styling{
  color: rosybrown;
}

.reveal-btn {
  background-color: #1a1a1a;
  color: #fff;
  font-family: serif; 
  font-size: 1.1rem;
  border: 2px solid #444;
  padding: 8px 14px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.reveal-btn:hover {
  background-color: #333;
  border-color: #666;
}

.reveal-selected {
  background-color: #444;
  border-color: #aaa;
}

.regular-wakeup{
  color: #990000;
}

.wakeup-color{
  color: #009900;
}

#paranoiatext-overlay{
  width: 80%;
  height: 15%;
  margin: auto;
  border: 4px solid #aaaaaa;
  border-radius: 4px;
  background-color: #555555;
  position: relative;
  margin-top: 50px;
  text-align: center;
  align-content: center;
  padding: 5px;
  color: #ffffff;
}