:root {
	--color-tx: white;
	--color-bg: black;
	--color-ui-good: limegreen;
	--color-ui-bad: red;
	--color-ui-neutral: white;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background-color: var(--color-bg);
	font-family:"Courier";
	font-size:14px;
	color:white;
	overflow:hidden;
}

a, a:visited {
	color: var(--color-tx);
	cursor:pointer; font-weight:bold; text-decoration:none;
}

p {
	margin: 0 !important;
}

#game {
	/* Contains #cli and #hud [contains #hud_primary and #hud_combat]*/
	width:100vw;
	height:100vh;
	padding:25px;
	display:grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 3fr 4fr;
	grid-template-areas:
	"cli hud_main"
	"cli hud_combat";
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

#cli {
	overflow: hidden;
	align-self: stretch;
	grid-area: cli;
}

#hud_main {
	grid-area: hud_main;
	align-self: stretch;
	justify-self: center;
}

.combat_wrapper {
	display:grid;
	width: 100%;
	grid-template-columns: 2fr 1fr 2fr;
	grid-template-rows: auto;
	grid-template-areas: "ally neutral enemy";
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

#combat_ally,
#combat_center,
#combat_enemy {
	justify-self: center;
	align-self: center;
}

#combat_ally,
#combat_enemy {
	height:100%;
	width:100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

#combat_ally {
	grid-area: ally;
}

#combat_center {
	grid-area: neutral;
	text-align:center;
	font-size:200%;
}

#combat_enemy {
	grid-area: enemy;
}

.participant_container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
}

.participant_info {
	width:80%;
}

.wrapper_delta {
	width: 20%;
	text-align:center;
}
.participant_delta {
	width: 100%;
}
.container_ally>.participant_info {
	text-align:right;
}
.combat_name {
	font-size: 250%;
}
.combat_name.active_entity {
	text-decoration: underline;
}
.combat_hp {
	font-size: 175%;
}

#hud_combat {
	grid-area: hud_combat;
	align-self: stretch;
	justify-self: center;
}

#cursor {
	font-weight: normal;
	position: absolute;
	text-align: center;
	width: auto;
  text-decoration: underline;
	background-color: var(--color-tx);
	color: var(--color-bg);
  text-decoration-color: var(--color-tx);
}

#spinner {
	margin-left:1em;
	display:none;
	font-weight:bold;
	line-height:0px;
}

.combat__healing {
	color: var(--color-ui-good);
}

.combat__damage {
	color: var(--color-ui-bad);
}

.combat__dodge {
	color: var(--color-ui-good);
}

.combat__miss {
	color: var(--color-ui-neutral);
}

.error {
	color: var(--color-ui-bad);
}

.success {
	color: var(--color-ui-good);
}

.combat-list__selection {
	counter-reset: list;
}
.combat-list__navigation {
	counter-reset: navigation 7;
}
.combat-list__navigation > li,
.combat-list__back > li,
.combat-list__selection > li {
	list-style: none;
	position: relative;
	padding-bottom:10px;
}
.combat-list__selection > li:before {
	content: "(" counter(list) ") ";
	counter-increment: list;
	position: absolute;
	left: -2.4em;
}
.combat-list__navigation > li:before {
	content: "(" counter(navigation) ") ";
	counter-increment: navigation;
	position: absolute;
	left: -2.4em;
}
.combat-list__navigation > li.inactive {
	visibility:hidden;
}
.combat-list__back > li:before {
	content: "(back)";
	position: absolute;
	left: -4.2em;
}
tbody>tr:nth-child(11)>td:nth-child(21) {
	visibility:hidden;
}
tbody>tr:nth-child(11)>td:nth-child(21):after {
	content: '@';
  visibility: visible;
  display: block;
  position: absolute;
  margin-top: -14px;
  padding: 0;
	color: rgb(255, 0, 149);
}