html {
	height: 100%;
}

body {
	--color-primary: #1F2041;
  --color-primary-contrast: #417B5A;
  --color-secondary: #4B3F72;
  --color-secondary-contrast: #D0CEBA;
  --color-disabled: light-gray;

  --color-dice: #E9D2C0;
  --color-dice-text: black;

  --text-primary: var(--color-dice);
  --text-secondary: #636363;
  --text-size-big: clamp(1.4rem, 4vw, 4rem);
  --text-size-extra-big: clamp(3rem, 8vw, 8rem);
  --text-size-small: clamp(0.8rem, 2.28vw, 2.28rem);

	height: 100%;
	margin: 0;
  font-weight: 600;

  color: var(--text-primary);
  background-color: var(--color-secondary);
}

.dialog {
  width: 80%;
  height: 45%;

  background-color: var(--color-secondary-contrast);

  border: transparent;
  border-radius: 25px;
  padding: 25px;

  .container {
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: 2%;
  }

  .title {
    font-size: x-large;
    font-weight: bold;
  }

  .content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .concede_content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10%;
    padding: 30px;
    align-items: center;
    justify-content: center;
  }

  .buttons_row {
    display: flex;
    justify-content: end;
    gap: 2%;
  }

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

#unclickable_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  pointer-events: auto;
}

.install_banner_visibility {
  /*ALWAYS NONE UNLESS beforeinstallprompt EVENT IS DETECTED*/
  display: none;
}

.install_banner_container {
  display: flex;
  padding: 15px;
  cursor: pointer;
}

.install_banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.install_banner_content {
  display: flex;
  gap: 10px;
  align-items: center;
}

.install_banner_description {
  display: flex;
  flex-direction: column;

  .install_banner_title {
    font-size: 1rem;
  }
  .install_banner_subtitle {
    color: var(--text-secondary);
    font-size: var(--text-size-small);
  }
}

.install_banner_close {
  width: 50px;
  height: 50px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.install_banner_icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.main_container {
	display: flex;
  flex-direction: row-reverse;
	min-height: 100%;
	min-width: 100%;
}

.players_container {
  position: relative;
	display: flex;
  flex: 20 1 auto;
  flex-direction: column;
}

.sidebar {
	display: flex;
	align-content: center;
	justify-content: space-between;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1%;

  min-height: 100%;
  background: var(--color-secondary);

  span {
    writing-mode: vertical-lr;
  }
}

.sidebar_middle {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}
.sidebar_game_info {
  font-size: var(--text-size-small);
  writing-mode: vertical-lr;
}
.sidebar_score {
  display: inline-flex;
  flex-direction: column;
  align-items: center;

  font-size: var(--text-size-big);
}

.player_sidebar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
}

.player_name {
  font-size: var(--text-size-small);
}

.player_time {
  font-size: var(--text-size-big);
}

.player_time_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#player_one {
  transform: rotate(180deg);
}

.action_ui {
  display: flex;
  flex: 1 1 auto;
}
.player_container {
  display: flex;
  flex: 4 1 0;

  border-radius: 10px;
  border: 2px solid var(--color-primary-contrast);
  background-color: var(--color-primary);
}
.midline {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  padding: 1% 2%;

  background-color: var(--color-secondary);
}

.sidebar_buttons {
  display: flex;
  gap: 5px;
  flex-direction: column;
  /* This is the filter equivalent of color secondary contrast */
  filter: brightness(0) saturate(100%) invert(89%) sepia(24%) saturate(275%) hue-rotate(332deg) brightness(92%) contrast(98%);
}

#player_one_sidebar_buttons {
  transform: rotate(180deg);
}
.sidebar_button {
  border-radius: 100px;
	background-color: transparent;
	border: 0;
	padding: 5px;
	display: flex;
	justify-content: center;

  img {
    aspect-ratio: 1/1;
    max-width: 50px;
    width: 65%;
  }

  &:active {
    background-color: #00000022;
  }
}
.settings_button {
}

/* Of main_ui and double_action_ui, only one should be present at the same time */
.main_ui {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-evenly;
}
.double_action_ui {
  display: none;
  flex-direction: column;

  flex: 1 1 auto;
  align-items: center;
  justify-content: space-evenly;
}
.start_ui {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1 1 auto;
}

.roll_action_ui {
  display: none;
  flex-direction: column;

  flex: 1 1 auto;
  align-items: center;
  justify-content: space-evenly;
}

.display_rolled_dice {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.done_button {
  width: 55%;
}

.action_button {
	border-radius: 25px;
	text-align: center;
	border: 0;
  aspect-ratio: 16/9;
  background-color: var(--color-primary-contrast);
  color: var(--color-secondary-contrast);
  font-size: var(--text-size-big);
  text-transform: uppercase;

	box-shadow:
    inset 2px 2px 3px rgba(211, 211, 211, 0.4),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);

  &:hover {
  }
  &:active {
    box-shadow:
      inset -2px -2px 3px rgba(211, 211, 211, 0.4),
      inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  }
}

.roll_button {
  width: 55%;
}

.double_button {
  width: 45%;
}

.start_button {
  width: 75%;
  font-size: var(--text-size-extra-big);
}

.double_actions_button_container{
  width: 100%;

  display: flex;
  justify-content: space-evenly;
}
.double_action_button {
  width: 33%
}
.double_take_button {
}

.double_drop_button {
}

.close_button {
  min-height: 40px;
  height: 5vh;
  aspect-ratio: 2/1;

  border: 1px solid var(--color-secondary);
  border-radius: 10px;

  background-color: var(--color-secondary-contrast);
  color: var(--color-secondary);
}
.confirm_button {
  min-height: 40px;
  height: 5vh;
  aspect-ratio: 2/1;

  border: 0px;
  border-radius: 10px;

  background-color: var(--color-secondary);
  color: var(--color-secondary-contrast);
}

.settings_form {
  height: 100%;

  display: flex;
  flex-direction: column;
  flex: auto;
  gap: 2%;
  margin-top: 2%;

  input[type="number"] {
    width: 4em;
  }
}

.concede_match_button {
  background-color: var(--color-secondary);
  color: var(--color-secondary-contrast);
  border-radius: 15px;

  min-height: 60px;
  height: 40%;
  aspect-ratio: 3/2;
}
.forfeit_game_button {
  background-color: var(--color-primary);
  color: var(--color-secondary-contrast);
  border-radius: 15px;

  min-height: 60px;
  height: 40%;
  aspect-ratio: 3/2;
}

.cube {
  color: var(--color-dice-text);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 2px solid black;
  aspect-ratio: 1/1;
  min-width: 20%;

  font-size: 2.5em;

  background-color: var(--color-dice);
}

.player_infinity {
  font-size: var(--text-size-big);
  transform: rotate(90deg);
}

.default_hidden {
  display: none;
}