body { font-family: system-ui, sans-serif; margin: 12px }
#app { display:flex; flex-direction:column; gap:12px }
#main { display:flex; gap:24px }
.col { border:1px solid #ddd; padding:12px; border-radius:6px; min-width:200px }
pre { white-space:pre-wrap; font-size:12px }


    body { 
       margin: 12px ;
       font-size: 20px;
       background-image: url('./static/imgs/bg2.png');
        background-size: cover;

      }
#app { display:flex; flex-direction:column; gap:12px }
#main { 
  display:flex; 
  gap:24px; 
  flex-direction:column;
}



button { 
  padding:8px 16px; border-radius:8px; cursor:pointer;
  border: 1px solid #ccc;
  background-color: #f9f9f9;

 }
button:disabled {
  background-color: #eee;
  border: 1px solid #aaa;
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}
.col { border:1px solid #ddd; padding:12px; border-radius:6px; min-width:200px; background-color: #f0f0f033; }
pre { white-space:pre-wrap; font-size:18px }
#players {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.player {
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 2px;
  background-image: url('./imgs/ui_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

color: white;
  color: white;
  width: 135px;
}
.profile_images {
  position: relative;
  width: 128px;
  height: 128px;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  display: flex;
}
.profile_images img:not(.role_overlay) {
  position: absolute;
  border-radius: 8px;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.player .name {
  margin-top: 8px;
  margin-bottom: 16px;
  font-weight: bold;
  overflow: hidden;
  width: 135px;
  height: 27px;
  text-align: center;
}
.vote_status {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #aaa;
  border-radius: 4px;
  width: 80%;
  text-align: center;
}
#decks { display: flex; flex-direction: row; }
.deck {
  position: relative;
  display: flex;
  width: 100px;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  height: 135px;
  margin: 0; /* remove margin-right */
}

.deck_card {
  background-size: cover;
  background-image: url('./static/imgs/card_back.png');
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid #999;
  width: 90px;
  height: 135px;
}
.deck_holder { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  margin-right: 24px; 
  justify-content: center;
  border: 1px solid #aaa;
  border-radius: 8px;
  padding: 8px;
  
  background-image: url('./imgs/ui_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;;
color: white;
}
#decks{
  display:flex;
  flex-direction:row;
  gap:24px;
  justify-content: center;
  align-items: center;


}
#game_status {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #aaa;
  border-radius: 8px;
  padding: 8px;
  
  background-image: url('./imgs/ui_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;;
color: white;
}
#deck_info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.policy_tracker {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
}
.policy_spot {
  width: 100px;
  height: 150px;
  border: 1px solid #999;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.policy_spot .card {
  position: static;
  margin: 0;
  margin-top: 7px;
  margin-left: 4px;
  box-shadow: 0 0 16px rgba(0,0,0,0.8); /* Restore the normal card shadow */
}
.policy_spot .action {
  margin-top: 7px;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.05;
  padding: 0 4px;
  box-sizing: border-box;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.policy_spot .action_description {
  font-size: 0.7rem;
  color: #999;
  text-align: center;
  width: 100%;
  margin: 0px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1;
  padding: 0 4px;
  box-sizing: border-box;
  height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.card {
  width: 90px;
  height: 135px;
  border-radius: 12px;
  border: 1px solid #999;
  box-shadow: 0 0 16px rgba(0,0,0,0.8);
}

.party {
  border: 1px solid #aaa;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  background-image: url('./imgs/ui_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;;
color: white;
}
#parties {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-items: center;
}

#parties > .party:last-child:nth-child(odd) {
  grid-column: 1 / -1; /* span both columns */
  justify-self: center; /* center it */
}
#unenacted_policies, #player_roles {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #4D301B;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  color: white;
}
.card_choice #card_options {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}

.card_choice{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.excluded{
  opacity: 0.5;
  pointer-events: none;
}

.card_choice #card_options .card_option {
  cursor: pointer;
  transition: transform 0.2s;
}

.card_choice #card_options .card_option:hover {
  transform: scale(1.1);
}

.card_choice #card_options .card_option.selected {
  border: 2px solid #26c426;
  transform: scale(1.1);
}


.vote_popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vote_popup #vote_options {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-bottom: 12px;
}


.debug_element {
  display: none;
}

.dead{
  opacity: 0.5;
  pointer-events: none;
  background-color: #ff0000;
}

.player_choice #player_options {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}
.player_choice{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.player_choice #player_options .player_option {
  cursor: pointer;
  transition: transform 0.2s;
}

.player_choice #player_options .player_option:hover {
  transform: scale(1.1);
}

.player_choice #player_options .player_option.selected {
  border: 2px solid #007BFF;
}

.role_overlay {
  border-radius: 8px;
  position: absolute;
  left: 0px;
}

.needs_to_vote .profile_images {
  box-shadow: 0 0 24px rgb(255, 145, 0);
}
.profile_images {
  border-radius: 8px;
}

.communist {
  background-image: url('./static/imgs/card_faces/communist.png');
  background-size: cover;
}


.fascist {
  background-image: url('./static/imgs/card_faces/fascist.png');
  background-size: cover;
}
.liberal {
  background-image: url('./static/imgs/card_faces/liberal.png');
  background-size: cover;
}
.anarchist {
  background-image: url('./static/imgs/card_faces/anarchist.png');
  background-size: cover;
}
.monarchist {
  background-image: url('./static/imgs/card_faces/monarchist.png');
  background-size: cover;
}.epic_display {
  position: fixed;
  height: 250px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -200px;
  opacity: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
}
#epic_card_display{ display: flex; flex-direction: row; gap: 12px; justify-content: center; margin-bottom: 12px; }

@keyframes slideInUp {
  from { bottom: -200px; opacity: 0; }
  to { bottom: 50%; opacity: 1; transform: translate(-50%, 50%); }
}

@keyframes slideOutDown {
  from { bottom: 50%; opacity: 1; transform: translate(-50%, 50%); }
  to { bottom: -200px; opacity: 0; }
}

.epic_display.show {
  animation: slideInUp 0.4s ease-out forwards;
}

.epic_display.hide {
  animation: slideOutDown 0.4s ease-in forwards;
}

.status {
  font-weight: bold;
  font-size: 1.5rem;
  height: 24px;
  margin-bottom: 8px;
}

.party_option {
  cursor: pointer;
  transition: transform 0.2s;
  margin-bottom: 10px;
}
.party_option:hover {
  transform: scale(1.1);
}
.party_option.selected {
  border: 2px solid #007BFF;
}



#what_are_we_waiting_for{
  margin-top: 24px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  
  background-image: url('./imgs/ui_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;;
color: white;
}
#chaos_tracker {
  margin-top: 24px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  background-image: url('./imgs/ui_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  color: white;
}
.level_container {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 4px;
}
.voted_nein{
  background-color: #ff0000;
  border-color: #ff0000;
  color: white;
  text-align: center;
  line-height: 24px;
}
.voted_ja{
  background-color: #4caf50;
  border-color: #4caf50;
  color: white;
  text-align: center;
  line-height: 24px;
}
.level_container.active {
  background-color: #4caf50;
  border-color: #4caf50;
  color: white;
  text-align: center;
  line-height: 24px;
}
#chaos_levels {
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin-top: 8px;
}
.player_check .role {
  margin-top: 12px;
  font-weight: bold;
}

.chancellor .profile_images{
  border-width: 2px;
  border-color: #0000ff;
  border-style: solid;
  border-radius: 8px;
}
.president .profile_images{
  border-color: #ff0000;
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
}

.end_term_button:not(:disabled) {
  background-color: #4caf50;
  border-color: #4caf50;
  color: white;
  box-shadow: 0 0px 50px rgb(60, 255, 0);
}
.disconnected { 
  background-color: black;
  font-weight: bold; 
}
/* Join section styles */
.join_holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  margin: 0 auto;
}

.join_holder input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 18px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.join_holder input:focus {
  outline: none;
  border-color: #007BFF;
  background-color: #fff;
}

.join_holder input::placeholder {
  color: #999;
}

.join_holder button {
  width: 100%;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  background-color: #4caf50;
  color: white;
  border: 1px solid #4caf50;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.join_holder button:hover:not(:disabled) {
  background-color: #45a049;
  transform: translateY(-1px);
}

.join_holder button:active:not(:disabled) {
  transform: translateY(0);
}

.join_holder button:disabled {
  background-color: #eee;
  border: 1px solid #aaa;
  color: #999;
  cursor: not-allowed;
  transform: none;
}


#vote_yes{
  width: 240px;
  max-width: 240px;
  height: 75px;
  max-height: 75px;
  color: white;
  text-align: center;
  line-height: 75px;
  background-size: cover;
  background-image: url('./static/imgs/ja.png');
  border: 2px solid white;
  border-radius: 16px;
}
#vote_no{
  max-width: 240px;
  width: 240px;
  max-height: 75px;
  height: 75px;
  color: white;
  text-align: center;
  line-height: 75px;
  background-size: cover;
  background-image: url('./static/imgs/nein.png');
  border: 2px solid white;
  border-radius: 16px;
}
#vote_yes.selected{
  box-shadow: 0 0 24px rgb(0, 255, 0);
  border: 2px solid rgb(0, 255, 0);
  transform: scale(1.1);
}

#vote_no.selected{
  box-shadow: 0 0 24px rgb(255, 0, 0);
  border: 2px solid rgb(255, 0, 0);
  transform: scale(1.1);
}

#vote_yes:hover{
  box-shadow: 0 0 24px rgb(0, 255, 0);
  border: 4px solid white;
}
#vote_no:hover{
  box-shadow: 0 0 24px rgb(255, 0, 0);
  border: 4px solid white;
}

#confirm_vote_choice{
  width: 240px;
  height: 75px;
  background-image: url("./static/imgs/confirm.png");
  background-size: cover;


}

/* ...existing code... */

/* Tooltip styles */
.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1000;
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
}

.inventory {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
  height: 24px;
}



/* Token-specific styles */
.imprisoned_token,
.imprisoned_half_token,
.work_token,
.work_half_token,
.frozen_token,
.pledge_top_token,
.pledge_bottom_token,
.king_power_token,
.thorns_token,
.vote_twice_token,
.immunity_token,
.total_immunity_token,
.cant_be_president_token {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 2px;
  display: inline-block;
}

.immunity_token {
  background-color: #4caf50;
  border: 2px solid #45a049;
}

.total_immunity_token {
  background-color: #2196F3;
  border: 2px solid #1976D2;
}

.cant_be_president_token {
  background-color: #f44336;
  border: 2px solid #d32f2f;
}
.imprisoned_token{
  background-color: #9E9E9E;
}
.imprisoned_half_token{
  background-color: #BDBDBD;
}
.work_token  {
  background-color: #FFEB3B;
}
.work_half_token{
  background-color: #FFF176;
}
.frozen_token{
  background-color: #4bb1e4;
}
.pledge_top_token{
  background-color: #4CAF50;
}
.pledge_bottom_token{
  background-color: #266d29;
}
.thorns_token {
  background-color: #2e4712;
  border: 2px dotted #000000;
}
.king_power_token {
  background-color: #673ab7;
}
.vote_twice_token {
  background-color: #ff9800;
}

.hidden {
  display: none;
}

.negated{
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  z-index: 10;
  background-image: url('./static/imgs/card_back.png');
  width: 92px;
  height: 137px;
}