:root {
	--height: 556px;
	--width: 556px;
}

* {
	box-sizing: border-box;
}

#action {
	display: none;
	left: calc(0px - var(--width) - 132px);
	margin: auto;
	position: absolute;
	right: 0;
	transition: opacity 1s ease 0.5s;
	width: 180px;
}

#action span {
	background-image: url('images/interface/background.png');
	border: 2px solid;
	border-color: rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	color: gold;
	font-size: 13px;
	font-weight: bold;
	padding: 2px 4px;
}

#adventure {
	background-color: rgba(255, 255, 255, 0.75);
	border: 4px solid;
	border-color: rgba(0, 0, 0, 0.6) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.6);
	height: calc(var(--height) - 48px);
	left: 20px;
	overflow: auto;
	padding: 4px;
	position: absolute;
	top: 20px;
	transition: opacity 0.5s ease-in;
	width: calc(var(--width) - 48px);
}


#basics {
	transition: opacity 0.25s linear;
}

#basics button {
	width: 100px;
}

#character0 {
	top: 0;
}

#character1 {
	top: 200px;
}

#character1 .character-bottom {
	background-position: 32px 0;
}

#character1 .character-corner {
	background-position: 0 32px;
}

#character2 {
	top: 376px;
}

#character2 .character-bottom {
	background-position: 64px 0;
}

#characters {
	left: calc(0px - var(--width) - 136px);
	margin: auto;
	position: absolute;
	right: 0;
	top: 140px;
	width: 184px;
}

#combat {
	background-image: url('images/interface/adventure.png');
	background-position: -36px 0;
	border: 4px solid;
	border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) transparent;
	border-left: none;
	cursor: default;
	height: 556px;
	left: 0;
	margin: auto;
	opacity: 0;
	padding: 2px;
	position: absolute;
	right: calc(0px - var(--width) - 156px);
	top: 140px;
	transition: opacity 0.5s ease;
	width: 164px;
}

#copyright {
	display: table;
	left: 0;
	margin: auto;
	opacity: 0;
	padding: 4px 8px;
	position: absolute;
	right: 0;
	top: 708px;
	transition: opacity 2s ease-in;
}

#creation .space {
	margin: 12px 0;
}

#creation table {
}

#creation td:nth-child(2) {
	padding-left: 16px;
}

#effect {
	left: -700px;
	width: 120px;
}

#finalization {
	opacity: 0;
	transition: opacity 0.25s linear;
}

#link {
	margin: 4px;
	width: 120px;
}

#main {
	background-image: url('images/interface/adventure.png');
	border: 4px solid;
	border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
	height: var(--height);
	left: 0;
	margin: auto;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 140px;
	transition: opacity 2s ease-in;
	width: var(--width);
}

#name {
	background-blend-mode: overlay;
	background-color: rgba(255, 255, 255, 0.8);
	background-image: url('images/interface/adventure.png');
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5);
	font-size: 14px;
	font-weight: bold;
	padding: 2px;
}

#options {
	background-color: rgba(255, 255, 255, 0.75);
	border: 4px solid;
	border-color: rgba(0, 0, 0, 0.6) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.6);
	height: calc(var(--height) - 48px);
	left: 0;
	overflow: auto;
	padding: 4px;
	position: absolute;
	text-align: center;
	top: 20px;
	transition: opacity 0.5s ease-in;
	width: 140px;
}

#options button {
	width: 100%;
}

#portrait {
	background-image: url('images/interface/adventure.png');
	border: 4px solid;
	border-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5);
}

#profile {
	background-blend-mode: overlay;
	background-color: rgba(255, 255, 255, 0.75);
	background-image: url('images/interface/adventure.png');
	border: 4px solid;
	border-color: rgba(0, 0, 0, 0.6) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.6);
	height: 508px;
	left: 20px;
	opacity: 0;
	overflow: auto;
	padding: 4px;
	position: absolute;
	text-align: left;
	top: 20px;
	transition: opacity 0.5s ease;
	width: 508px;
}

#profile .flex {
	align-items: flex-start;
}

#profile .heading > div {
	font-size: 16px;
}

#resources {
	display: none;
	height: 30px;
	left: 24px;
	pointer-events: none;
	position: absolute;
	top: 26px;
	width: 120px;
}

#tip {
	background-image: url('images/interface/background.png');
	border: 2px solid;
	border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
	box-shadow: 4px 4px 2px black;
	color: gold;
	display: none;
	font-size: 13px;
	max-width: 240px;
	padding: 4px;
	position: absolute;
	text-align: left;
	z-index: 1;
}

#tip table {
	margin: 0;
}

#title {
	left: calc(50% - 297px);
	position: absolute;
	top: calc(50% - 66px);
	transition: top 2s ease 1s;
}

.action {
	bottom: 0;
	display: none;
	position: absolute;
	right: 0;
	transition: opacity 1s ease 0.5s;
	width: 100%;
}

.action span {
	background-image: url('images/interface/background.png');
	border: 2px solid;
	border-color: rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	color: gold;
	font-size: 13px;
	font-weight: bold;
	padding: 2px 4px;
}

.adventure-bottom {
	background-image: url('images/interface/horizontal.png');
	bottom: 0;
	height: 20px;
	left: 20px;
	position: absolute;
	width: calc(var(--width) - 28px);
}

.adventure-left {
	background-image: url('images/interface/vertical.png');
	height: calc(var(--height) - 28px);
	left: 0;
	position: absolute;
	top: 20px;
	width: 20px;
}

.adventure-right {
	background-image: url('images/interface/vertical.png');
	height: calc(var(--height) - 28px);
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
}

.adventure-top {
	background-image: url('images/interface/horizontal.png');
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: calc(var(--width) - 28px);
}

.capital {
	text-transform: capitalize;
}

.center {
	text-align: center;
}

.character {
	background-image: url('images/interface/adventure.png');
	background-position: -96px 0;
	border: 4px solid;
	border-color: rgba(255, 255, 255, 0.5) transparent rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
	border-right: none;
	display: none;
	height: 204px;
	left: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.5s ease;
	width: 184px;
}

.character-bottom {
	background-image: url('images/interface/horizontal.png');
	height: 20px;
	left: 20px;
	position: absolute;
	top: 176px;
	width: 160px;
}

.character-conditions {
!	background-color: rgba(0, 0, 0, 0.5);
	height: 28px;
	left: 20px;
	position: absolute;
	top: 152px;
	width: 156px;
}

.character-corner {
	background-image: url('images/interface/vertical.png');
	background-position: 0 -48px;
	bottom: -4px;
	height: 4px;
	right: 0;
	position: absolute;
	width: 20px;
}

.character-health {
	background-color: limegreen;
	bottom: 48px;
	height: 124px;
	left: 158px;
	position: absolute;
	transition: background-color 1s linear, height 1s linear;
	width: 12px;
}

.character-life {
	background-color: rgba(0, 0, 0, 0.25);
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5);
	height: 128px;
	left: 156px;
	position: absolute;
	top: 22px;
	width: 16px;
}

.character-portrait {
	border: 4px solid;
	border-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5);
	cursor: pointer;
	height: 128px;
	left: 20px;
	position: absolute;
	top: 22px;
	width: 128px;
}

.character-side {
	background-image: url('images/interface/vertical.png');
	height: 176px;
	left: 0;
	position: absolute;
	top: 20px;
	width: 20px;
}

.character-top {
	background-image: url('images/interface/horizontal.png');
	background-position: -32px 0;
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: 180px;
}

.cluster1, .cluster2, .cluster3, .cluster4, .cluster5, .cluster6, .cluster7 {
	cursor: crosshair;
}

.cluster1:hover .target1 img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.cluster2:hover .target2 img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.cluster3:hover .target3 img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.cluster4:hover .target4 img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.cluster5:hover .target5 img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.cluster6:hover .target6 img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.cluster7:hover .target7 img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.companion {
	border-top: 0;
	height: 180px;
}

.companion .character-bottom {
	top: 156px;
}

.companion .character-conditions {
	top: 132px;
}

.companion .character-health {
	bottom: 48px;
}

.companion .character-life {
	top: 2px;
}

.companion .character-portrait {
	top: 2px;
}

.companion .character-side {
	height: 176px;
	top: 0;
}

.condition {
	filter: drop-shadow(2px 2px black);
	margin-left: 4px;
}

.conditions {
	left: 0;
	position: absolute;
	text-align: left;
	top: 0;
}

.conditions .condition {
	margin: 1px;
}

.cooldown {
	opacity: 0.5;
}

.creature {
	display: inline-block;
	margin-top: 8px;
	position: relative;
	transition: opacity 1s ease 0.5s;
}

.creature .action {
	bottom: 0;
	left: 0;
}

.creature .health {
	background-color: ghostwhite;
	height: 100%;
	transition: width 1s ease-out;
	width: 0%;
}

.creature .life {
	background-color: limegreen;
	border: black solid 2px;
	height: 12px;
	margin: auto;
	transition: background-color 1s linear, width 1s linear;
	width: 80%;
}

.disabled {
	background-color: silver;
	color: gray;
}

.disabled:hover {
	color: gray;
}

.exit {
	border-bottom: 4px solid rgba(255, 255, 255, 0.6);
	border-left: 4px solid rgba(0, 0, 0, 0.6);
	border-right: none;
	border-top: none;
	cursor: pointer;
	height: 24px;
	position: absolute;
	right: 0;
	top: 0;
	width: 24px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.float {
	display: none;
	font-size: 20px;
	font-weight: bold;
	height: 20px;
	left: 0;
	line-height: 20px;
	margin: auto;
	position: absolute;
	right: 0;
	text-shadow: 1px 1px 2px black, 1px -1px 2px black, -1px 1px 2px black, -1px -1px 2px black;
	top: calc(50% - 20px);
	transition: opacity 1s ease 0.5s;
}

.heading {
	margin: 8px;
	text-align: center;
}

.heading > div {
	background-image: url('images/interface/adventure.png');
	border: 4px solid;
	border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
	color: ivory;
	display: inline-block;
	font-size: 18px;
	padding: 2px 4px;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.inset {
	border: 2px solid silver;
	border-radius: 6px;
	padding: 0 2px;
}

.item {
	background-color: rgba(0, 0, 0, 0.75);
	border: 2px solid dimgray;
	border-radius: 6px;
	box-sizing: content-box;
	display: inline-block;
	height: 32px;
	margin: 2px;
	padding: 4px;
	width: 32px;
}

.item img {
	height: 32px;
	width: 32px;
}

.label {
	background-image: url('images/interface/adventure.png');
	border: 2px solid;
	border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
	color: ivory;
	display: inline-block;
	font-size: 14px;
	padding: 3px 4px;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.match button {
	margin-top: 4px;
	width: 100%;
}

.middle {
	align-items: center;
}

.options-bottom {
	background-image: url('images/interface/horizontal.png');
	bottom: 0;
	height: 20px;
	left: 0;
	position: absolute;
	width: 160px;
}

.options-right {
	background-image: url('images/interface/vertical.png');
	height: 532px;
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
}

.options-top {
	background-image: url('images/interface/horizontal.png');
	height: 20px;
	left: -4px;
	position: absolute;
	top: 0;
	width: 144px;
}

.resource {
	visibility: hidden;
}

.right {
	text-align: right;
}

.small {
	font-size: 13px;
}

.smaller {
	font-size: 14px;
}

.space {
	margin: 8px 0;
}

.stack {
	bottom: 1px;
	color: ghostwhite;
	font-size: 9px;
	position: relative;
	right: 10px;
	text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black;
}

.stats td {
	border-top: none;
}

.stats tr:nth-child(2) td {
	border-top: 2px solid silver;
}

.stats td:nth-last-child(2) {
	border-radius: 6px 0 0 6px;
	border-right: none;
}

.stats td + td {
	border-left: none;
	border-radius: 0 6px 6px 0;
}

.stats th div {
	margin: 4px 0 0 0;
	width: 100%;
}

.target {
	cursor: crosshair;
}

.target:hover img {
	filter: drop-shadow(2px 2px 2px darkred) drop-shadow(-2px -2px 2px darkred);
}

.tip {
	cursor: help;
}

a {
	text-decoration: none;
}

a:link {
	color: gold;
}

body {
	background-image: url('images/interface/background.png');
	font-family: sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin: 0;
}

button {
	background-color: dimgray;
	border: none;
	border-radius: 4px;
	color: ivory;
	cursor: pointer;
	font-weight: bold;
	padding: 2px 6px 3px 6px;
}

button:disabled {
	cursor: default;
}

button:hover {
	color: gold;
}

button.inverted, button.inverted:hover {
	background-color: gold;
	color: black;
}

input[type='radio'] {
	display: none;
}

input[type='radio'] + label {
	background-color: dimgray;
	border-radius: 8px;
	cursor: pointer;
	display: inline-block;
	height: 12px;
	margin: -1px 4px 0 0;
	vertical-align: middle;
	width: 12px;
}

input[type='radio']:checked + label {
	background-image: radial-gradient(circle, gold 50%, dimgray 50%);
}

input[type='radio']:checked:disabled + label {
	background-image: radial-gradient(circle, goldenrod 50%, gray 50%);
}

input[type='radio']:disabled + label {
	background-color: silver;
	cursor: auto;
}

input[type='text']:disabled {
	color: goldenrod;
}

li::before {
	content: '\25c6 ';
}

li li::before {
	content: '\25c7 ';
}

p {
	margin: 4px;
}

table {
	border-spacing: 0;
	margin: auto;
}

td {
	padding: 0;
}

th {
	text-align: center;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}



#log {
	background-color: ghostwhite;
	border: dimgray ridge 6px;
	font-size: 12px;
	height: 160px;
	left: 160px;
	margin: auto;
	max-height: 160px;
	opacity: 0;
	overflow-y: scroll;
	padding: 2px;
	position: absolute;
	right: 0;
	text-align: left;
	top: 720px;
	transition: opacity 0.5s ease;
	width: 720px;
}
/*	Quick Start	Overrides */
/*

#main {
	opacity: 1;
}

#profile {
	opacity: 0;
}

#title {
	top: 0;
}

#action {
	transition: opacity 0.75s ease 0.25s;
}

.action {
	transition: opacity 0.75s ease 0.25s;
}

.float {
	transition: opacity 0.75s ease 0.25s;
}
*/