@import"https://fonts.googleapis.com/css2?family=Recursive&family=Lato&family=Fira+Mono&display=swap";

html,
body {
	margin: 0;
	width: 100%;
	height: 100%
}

body {
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-paragraph);
	display: flex;
	flex-direction: column;
	color: var(--color-text-primary);
	background-color: var(--color-background);
	overflow: hidden;
	--color-background: #000000;
	--color-primary: #a6ff00;
	--color-text-primary: white;
	--color-text-inverse: black;
	--color-not-intense: #88407f;
	--color-button-hover: #cc00ff;
	--color-button-active: #FF0084;
	--color-button-big: #ff0084;
	--color-button-text: #ddd;
	--color-input-underline: #9900ff;
	--color-input-active: var(--color-primary);
	--color-selected: #ccc;
	--color-good: #62ffa9;
	--color-bad: #ff0000;
	--color-note: #aaa;
	--color-panel-border: #00ffd5;
	--color-header: #000000;
	--color-separator: #db9d73;
	--color-icon-wall: #000000;
	--weight-thick: 500;
	--shadow-panel: 0 0 12px 6px #0006;
	--shadow-text: 0 0 10px #000a;
	--font-paragraph: "Lato", sans-serif;
	--font-title: "Recursive", serif
}

body:not(.logged-in) .acc {
	display: none
}

::selection {
	background-color: var(--color-separator)
}

a {
	color: var(--color-button-text);
	text-decoration: underline;
	cursor: pointer
}

a:hover {
	color: var(--color-text-primary)
}

a:active {
	color: var(--color-note)
}

a.disabled {
	pointer-events: none;
	opacity: .4
}

a.title {
	text-decoration: none;
	display: flex;
	gap: 8px
}

a.title>div {
	height: 32px;
	max-height: 0;
	width: 32px;
	position: relative;
	transition: max-height .7s cubic-bezier(0.23, 1, 0.32, 1), filter .5s;
	transform: translateY(2.5px)
}

a.title img {
	position: absolute;
	height: 32px;
	animation: icon 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1)
}

a.title>h1 {
	transition: .5s cubic-bezier(0.215, 0.61, 0.355, 1)
}

a.title:hover>h1 {
	color: var(--color-text-primary);
	transform: translateX(4px)
}

a.title:hover>div {
	max-height: 4px;
	filter: grayscale(1) contrast(1.2) brightness(1.5)
}

a.icon,
a.close {
	text-decoration: none
}

@keyframes icon {
	0% {
		top: -100%
	}

	50% {
		top: 100%
	}

	100% {
		top: -100%
	}
}

b {
	font-weight: var(--weight-thick);
	color: var(--color-primary)
}

p {
	margin: 0;
	color: var(--color-note);
	word-wrap: break-word;
	white-space: normal;
	max-width: fit-content
}

span.compact {
	display: -webkit-box;
	width: 100%;
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2
}

h3,
h2,
h1 {
	font-family: inherit;
	margin: 0;
	font-weight: var(--weight-thick)
}

h1 {
	font-family: var(--font-title);
	font-weight: normal;
	color: var(--color-primary);
	transition: color .2s
}

#diceTab td,
#diceTab .with-tooltip,
.file-upload,
button {
	outline: none;
	border: none;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0);
	color: var(--color-button-text);
	fill: var(--color-button-text);
	padding: 8px 12px;
	transition-duration: .05s;
	transition-timing-function: ease-out;
	font-family: inherit;
	font-size: 16px
}

#diceTab td:disabled,
#diceTab .with-tooltip:disabled,
.file-upload:disabled,
button:disabled {
	opacity: .5
}

.elevate {
	padding-bottom: 12px;
	box-shadow: 0 -4px 0 rgba(0, 0, 0, .4666666667) inset;
	background-color: var(--color-not-intense)
}

@media only screen and (min-width: 800px) {

	#diceTab td:not(:disabled),
	#diceTab .with-tooltip:not(:disabled),
	.file-upload:not(:disabled),
	button:not(:disabled) {
		cursor: pointer
	}

	#diceTab td:not(:disabled):hover,
	#diceTab .with-tooltip:not(:disabled):hover,
	.file-upload:not(:disabled):hover,
	button:not(:disabled):hover,
	.tab #diceTab td:not(:disabled):focus,
	#diceTab .tab td:not(:disabled):focus,
	.tab #diceTab .with-tooltip:not(:disabled):focus,
	#diceTab .tab .with-tooltip:not(:disabled):focus,
	.tab .file-upload:not(:disabled):focus,
	.tab button:not(:disabled):focus {
		background-color: var(--color-button-hover);
		color: var(--color-text-primary);
		fill: var(--color-text-primary)
	}
}

#diceTab td:not(:disabled).hovered,
#diceTab .with-tooltip:not(:disabled).hovered,
.file-upload:not(:disabled).hovered,
button:not(:disabled).hovered {
	background-color: var(--color-button-hover);
	color: var(--color-text-primary);
	fill: var(--color-text-primary)
}

#diceTab td:not(:disabled):active,
#diceTab .with-tooltip:not(:disabled):active,
.file-upload:not(:disabled):active,
button:not(:disabled):active {
	background-color: var(--color-button-active);
	transition-duration: 0s
}

button.icon,
button.close {
	padding: 8px;
	box-sizing: border-box;
	min-width: 36px;
	height: 36px;
	font-size: 16px;
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 4px;
	align-items: baseline;
	justify-content: center
}

button.icon>i,
button.close>i {
	align-self: center
}

button.big {
	background-color: var(--color-button-big);
	color: var(--color-text-primary);
	padding: 8px 16px;
	padding-bottom: 12px;
	box-shadow: 0 -4px 0 rgba(0, 0, 0, .4666666667) inset;
	min-width: 100px
}

button.big.icon,
button.big.close {
	height: 40px
}

button.compact {
	padding: 4px 8px
}

button.compact.big {
	box-shadow: none
}

button.toggle.active {
	background-color: var(--color-primary) !important;
	color: var(--color-text-inverse) !important
}

button.toggle.with-tooltip>span:last-of-type {
	color: #fff
}

.good:not(:disabled) {
	color: var(--color-good) !important
}

.bad:not(:disabled) {
	color: var(--color-bad) !important
}

textarea {
	font-family: inherit;
	font-size: inherit;
	outline: none;
	border: 1px solid var(--color-input-underline);
	transition-property: border-color;
	transition-duration: .1s;
	margin: 1px;
	background-color: rgba(0, 0, 0, 0);
	color: inherit;
	padding: 2px 3px;
	resize: none
}

textarea:enabled:hover {
	border: 2px solid var(--color-input-underline);
	margin: 0
}

textarea:enabled:focus {
	border: 2px solid var(--color-input-active);
	margin: 0
}

textarea:disabled {
	opacity: .5
}

input {
	font-family: inherit;
	font-size: inherit;
	outline: none;
	border: none;
	border-bottom: 1px solid var(--color-input-underline);
	transition-property: border-bottom-color;
	transition-duration: .1s;
	margin-bottom: 1px;
	background-color: rgba(0, 0, 0, 0);
	color: inherit;
	padding: 0 1px 3px 1px
}

input:enabled:hover {
	border-bottom: 2px solid var(--color-input-underline);
	margin-bottom: 0
}

input:enabled:focus {
	border-bottom: 2px solid var(--color-input-active);
	margin-bottom: 0
}

input:disabled {
	opacity: .5
}

input[type=number] {
	width: 70px
}

input[type=color],
input[type=range] {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	cursor: pointer
}

input[type=color] {
	border: 1px solid #aaa !important;
	box-sizing: border-box;
	outline-offset: 0px
}

input[type=color]:hover {
	border: 1px solid #fff !important
}

input[type=color]::-webkit-color-swatch-wrapper {
	padding: 0
}

input[type=color]::-webkit-color-swatch {
	border: 1px solid #000
}

input[type=range] {
	border: none !important;
	-webkit-appearance: none;
	width: 100%;
	height: 4px;
	margin: 8px 0 !important;
	background: var(--color-input-underline);
	outline: none
}

input[type=range].smooth-bg {
	--v: 50%;
	background: linear-gradient(to right, var(--color-primary) var(--v), var(--color-input-underline) var(--v))
}

input[type=range]:hover::-webkit-slider-thumb {
	background: var(--color-primary)
}

input[type=range]:hover::-moz-range-thumb {
	background: var(--color-primary)
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-button-text);
	transition-duration: .1s
}

input[type=range]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff
}

input[type=range].progressbar {
	cursor: inherit
}

input[type=range].progressbar::-webkit-slider-thumb {
	background: none
}

input[type=range].progressbar::-webkit-slider-thumb {
	background: none
}

input[type=checkbox] {
	margin-right: 6px;
	--brightness: 1.65
}

input[type=checkbox]:checked {
	filter: invert(90%) hue-rotate(-30deg) brightness(var(--brightness))
}

@supports(-moz-appearance: none) {
	input[type=checkbox] {
		--brightness: 1.4
	}
}

i svg {
	fill: inherit;
	height: 16px
}

.step-input {
	display: flex;
	justify-content: space-between;
	width: 80px
}

.step-input i {
	align-self: center;
	font-size: 14px;
	padding: 4px;
	color: #fff;
	cursor: pointer
}

.step-input i:hover {
	background-color: var(--color-button-hover)
}

.step-input i:active {
	background-color: var(--color-button-active)
}

select {
	font-family: inherit;
	font-size: inherit;
	outline: none;
	border: none;
	background-color: var(--color-background);
	color: inherit;
	padding: 4px 0
}

.disabled {
	pointer-events: none;
	user-select: none;
	opacity: .5
}

li {
	display: flex;
	gap: 4px;
	background-color: var(--color-background);
	align-items: center;
	padding: 4px
}

#map>button[type=reset],
#map #changeMap,
.minimap,
#assetGrid>div,
#messages>.clickable,
#inactiveSceneWarning,
.color-tile,
#charPick .char,
.file-upload,
.responsive,
button.big {
	transition-property: transform;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)
}

#map>button[type=reset]:not(:disabled):hover,
#map #changeMap:not(:disabled):hover,
.minimap:not(:disabled):hover,
#assetGrid>div:not(:disabled):hover,
#messages>.clickable:not(:disabled):hover,
#inactiveSceneWarning:not(:disabled):hover,
.color-tile:not(:disabled):hover,
#charPick .char:not(:disabled):hover,
.file-upload:not(:disabled):hover,
.responsive:not(:disabled):hover,
button.big:not(:disabled):hover {
	transform: scale(0.98);
	transition-duration: .2s
}

#map>button[type=reset]:not(:disabled):active,
#map #changeMap:not(:disabled):active,
.minimap:not(:disabled):active,
#assetGrid>div:not(:disabled):active,
#messages>.clickable:not(:disabled):active,
#inactiveSceneWarning:not(:disabled):active,
.color-tile:not(:disabled):active,
#charPick .char:not(:disabled):active,
.file-upload:not(:disabled):active,
.responsive:not(:disabled):active,
button.big:not(:disabled):active,
#map>button[type=reset]:not(:disabled).hovered,
#map #changeMap:not(:disabled).hovered,
.minimap:not(:disabled).hovered,
#assetGrid>div:not(:disabled).hovered,
#messages>.clickable:not(:disabled).hovered,
#inactiveSceneWarning:not(:disabled).hovered,
.color-tile:not(:disabled).hovered,
#charPick .char:not(:disabled).hovered,
.file-upload:not(:disabled).hovered,
.responsive:not(:disabled).hovered,
button.big:not(:disabled).hovered {
	transform: scale(0.95)
}

#content {
	display: flex;
	position: relative;
	height: 100%
}

#notifications {
	position: fixed;
	top: 0;
	left: 0;
	margin: 24px;
	gap: 10px;
	z-index: 102
}

.notification {
	display: flex;
	background-color: var(--color-background);
	box-shadow: 0 0 8px rgba(0, 0, 0, .5333333333);
	border-radius: 4px;
	padding: 4px;
	align-items: center;
	gap: 2px;
	width: fit-content;
	border: 2px solid var(--color-background);
	outline: 2px solid rgba(0, 0, 0, 0);
	user-select: none;
	animation: notif-in .5s cubic-bezier(0.23, 1, 0.32, 1) forwards, notif-glow 1s ease-out infinite
}

.notification span {
	margin: 4px
}

@keyframes notif-glow {
	0% {
		outline-color: rgba(255, 187, 136, 0);
		outline-offset: 0;
		outline-width: 4px
	}

	20% {
		outline-color: rgba(255, 187, 136, .2666666667);
		border-color: rgba(255, 187, 136, .6666666667)
	}

	100% {
		outline-color: rgba(255, 187, 136, 0);
		outline-offset: 10px
	}
}

@keyframes notif-in {
	0% {
		transform: translateX(-20px);
		opacity: 0
	}

	100% {
		transform: none;
		opacity: 1
	}
}

.roster {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: row !important;
	gap: 8px !important
}

.roster .char {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	transition-duration: .1s;
	width: 48px
}

.roster .char img,
.roster .char div {
	background-size: cover;
	background-origin: border-box;
	background-position: center;
	background-clip: content-box;
	width: 100%;
	height: 48px;
	border-radius: 6px;
	box-shadow: 0 0 2px var(--color-text-primary);
	box-sizing: border-box
}

.movable>.rotating,
#overlay,
.edit-img>div {
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%
}

.edit-img {
	display: flex;
	position: relative;
	outline: 2px dashed rgba(0, 0, 0, 0);
	outline-offset: 2px;
	transition-property: all
}

.edit-img.drag {
	outline: 2px dashed #fff;
	outline-offset: 0;
	filter: contrast(0.5) brightness(1.5)
}

.edit-img>div {
	position: absolute;
	background-color: rgba(0, 0, 0, .5333333333);
	color: #fff;
	font-weight: bold;
	opacity: 0;
	cursor: pointer;
	user-select: none;
	transition-duration: .1s
}

.edit-img>div:hover,
.edit-img div.hovered {
	opacity: 1
}

.edit-img>img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	align-self: center
}

.close {
	border-radius: 50%;
	position: absolute;
	right: 4px;
	top: 4px
}

#map,
.glow,
#features .info,
#changelog,
#sceneSelector>.top-hook>div,
#chat>div,
.panel,
.panel>div,
#notifications {
	display: flex;
	flex-direction: column
}

.file-upload {
	display: inline-flex;
	padding: 6px 12px;
	cursor: pointer;
	align-self: center
}

.file-upload>input {
	display: none
}

section {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	pointer-events: none;
	opacity: 0;
	transition-duration: .5s;
	transition-property: opacity
}

section.show {
	pointer-events: all;
	opacity: 1
}

.invisible,
#map:not(.edit) .on-edit,
#map.edit #mapSelect,
#mapTools.collapsed>#toolInfo,
#mapTools:not(.collapsed)>#infoShow,
#boardContainer #selectionProperties.hidden,
#boardContainer.edit .no-edit,
#boardContainer:not(.edit) .edit-only,
#boardContainer:not([mode=pan]) .panning-only,
#session.demo .no-demo,
#inactiveSceneWarning.hidden,
header>span>*.hidden {
	opacity: 0;
	pointer-events: none
}

header {
	display: flex;
	justify-content: space-between;
	padding: 10px 12px 8px 12px;
	border-bottom: 2px solid var(--color-separator);
	align-items: center;
	background-color: var(--color-header);
	position: sticky;
	z-index: 101;
	user-select: none
}

header>span>* {
	opacity: 1
}

header.on-mobile {
	position: relative;
	justify-content: center;
	border-bottom: none;
	padding: 10px
}

footer {
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 101;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	padding: 12px 16px;
	background-color: rgba(3, 3, 3, .7529411765);
	color: var(--color-button-text)
}

footer>div {
	width: 50%;
	display: flex;
	gap: 24px;
	align-items: center
}

footer .with-tooltip>span {
	right: -8px
}

.space-between {
	display: flex;
	justify-content: space-between !important
}

.tooltip,
.prefab>span,
#messages>.clickable>span,
.movable>.conds>i>span,
#map #mapTools button>span,
.toolbox>i>span,
#mapTools>div>i>span,
.toolbox>.wrapper>i>span,
#mapTools>div>.wrapper>i>span,
.with-tooltip>span {
	transition-duration: .1s;
	position: absolute;
	bottom: 100%;
	background-color: var(--color-background);
	color: var(--color-text-primary);
	border-radius: 4px;
	padding: 6px 8px;
	pointer-events: none;
	opacity: 0	;
	max-width: 180px;
	width: max-content;
	z-index: 2;
	font-family: var(--font-paragraph);
	font-size: 16px;
	font-weight: normal
}

.prefab,
#messages>.clickable,
.movable>.conds>i,
#map #mapTools button,
.toolbox>i,
#mapTools>div>i,
.toolbox>.wrapper>i,
#mapTools>div>.wrapper>i,
.with-tooltip {
	position: relative;
	display: flex;
	justify-content: center
}

@media only screen and (min-width: 800px) {

	.prefab:hover>span,
	#messages>.clickable:hover>span,
	.movable>.conds>i:hover>span,
	#map #mapTools button:hover>span,
	.toolbox>i:hover>span,
	#mapTools>div>i:hover>span,
	.toolbox>.wrapper>i:hover>span,
	#mapTools>div>.wrapper>i:hover>span,
	.with-tooltip:hover>span {
		opacity: 1
	}
}

.with-tooltip.tooltip-inline {
	display: inline-flex
}

.attach-icon {
	display: inline-flex;
	align-items: center;
	position: relative
}

.attach-icon>:last-child {
	position: absolute;
	left: 100%;
	margin: 0 0 4px 4px
}

.row {
	display: flex;
	flex-direction: row;
	gap: 8px
}

.no-wrap {
	white-space: nowrap
}

.hideable {
	opacity: 1
}

.hideable.hidden {
	opacity: 0;
	pointer-events: none
}

.toolbox,
#mapTools>div {
	display: grid;
	gap: 1px !important;
	padding: 1px
}

#map #mapTools button,
.toolbox>i,
#mapTools>div>i,
.toolbox>.wrapper>i,
#mapTools>div>.wrapper>i {
	background-color: var(--color-background);
	width: 36px;
	height: 36px;
	font-size: 20px;
	align-items: center;
	outline: 1px solid #aaa
}

#map #mapTools button:hover,
.toolbox>i:hover,
#mapTools>div>i:hover,
.toolbox>.wrapper>i:hover,
#mapTools>div>.wrapper>i:hover {
	background-color: var(--color-button-hover)
}

#map #mapTools button.active,
.toolbox>i.active,
#mapTools>div>i.active,
.toolbox>.wrapper>i.active,
#mapTools>div>.wrapper>i.active {
	background-color: var(--color-button-active);
	color: var(--color-primary)
}

#map #mapTools button>span,
.toolbox>i>span,
#mapTools>div>i>span,
.toolbox>.wrapper>i>span,
#mapTools>div>.wrapper>i>span {
	bottom: calc(100% + 4px)
}

button.floating-action {
	background-color: var(--color-button-hover);
	right: 16px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	box-shadow: 0 2px 12px 2px rgba(0, 0, 0, .4666666667);
	font-size: 20px
}

button.floating-action.hovered {
	background-color: var(--color-button-active)
}

.interactable,
.color-tile {
	cursor: pointer
}

ul.no-inset {
	margin-block: 0;
	padding-inline-start: 0
}

ul.settings-list {
	gap: 1px
}

li.list-setting {
	height: 2em;
	padding: 4px 8px
}

li.list-setting>.label {
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	transition: .1s
}

li.list-setting>input {
	padding-top: 3px
}

li.list-setting.highlight>.label,
li.list-setting>.label:hover {
	color: var(--color-primary)
}

.label>i {
	margin-right: 6px;
	font-size: .85em
}

.segmented-button {
	display: flex;
	flex-direction: row;
	gap: 2px
}

.segmented-button>button {
	width: 100%;
	background-color: var(--color-background)
}

.segmented-button>button.active {
	background-color: var(--color-primary);
	color: var(--color-text-inverse)
}

.segmented-button>:nth-child(n+2) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0
}

.segmented-button>:nth-last-child(n+2) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0
}

.tile-container {
	display: flex;
	flex-wrap: wrap
}

#overlay .panel {
	min-width: min-content;
	width: 30rem;
	max-width: calc(100vw - 2rem)
}

.panel {
	background-color: var(--color-header);
	box-shadow: var(--shadow-panel);
	box-sizing: border-box;
	border: 2px solid var(--color-panel-border);
	border-radius: 4px;
	padding: 24px 32px 16px 32px;
	gap: 16px;
	pointer-events: all
}

.panel h2 {
	text-align: center
}

.panel>div {
	gap: 4px
}

.panel>span {
	display: flex;
	justify-content: space-evenly
}

.panel>span.center {
	justify-content: center
}

.panel>button {
	align-self: center
}

.panel textarea {
	height: 100px
}

.panel.dialog {
	min-width: calc(20vw + 250px);
	max-width: 500px;
	text-align: center;
	align-items: center
}

.wrapper {
	display: contents
}

.popup-container {
	position: relative
}

.popup-panel {
	position: absolute;
	z-index: 1;
	width: auto;
	padding: 8px;
	opacity: 0;
	pointer-events: none;
	transition: .2s
}

.popup-panel.show {
	opacity: 1;
	pointer-events: all;
	animation: fade-in .2s
}

.anchor-left {
	right: 100%;
	margin-right: 8px
}

#editGamePanel.upload {
	pointer-events: none !important;
	filter: brightness(0.5)
}

#editGamePanel.prepare .no-prepare {
	display: none
}

#editGamePanel>div>span {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	user-select: none
}

#editGamePanel #editChars {
	display: grid;
	grid-template-columns: calc(50% - 2px) calc(50% - 2px);
	grid-auto-rows: min-content;
	gap: 4px;
	min-width: 600px;
	min-height: calc(30vh - 180px);
	max-height: 25vh;
	overflow-y: auto;
	overflow-x: hidden
}

#editGamePanel #editChars>li {
	border-radius: 4px;
	animation: popup .1s cubic-bezier(0.165, 0.84, 0.44, 1) backwards
}

#editGamePanel #editChars img {
	width: 56px;
	height: 56px
}

#editGamePanel #editChars input {
	width: 100%
}

#editGamePanel #editChars:empty {
	display: flex;
	align-items: center;
	justify-content: center
}

#editGamePanel #editChars:empty:after {
	content: "No characters added.";
	color: var(--color-note)
}

#editGamePanel #startingScene {
	background-color: var(--color-background);
	width: 100%;
	max-width: 40vw;
	min-height: 100px;
	max-height: 20vh;
	margin-top: 4px;
	overflow: hidden;
	align-self: center
}

.left-col {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	right: calc(100% + 8px);
	gap: 8px
}

#joinPanel {
	width: 36rem;
	align-items: center;
	text-align: center
}

#joinPanel input {
	width: 240px;
	text-align: center;
	align-self: center
}

#joinPanel #joinError:not(:empty) {
	align-self: center;
	margin: 8px 0
}

#charPick {
	max-width: 70%;
	align-items: center
}

#charPick b {
	margin-left: 3px
}

#charPick .char {
	cursor: pointer;
	width: 80px
}

#charPick .char img {
	height: 80px
}

#charPick .char.reserved {
	pointer-events: none;
	opacity: .5
}

#charPick .char:hover {
	text-decoration: underline
}

.panel section {
	position: initial;
	overflow: hidden;
	display: none;
	gap: inherit;
	flex-direction: inherit;
	align-items: center
}

.panel section.show {
	height: 100%;
	display: inherit;
	pointer-events: none
}

.panel.show>section.show {
	pointer-events: all
}

#registerPanel form,
#resetPanel form {
	display: inherit;
	gap: inherit;
	flex-direction: inherit;
	align-items: center
}

#registerPanel table,
#resetPanel table {
	border-collapse: collapse;
	white-space: nowrap
}

#registerPanel table tr>td+td,
#resetPanel table tr>td+td {
	padding-left: 16px
}

#registerPanel table tr+tr>td,
#resetPanel table tr+tr>td {
	padding-top: 12px
}

#registerPanel table input,
#resetPanel table input {
	min-width: 300px
}

#registerPanel .code,
#resetPanel .code {
	width: 160px;
	font-size: 24px;
	text-align: center
}

#overlay {
	position: fixed;
	pointer-events: none;
	z-index: 100;
	transition-duration: .5s
}

#overlay.block {
	pointer-events: all;
	background-color: rgba(0, 0, 0, .6666666667)
}

#overlay>* {
	position: fixed;
	opacity: 0;
	pointer-events: none;
	transition-duration: .2s;
	transform: translateY(20px)
}

#overlay>.show {
	opacity: 1;
	pointer-events: all;
	transform: none
}

@keyframes spin {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

.spinner {
	animation: spin 1.8s linear infinite;
	font-size: 20px
}

.scene-preview:hover>div,
.scene-preview>div.playing,
.scene-preview>div.editing {
	box-shadow: 0 0 6px var(--color-text-inverse) inset
}

#boardContainer,
#map {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box
}

#initiativePanel {
	width: max-content
}

#initiativePanel span {
	display: flex;
	justify-content: center;
	font-size: 20px
}

#initiativePanel .hidden {
	display: none
}

#initiativeBar {
	width: max-content;
	top: 16px
}

#initiativeBar.hidden {
	display: none
}

#initiativeBar button {
	color: #fff
}

#initiativeBar .char:not(:hover) .step-input {
	pointer-events: none
}

#initiativeBar .char:not(:hover) i {
	opacity: 0
}

#initiativeBar .char:hover {
	z-index: 1
}

#initiativeBar .char:hover>.step-input {
	background-color: var(--color-background)
}

#initiativeBar .char.private {
	color: var(--color-primary)
}

#initiativeBar .char.private>div {
	width: 36px;
	height: 36px;
	margin: 6px 0
}

#initiativeBar .char>.step-input {
	margin-bottom: 4px
}

#initiativeBar .char>div {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	transition-duration: .1s;
	color: #fff
}

#initiativeBar .char>div:hover,
#initiativeBar .char>div.hovered {
	border: 1px solid #fff
}

#initiativeBar .char>div>span {
	width: 100%;
	height: 100%;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, .4)
}

#initiativeBar .roster:empty::after {
	content: "=^.^=";
	color: var(--color-note)
}

#initiativeBar #initiativeReroll:enabled:only-child {
	display: block !important;
	visibility: hidden;
	margin-right: 16px;
	top: auto
}

#initiativeReroll {
	top: 34px
}

#initiativeReroll:disabled {
	display: none
}

#initiativeReroll:only-child::after {
	visibility: visible;
	content: "=^.^=";
	color: var(--color-note)
}

#boardContainer {
	position: relative;
	overflow: hidden;
	user-select: none;
	box-sizing: border-box
}

#boardContainer>.controls {
	position: absolute;
	z-index: 5;
	padding: 8px 10px;
	box-sizing: border-box;
	gap: 8px
}

#boardContainer>.controls h3 {
	margin-top: 2px;
	font-weight: normal
}

#boardContainer>.controls button.active {
	color: var(--color-text-primary);
	background-color: var(--color-button-big)
}

#boardContainer>.controls #gridControls {
	display: flex;
	flex-direction: column
}

#boardContainer>.controls #gridControls>span {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	white-space: nowrap
}

#boardContainer>.controls #gridControls>span input {
	width: 160px
}

#boardContainer #sceneEditor {
	top: 16px;
	left: 16px;
	width: min-content
}

#boardContainer #rightControls {
	position: absolute;
	top: 16px;
	right: 16px;
	gap: 16px;
	display: flex;
	flex-direction: column;
	z-index: 6;
	pointer-events: none;
	width: 280px
}

#boardContainer #rightControls>.panel {
	padding: 8px;
	transition: opacity .2s
}

#boardContainer #prefabPalette {
	gap: 0;
	height: auto;
	max-height: 800px;
	transition-property: opacity, max-height !important;
	transition-timing-function: ease-in-out !important
}

#boardContainer #prefabPalette>.close {
	background-color: rgba(0, 0, 0, 0) !important
}

#boardContainer #prefabPalette.collapsed {
	max-height: 42px;
	overflow: hidden
}

#boardContainer #prefabPalette.collapsed>.prefab-selection {
	opacity: 0
}

#boardContainer #prefabPalette #prefabImage {
	width: 80px;
	height: 80px;
	align-self: center
}

#boardContainer #prefabPalette #emptyIcon {
	font-size: 80px;
	opacity: .5;
	align-self: center
}

#boardContainer #prefabPalette #prefabProperties {
	transition-duration: .3s;
	overflow: hidden;
	max-height: 600px;
	margin-top: 8px
}

#boardContainer #prefabPalette #prefabProperties.disabled {
	max-height: 0;
	margin-top: 0
}

#boardContainer #prefabPalette #prefabProperties span {
	display: flex;
	gap: 8px;
	white-space: nowrap
}

#boardContainer #prefabPalette #prefabProperties span>input {
	width: 100%
}

#boardContainer #prefabPalette #prefabAccess {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: 1px;
	border: 1px solid var(--color-input-underline);
	background-color: var(--color-input-underline);
	z-index: 10;
	opacity: 1;
	overflow-y: auto;
	max-height: 180px;
	transition-duration: .2s
}

#boardContainer #prefabPalette #prefabAccess>li {
	border: none;
	border-radius: 0;
	color: var(--color-note);
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	background-color: var(--color-background)
}

#boardContainer #prefabPalette #prefabAccess>li.active::after {
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased
}

#boardContainer #prefabPalette #prefabAccess>li.active {
	color: var(--color-text-primary)
}

#boardContainer #prefabPalette #prefabAccess>li:hover {
	background-color: var(--color-not-intense)
}

#boardContainer #prefabPalette #prefabAccess.disabled {
	max-height: 0;
	border: 0 solid rgba(0, 0, 0, 0)
}

#boardContainer #selectionProperties {
	position: relative;
	gap: 8px;
	white-space: nowrap
}

#boardContainer #selectionProperties>span {
	justify-content: flex-start;
	width: 260px
}

#boardContainer #selectionProperties>span>:first-child {
	margin-left: 8px
}

#boardContainer #selectionProperties>span>input {
	min-width: 48px;
	width: 100%
}

#boardContainer #sizeInherit {
	position: absolute;
	left: 64px;
	color: var(--color-note);
	pointer-events: none
}

#boardContainer #playerControls {
	top: 16px;
	left: 16px;
	display: flex;
	flex-direction: column;
	padding: 0
}

#boardContainer #playerControls button {
	height: 40px
}

#boardContainer #playerControls .tab {
	position: relative
}

#boardContainer #playerControls .tab .content {
	position: absolute;
	top: -4px;
	left: calc(100% - 4px);
	pointer-events: none;
	opacity: 0;
	transition-duration: .1s;
	padding: 4px
}

#boardContainer #playerControls .tab .toolbox {
	grid-auto-flow: column;
	border-color: var(--color-not-intense);
	background-color: var(--color-not-intense) !important;
	color: var(--color-text-primary)
}

#boardContainer #playerControls .tab:active {
	background-color: var(--color-button-hover)
}

#boardContainer #playerControls .tab.hovered .content,
#boardContainer #playerControls .tab.active .content {
	pointer-events: all;
	opacity: 1;
	left: 100%
}

#boardContainer .no-edit,
#boardContainer .edit-only {
	transition-duration: .2s
}

#boardContainer.edit .movable:not(#angleArrow) {
	opacity: .5;
	pointer-events: none
}

#boardContainer.edit #gridCanvas.blink pattern>* {
	opacity: 1 !important
}

#boardContainer.edit #rightControls>div {
	pointer-events: none
}

#boardContainer:not(.edit) #gridPadding {
	display: none
}

#boardContainer:not(.edit) .movable.accessible {
	cursor: move
}

#boardContainer:not([mode=measure]) #measureCanvas {
	pointer-events: none
}

#boardContainer:not([mode=fow]) #polymaskWrapper {
	pointer-events: none;
	opacity: .85
}

.color-tile,
.prefab {
	cursor: pointer;
	box-sizing: border-box;
	border: 2px solid #ff0084
}

.selected.color-tile,
.selected.prefab {
	opacity: 1;
	border: 2px solid var(--color-note)
}

.prefab {
	background-size: cover;
	background-origin: border-box;
	background-position: center;
	background-clip: content-box;
	opacity: .5;
	align-items: center;
	font-size: 20px
}

.prefab:not(.selected) {
	transform: scale(0.95)
}

.prefab:not(.selected):hover {
	opacity: 1
}

.prefab-selection {
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: opacity .1s
}

.prefab-container {
	padding: 1px;
	gap: 1px
}

.prefab-container>*,
.prefab-container>.wrapper>* {
	width: 36px;
	height: 36px;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1)
}

.prefab-container>*:active,
.prefab-container>.wrapper>*:active {
	transform: scale(0.9) !important
}

#sceneSelector {
	bottom: -130px;
	min-height: 130px;
	max-height: 130px;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	border-right: none;
	border-bottom: none;
	border-left: none;
	min-width: 100%;
	width: 100%;
	border-radius: 0%;
	padding: 0 !important
}

#sceneSelector>.top-hook {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	align-items: center;
	transition-duration: .2s
}

#sceneSelector>.top-hook>div {
	align-items: center;
	color: #fff;
	text-shadow: 0 0 3px #000, 0 0 8px rgba(0, 0, 0, .6666666667);
	padding: 8px 0
}

#sceneSelector:hover,
#sceneSelector.hovered {
	bottom: 0
}

#sceneSelector:hover>.top-hook,
#sceneSelector.hovered>.top-hook {
	opacity: 0
}

#sceneSelector:not(:hover, .hovered) {
	box-shadow: none !important
}

#sceneSelector:hover,
#sceneSelector.hovered {
	z-index: 7
}

#scenes {
	flex-direction: row;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 4px;
	padding: 8px
}

#addScene {
	min-width: 140px
}

.scene-preview {
	display: flex;
	flex-direction: column
}

.scene-preview>div {
	background-size: cover;
	background-origin: border-box;
	background-position: center;
	background-clip: content-box;
	min-width: 140px;
	max-width: 140px;
	height: 100vh;
	overflow: hidden;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
	position: relative
}

.scene-preview>div.editing {
	border: 2px dashed var(--color-text-primary) !important
}

.scene-preview>div.playing {
	border: 2px solid var(--color-good) !important
}

.scene-preview>div button {
	border-radius: 0%;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: var(--color-not-intense);
	align-items: center
}

.scene-preview>div button:hover {
	opacity: .8 !important
}

.scene-preview>span {
	padding: 0;
	display: flex;
	justify-content: space-between;
	opacity: .5;
	transition-duration: .1s;
	height: 0;
	min-height: 0;
	overflow: hidden
}

.scene-preview>span button.play:hover {
	color: var(--color-good)
}

.scene-preview:hover>div {
	border: 2px solid var(--color-text-primary)
}

.scene-preview:hover>div button {
	opacity: .75
}

.scene-preview:hover>span {
	opacity: 1;
	padding: 2px 0;
	min-height: 36px
}

#movableLabel input {
	color: var(--color-primary)
}

#movableLabel b:not(:empty) {
	margin-right: 3px
}

#selectionArea {
	stroke: #fff;
	stroke-width: 2px;
	fill: rgba(255, 255, 255, .3333333333)
}

#gridCanvas {
	pointer-events: none
}

#gridCanvas pattern {
	stroke-width: .05;
	fill: none
}

#session {
	display: flex;
	flex-direction: row
}

#session:not(.is-dm) .dm {
	display: none !important
}

#session:not(.is-dm) #initiativeReroll {
	pointer-events: none
}

#session:not(.is-dm) .movable.accessible {
	border-color: #fff;
	z-index: calc(200 - var(--size))
}

#session:not(.is-dm) .movable.accessible>img {
	box-shadow: 0 0 8px rgba(0, 0, 0, .5333333333) inset
}

#session:not(.is-dm) .step-input {
	background-color: rgba(0, 0, 0, 0) !important
}

#session:not(.is-dm) .step-input i {
	visibility: hidden
}

#session:not(.is-dm) #player>:not(button) {
	max-width: 100%
}

@media only screen and (min-width: 800px) {
	#session>*:not(:last-child) {
		border-right: 2px solid var(--color-separator)
	}
}

.roll {
	font-family: "Courier New", Courier, monospace;
	padding: 0 2px;
	color: #fff !important;
	background-color: #1a1a1a;
	border-radius: 4px;
	padding: 2px 4px 2px 3px;
	margin: 0 2px
}

.roll.ignored {
	opacity: .5
}

.dice {
	color: var(--color-primary) !important
}

#log {
	min-width: calc(150px + 8vw);
	width: 25vw;
	max-width: 300px;
	z-index: 2
}

#log,
#log>* {
	display: flex;
	flex-direction: column
}

#messages {
	scrollbar-width: none;
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
	padding: 4px;
	gap: 6px

}

#messages>* {
	position: relative;
	padding: 8px;
	text-shadow: var(--shadow-text);
	font-size: 1.1em;
	overflow-wrap: break-word;
	background-color: #4b4b4b;
	border-radius: 0px;
	width: 95%;
	
}

#messages>*>span {
	color: #4b4b4b;
	display: inline-flex;
	flex-wrap: wrap
}

#messages>*.hidden {
	opacity: .6
}

#messages>*.big {
	max-width: calc(100% - 16px)
}

#messages>*.system {
	align-self: center;
	text-align: center;
	background: none;
	color: var(--color-note)
}

#messages>*.mine {
	align-self: left
}

#messages i {
	display: flex;
	position: absolute;
	right: 100%;
	padding: 6px;
	top: calc(50% - 14px);
	font-size: 14px;
	color: var(--color-note)
}

#messages i span {
	color: #fff
}

#messages>.clickable {
	cursor: pointer;
	display: block
}

#messages>.clickable:hover {
	background-color: var(--color-button-hover)
}

#messages>.clickable.no-select {
	user-select: none
}

#messages>.clickable>span {
	bottom: calc(50% - 16px);
	left: 25%;
	width: 50%;
	max-width: 50%;
	text-align: center;
	color: #fff
}

#chat {
	position: relative
}

#chat>textarea {
	max-height: 8vh;
	min-height: 40px;
	resize: none
}

#chat>div {
	position: absolute;
	top: 0;
	right: 0
}

#chat>div span {
	color: #fff;
	top: 0;
	bottom: auto;
	right: 100%
}

#chat button {
	transition-duration: .2s
}

#chatRoller {
	display: flex;
	transition: .2s ease-out;
	margin-top: 0
}

#chatRoller.disabled {
	pointer-events: none;
	margin-top: -50%;
	opacity: 0
}

#chatRoller button {
	color: var(--color-primary)
}

#chatSend {
	align-self: flex-end
}

#miniChat {
	position: absolute;
	bottom: calc(100% + 4px);
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px
}

#miniChat>span {
	position: relative;
	opacity: .9;
	background-color: var(--color-not-intense);
	text-align: start
}

.animate-transform {
	transition-property: transform, scale !important;
	transition-duration: calc(var(--anim-duration)*1ms) !important;
	transition-timing-function: ease !important
}

#board {
	position: absolute;
	display: flex;
	transition: scale .05s;
	border: 2px solid var(--color-separator);
	box-sizing: border-box;
	box-shadow: 0 0 20px rgba(0, 0, 0, .2);
	outline: 1px solid rgba(0, 0, 0, 0)
}

#board canvas {
	position: absolute;
	transition-duration: .2s
}

#board>.hidden {
	display: none
}

#movableGhost {
	background-size: cover;
	background-origin: border-box;
	background-position: center;
	background-clip: content-box;
	opacity: .75;
	z-index: 1000;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, .6666666667);
	pointer-events: none
}

#movableGhost.translucent {
	opacity: .5;
	z-index: 0;
	box-shadow: none
}

#gridPadding {
	outline: 2px solid #fff;
	pointer-events: none
}

#gridPadding>* {
	pointer-events: all
}

#gridPadding:not(:active)>.corner {
	border: 5px solid #fff;
	background-color: #fff
}

@keyframes blink {
	0% {
		stroke: rgba(136, 136, 136, .8666666667);
		fill: rgba(136, 136, 136, .8666666667)
	}

	50% {
		stroke: rgba(255, 255, 255, .8666666667);
		fill: rgba(255, 255, 255, .8666666667)
	}

	100% {
		stroke: rgba(136, 136, 136, .8666666667);
		fill: rgba(136, 136, 136, .8666666667)
	}
}

#measureCanvas {
	animation: blink 2s infinite linear;
	z-index: 1001
}

#distanceCanvas {
	stroke: rgba(238, 238, 238, .4666666667);
	fill: rgba(238, 238, 238, .4666666667)
}

.grid-canvas {
	stroke-width: .15em;
	stroke-linecap: round;
	stroke-linejoin: round
}

.grid-canvas>* {
	pointer-events: none
}

.grid-canvas path,
.grid-canvas .no-fill {
	fill: none !important;
	vector-effect: non-scaling-stroke
}

.grid-canvas circle.origin {
	stroke: none !important;
	r: .4em
}

.grid-canvas g>rect {
	fill: unset;
	stroke: #fff !important
}

.toast,
.distance-text {
	position: absolute;
	z-index: 1002;
	padding: 8px 12px;
	border-radius: 4px;
	background-color: var(--color-not-intense);
	box-shadow: 0 0 8px 2px rgba(0, 0, 0, .3333333333);
	transition: transform 0s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .3s .1s;
	pointer-events: none;
	white-space: nowrap
}

.distance-text {
	transform-origin: top left
}

.distance-text.slow {
	opacity: 0;
	animation: reveal-opacity .4s .3s forwards
}

@keyframes reveal-opacity {
	0% {
		opacity: 0
	}

	100% {
		opacity: .95
	}
}

#tooltip {
	position: absolute;
	bottom: 80px;
	background-color: rgba(17, 17, 17, .6666666667);
	border-radius: 8px;
	padding: 8px 12px
}

#tooltip:empty {
	display: none
}

#tooltip b {
	color: #ffc69a
}

#grid {
	position: absolute;
	z-index: 0
}

.use-cell-size {
	font-size: calc(var(--cell-size)*.5px)
}

@keyframes movable-spawn {
	0% {
		margin-top: 20px;
		opacity: 0
	}

	100% {
		margin-top: 0;
		opacity: 1
	}
}

@keyframes movable-remove {
	0% {
		margin-top: 0;
		opacity: .5
	}

	100% {
		margin-top: 40px;
		opacity: 0
	}
}

.aura,
.ring,
.movable>.img {
	border-radius: 50%;
	pointer-events: none
}

.movable {
	position: absolute;
	display: flex;
	justify-content: center;
	border: 0 solid var(--color-background);
	border-radius: 50%;
	left: calc(var(--size)*-35px);
	top: calc(var(--size)*-35px);
	width: calc(var(--size)*70px);
	height: calc(var(--size)*70px);
	box-sizing: border-box;
	transform: translate(var(--x), var(--y)) scale(calc(var(--cell-size) / 70));
	transition: transform .3s, left .1s, top .1s, width .1s, height .1s, opacity .1s;
	z-index: calc(100 - var(--size));
	--size: 1;
	--x: 0;
	--y: 0;
	--angle: 0
}

.movable.invisible:not(.accessible),
.movable#inactiveSceneWarning.hidden:not(.accessible),
#boardContainer .movable#selectionProperties.hidden:not(.accessible),
#boardContainer.edit .movable.no-edit:not(.accessible),
#boardContainer:not(.edit) .movable.edit-only:not(.accessible),
#boardContainer:not([mode=pan]) .movable.panning-only:not(.accessible),
#session.demo .movable.no-demo:not(.accessible) {
	display: none
}

.movable.invisible.accessible,
.movable.accessible#inactiveSceneWarning.hidden,
#boardContainer .movable.accessible#selectionProperties.hidden,
#boardContainer.edit .movable.accessible.no-edit,
#boardContainer:not(.edit) .movable.accessible.edit-only,
#boardContainer:not([mode=pan]) .movable.accessible.panning-only,
#session.demo .movable.accessible.no-demo {
	opacity: .65;
	pointer-events: all
}

.movable:not(#movableGhost) {
	animation: movable-spawn .5s cubic-bezier(0.23, 1, 0.32, 1)
}

.movable:not(#movableGhost)>.img {
	background-color: rgba(17, 17, 17, .5333333333)
}

.movable.no-animate-move {
	transition-property: border-color, width, height, opacity
}

.movable.animate-remove {
	animation: movable-remove .4s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045) !important
}

.movable>* {
	position: absolute;
	box-sizing: border-box
}

.movable>.img {
	background-size: cover;
	background-origin: border-box;
	background-position: center;
	background-clip: content-box;
	border: 3px solid;
	border-color: inherit;
	border-radius: 50%
}

.movable>.rotating {
	rotate: calc(var(--angle)*1deg)
}

.movable>.conds {
	top: 0;
	left: 0;
	display: flex;
	cursor: default
}

.movable>.conds>i {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	width: 26px;
	height: 26px;
	font-size: 14px;
	background-color: var(--color-background)
}

.movable>.conds>i>span {
	font-size: inherit
}

.movable>.aura {
	left: calc(var(--aura)*-70px);
	top: calc(var(--aura)*-70px);
	width: calc(70px*(var(--aura)*2 + var(--size)));
	height: calc(70px*(var(--aura)*2 + var(--size)));
	background-color: rgba(136, 136, 136, .2666666667);
	transition: .1s
}

.movable>.ring {
	width: 100%;
	height: 100%;
	animation: scale-pulse 1s infinite alternate ease-in-out;
	opacity: .7
}

.movable>.toast,
.movable>.distance-text {
	top: 60%;
	font-size: 14px;
	background-color: rgba(17, 17, 17, .6);
	padding: 6px 8px;
	opacity: 0
}

.movable>.bars {
	bottom: 100%;
	width: 100%;
	pointer-events: none;
	padding-inline-start: 0;
	margin: 0;
	transition: .1s
}

.movable.empty {
	border-color: var(--color-bad);
	display: flex;
	align-items: center;
	justify-content: center
}

.movable.empty .img {
	background: #222 !important
}

.movable.empty>span {
	pointer-events: none;
	display: flex;
	font-family: "Fira Mono";
	color: var(--color-bad);
	text-align: center;
	font-size: calc(var(--size)*110px/var(--length));
	z-index: 3;
	--length: 1
}

.movable.accessible:hover {
	border-color: var(--color-primary) !important
}

.movable.selected {
	border-color: var(--color-primary);
	z-index: calc(300 - var(--size))
}

.movable.selected>img {
	box-shadow: 0 0 16px 4px rgba(0, 0, 0, .6666666667), 0 0 8px rgba(0, 0, 0, .5333333333) inset
}

.movable.selected>.ring {
	border: 3px solid #ff0000
}

.movable.active,
.movable.hovered {
	border-color: #ff0000 !important
}

.movable.active>.ring,
.movable.hovered>.ring {
	border: 5px solid #5affe9
}

.movable:not(:active):hover>.toast,
.movable:not(:active):hover>.distance-text {
	opacity: 1;
	transition-delay: 0s
}

.token-bar.active,
.movable:not(:active):hover .token-bar,
.movable:not(:active).active .token-bar {
	height: 1em;
	opacity: 1
}

.token-bar.active span,
.movable:not(:active):hover .token-bar span,
.movable:not(:active).active .token-bar span {
	opacity: 1
}

.token-bar {
	position: relative;
	width: 90%;
	height: .6em;
	padding: 0;
	margin: 2px auto;
	background-color: rgba(51, 51, 51, .8);
	transition: .2s;
	justify-content: center;
	opacity: .7;
	--progress: 0;
	--color: #000
}

.token-bar>.bar-fill {
	height: 100%;
	width: calc(var(--progress)*100%);
	margin-right: auto;
	background-color: var(--color)
}

.token-bar span {
	position: absolute;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	transition: inherit;
	text-shadow: var(--shadow-text)
}

.token-bar-label {
	width: max-content;
	right: 100%;
	margin-right: 4px
}

.token-bar-value {
	padding: 0 2px
}

@keyframes scale-pulse {
	0% {
		transform: scale(calc(1 + 0.3 / var(--size)))
	}

	100% {
		transform: scale(calc(1 + 0.5 / var(--size)))
	}
}

#selectionConditions {
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	width: fit-content
}

#conds {
	top: 0;
	right: 0;
	gap: 8px
}

#conds .toolbox {
	grid-auto-flow: column;
	grid-auto-columns: max-content
}

.ping {
	position: absolute;
	pointer-events: none;
	border-radius: 200px;
	border: 3px solid #fff;
	animation: ping-grow infinite 3s ease-out;
	z-index: 25
}

@keyframes ping-grow {
	0% {
		width: 0;
		height: 0;
		opacity: 0
	}

	10% {
		opacity: 1
	}

	70% {
		opacity: 1
	}

	100% {
		width: 200px;
		height: 200px;
		transform: translate(-100px, -100px);
		opacity: 0
	}
}

#inactiveSceneWarning {
	position: absolute;
	z-index: 6;
	top: 16px;
	background-color: var(--color-background);
	box-shadow: 0 0 8px 2px rgba(0, 0, 0, .4);
	box-sizing: border-box;
	padding: 8px;
	border-radius: 4px;
	text-align: center;
	transition-property: transform, opacity;
	cursor: pointer
}

#online {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 20px 16px;
	display: flex;
	flex-wrap: wrap-reverse;
	gap: 4px;
	width: 20vw;
	min-width: 300px;
	min-height: 30px;
	z-index: 5
}

#online>span {
	display: flex;
	align-items: center;
	background-color: rgba(17, 17, 17, .7333333333);
	padding: 6px 10px 6px 8px;
	gap: 6px;
	border-radius: 100px;
	box-sizing: border-box
}

#online>span.with-tooltip {
	cursor: pointer
}

#online>span.with-tooltip:hover {
	background-color: rgba(4, 4, 4, .8)
}

#dice {
	border-collapse: collapse;
	background-color: var(--color-background)
}

#diceTab {
	z-index: 1;
	--offset: 0
}

#diceTab .with-tooltip {
	position: absolute;
	bottom: calc(100% - 4px);
	width: calc(100% - 8px);
	border-bottom: none !important;
	box-sizing: border-box;
	background-color: var(--color-background);
	display: flex;
	gap: 4px;
	align-items: center
}

#diceTab tr {
	counter-reset: drow;
	counter-increment: drow var(--offset)
}

#diceTab td:not(:first-child)::before {
	counter-increment: drow;
	content: counter(drow)
}

#diceTab td,
#diceTab .with-tooltip {
	padding: 4px;
	min-width: 20px;
	border: 1px solid var(--color-not-intense);
	border-radius: 0%;
	transition-duration: 0s
}

.tab-horiz {
	display: flex;
	gap: 4px
}

.tab-horiz>* {
	transition: opacity .1s
}

#ambience {
	position: relative;
	z-index: 1;
	user-select: none
}

#ambience>button {
	position: relative;
	background: var(--color-header);
	border-radius: 0%;
	gap: 6px
}

#ambience .shrink {
	max-height: 300px;
	transition: max-height .3s, padding .3s
}

#ambience.keep-open #pinPlayer {
	color: var(--color-primary)
}

#ambience:not(:hover) .shrink {
	max-height: 0 !important;
	padding: 0 !important;
	transition: max-height .3s, padding .1s .2s;
	overflow: hidden
}

#ambience:hover>.content,
#ambience.keep-open>.content {
	max-height: 400px
}

#ambience:hover #pinPlayer,
#ambience.keep-open #pinPlayer {
	opacity: 1
}

#ambience>.content {
	max-height: 0;
	transition: max-height .2s;
	background: var(--color-background);
	border-bottom: 2px solid var(--color-separator);
	overflow: hidden
}

#ambience>.content>div {
	margin: 4px;
	padding: 6px;
	background: var(--color-header)
}

#ambience>.content span {
	display: flex;
	padding: 4px;
	gap: 6px
}

#ambience>.content span>i {
	min-width: 20px;
	text-align: center
}

#player {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background: var(--color-button-hover) !important;
	transition-duration: .25s;
	height: 38px
}

#player.hide {
	padding: 0 !important;
	margin: 0 !important;
	height: 0
}

#player>:not(button) {
	width: max-content;
	max-width: calc(100% - 44px);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-shadow: var(--shadow-text);
	transition: opacity .4s
}

#player>:not(button).transition {
	cursor: default;
	opacity: 0;
	transition: .2s
}

#player a {
	text-decoration: none
}

#player>button {
	position: absolute;
	right: 8px;
	background-color: rgba(0, 0, 0, 0)
}

#pinPlayer {
	color: var(--color-note);
	position: absolute;
	right: 16px;
	top: 11px;
	opacity: 0;
	transition: opacity .2s
}

#playlists {
	display: grid;
	grid-template-columns: auto auto;
	gap: 2px;
	padding: 8px 0
}

.no-music #playlists,
.no-music #playerMusicSlider {
	display: none !important
}

.no-music #ambience:hover>.content,
.no-music #ambience.keep-open>.content {
	max-height: 140px
}

.no-music #ambience:hover #pinPlayer,
.no-music #ambience.keep-open #pinPlayer {
	opacity: 1
}

.no-music #ambience .shrink {
	max-height: 140px
}

#angleArrow {
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	animation: none !important;
	transition: opacity .2s;
	--offset: 20px
}

#angleArrow.show {
	opacity: 1
}

#angleArrow * {
	position: absolute
}

#angleArrow .rotating {
	rotate: calc(var(--angle)*1deg + 180deg)
}

#angleCurrent {
	--offset: -16px
}

.arrowEnd {
	transform: translate(0, calc(var(--size) * -35px - var(--offset)));
	text-shadow: 0 0 4px rgba(0, 0, 0, .7333333333);
	font-size: 1.5rem
}

.color-palette {
	display: flex;
	gap: 2px
}

.color-tile {
	background-color: var(--color);
	width: 100%;
	height: 24px
}

.color-tile.selected {
	border-color: #fff
}

@keyframes fade-in {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes shake {
	0% {
		transform: rotate(-10deg)
	}

	50% {
		transform: rotate(10deg)
	}

	100% {
		transform: rotate(-10deg)
	}
}

@keyframes shake-short {
	0% {
		transform: rotate(0deg)
	}

	2% {
		transform: rotate(-5deg)
	}

	6% {
		transform: rotate(10deg)
	}

	10% {
		transform: rotate(-10deg)
	}

	14% {
		transform: rotate(10deg)
	}

	18% {
		transform: rotate(-7deg)
	}

	22% {
		transform: rotate(2deg)
	}

	25% {
		transform: rotate(0deg)
	}
}

#iconWall {
	position: fixed;
	z-index: -100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden
}

#iconWall i {
	opacity: 1;
	transition: opacity 3s;
	font-size: 40px;
	animation: fade-in 4s ease-out, shake 4s ease-in-out infinite
}

#iconWall>div {
	position: absolute;
	text-align: center;
	color: var(--color-icon-wall);
	pointer-events: none;
	transition: transform 20s linear
}

#iconWall>div.remove>i {
	opacity: 0
}

#home {
	display: flex;
	flex-direction: column;
	overflow: auto
}

#home h1 {
	font-size: 2em
}

#home p:empty {
	display: none
}

#home span {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
	white-space: nowrap
}

#home>.spacing {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 48px 32px
}

#home>.spacing h1 {
	text-align: center
}

#home>#savedGames {
	display: none;
}

.vertical-margin {
	margin-top: 16px;
	margin-bottom: 16px
}

#loginTab {
	display: flex;
	flex-direction: row;
	justify-content: center;

	text-align: center;
	overflow: hidden;
	flex: none;
	padding: 48px;
	gap: 15vw;
	max-height: 500px;
	transition-property: max-height, padding, border-bottom;
	transition-delay: .1s;
	transition-duration: .7s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1)
}

#loginTab p {
	max-width: none
}

#loginTab>div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px
}

#loginTab .panel {
	gap: 16px;
	padding: 30px 36px;
	box-shadow: none;
	min-width: 20rem;
	width: 22vw
}

#loginTab .panel>div {
	display: flex;
	flex-direction: column;
	gap: 8px
}

#loginTab.hidden {
	max-height: 0;
	padding: 0 48px;
	border-bottom: 0 solid rgba(0, 0, 0, 0);
	pointer-events: none
}

.glow {
	cursor: pointer;
	color: var(--color-primary);
	font-size: 64px
}

.glow>i {
	transition: color .15s, font-size .85s cubic-bezier(0.19, 1, 0.22, 1);
	animation: shake-short 7s 3s ease-in-out infinite;
	margin-bottom: 16px
}

.glow:hover>i {
	color: #fff;
	font-size: 75px
}

.glow i:active {
	font-size: 68px
}

#rememberMe .with-tooltip {
	align-self: flex-start
}

#rememberMe .with-tooltip span {
	max-width: max-content
}

@keyframes grow-shrink {
	0% {
		max-height: 0;
		padding: 0
	}

	15% {
		max-height: 60px;
		padding: 4px
	}

	85% {
		max-height: 60px;
		padding: 4px
	}

	100% {
		max-height: 0;
		padding: 0
	}
}

#loginText {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color-separator);
	justify-content: center !important;
	animation: grow-shrink 2s .5s ease-in-out paused both;
	overflow: hidden
}

#gamesContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

#gamesContainer .game {
	display: flex;
	flex-direction: column;
	background-color: var(--color-header);
	padding: 8px;
	gap: 16px;
	min-width: 200px;
	border-radius: 4px;
	transition-duration: .3s;
	animation: popup .5s cubic-bezier(0.165, 0.84, 0.44, 1) backwards
}

#gamesContainer .game h3 {
	margin: 0
}

#gamesContainer .game span {
	display: flex;
	align-items: center;
	justify-content: space-between
}

#gamesContainer .game span button {
	min-width: 25px;
	height: 25px;
	padding: 4px
}

@keyframes popup {
	0% {
		transform: scale(0.5);
		opacity: 0
	}

	100% {
		transform: scale(1);
		opacity: 1
	}
}

#features {
	align-items: center;
	gap: 32px !important
}

#features .info {
	gap: 16px;
	max-width: 50%
}

#features .info img {
	max-width: max-content;
	margin-top: auto;
	margin-bottom: 3px
}

#features p {
	font-size: 19px
}

#features>div {
	display: flex;
	justify-content: center;
	gap: 32px;
	width: 100%;
	margin-bottom: 100px
}

#features>div>div {
	min-width: 32vw
}

#features>div:nth-child(odd) {
	flex-direction: row-reverse
}

#features img,
#features video {
	border: 2px solid var(--color-note);
	border-radius: 6px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .4);
	opacity: .7;
	transition: .2s
}

#features img:hover,
#features video:hover {
	opacity: 1
}

#features .media>* {
	height: 24vw
}

#changelogButton a {
	position: absolute;
	top: 28px;
	right: 16px
}

#changelogButton a>span {
	right: calc(100% + 4px);
	bottom: -50%
}

#changelogButton .content {
	position: absolute;
	top: calc(50% + 16px);
	right: 0;
	pointer-events: none;
	opacity: 0;
	transition: .1s linear;
	padding: 14px 0 8px 8px;
	text-align: start;
	cursor: default
}

#changelogButton ::-webkit-scrollbar {
	display: none
}

#changelogButton.active .content {
	pointer-events: all;
	opacity: 1
}

#changelogButton.active #changelog {
	max-height: 200px
}

#changelogButton.new::before {
	content: "•";
	animation: changelog-blink 1.5s 4 forwards
}

@keyframes changelog-blink {
	0% {
		color: var(--color-primary)
	}

	50% {
		color: #fff
	}

	100% {
		color: var(--color-primary)
	}
}

#changelog {
	background-color: var(--color-header);
	outline: 2px solid var(--color-separator);
	overflow-y: scroll;
	padding: 12px;
	margin: 0;
	border-radius: 0 0 0 4px;
	width: calc(200px + 15vw);
	max-height: 0px;
	gap: 18px;
	transition-duration: .1s
}

#changelog span {
	white-space: nowrap
}

#changelog b {
	color: #e6e6e6
}

#changelog li {
	display: revert;
	background-color: unset;
	list-style-type: disc;
	margin: 0 0 0 24px;
	padding: 0
}

#changelog li>li i {
	color: #e6e6e6;
	margin-right: 1px
}

#changelog li>li:not(:last-child) {
	margin-bottom: 4px
}

#changelog>li {
	color: var(--color-note);
	list-style-type: none;
	margin: 0;
	padding-left: 6px;
	border-left: 4px solid var(--color-separator)
}

#changelog>.new {
	border-left: 4px solid var(--color-primary)
}

.product-info p {
	text-align: center;
	align-self: center
}

.product-info b {
	color: #fff
}

#uploadPanel .hide {
	display: none
}

#uploadPanel #dragText {
	user-select: none
}

.canvas-container {
	justify-content: center;
	align-items: center;
	overflow: hidden;
	min-width: 50vh;
	min-height: 30vh;
	position: relative;
	box-shadow: 0 0 4px rgba(0, 0, 0, .6);
	box-sizing: border-box;
	transition-duration: .1s;
	outline: 2px dashed rgba(0, 0, 0, 0);
	outline-offset: 4px
}

.canvas-container.drag {
	outline-color: #fff;
	outline-offset: 0;
	background-color: rgba(170, 170, 170, .3333333333);
	filter: contrast(0.5) brightness(1.5)
}

.canvas-container>*:not(img) {
	position: absolute
}

.crop-container {
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	--resizer-size: 16px;
	--inset-size: 6px;
	--inset: -10px;
	--corner-size: calc(var(--resizer-size) + 10px);
	z-index: 2;
	cursor: move;
	outline: 1px solid rgba(255, 255, 255, .6666666667)
}

.crop-container>* {
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	width: var(--resizer-size);
	height: var(--resizer-size);
	box-sizing: border-box
}

.crop-container>.width {
	left: var(--inset-size);
	right: var(--inset-size);
	width: auto
}

.crop-container>.height {
	top: var(--inset-size);
	bottom: var(--inset-size);
	height: auto
}

.crop-container>.corner {
	width: var(--corner-size);
	height: var(--corner-size);
	border: 2px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	box-shadow: 0 0 4px rgba(0, 0, 0, .6666666667);
	transition-duration: .2s
}

.crop-container>.top {
	top: var(--inset)
}

.crop-container>.right {
	right: var(--inset)
}

.crop-container>.bottom {
	bottom: var(--inset)
}

.crop-container>.left {
	left: var(--inset)
}

.crop-container:active>.corner:not(:active),
.crop-container:not(:hover)>.corner:not(:active) {
	border-color: rgba(255, 255, 255, 0);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0)
}

#storageWarning {
	transition: opacity .2s 1s
}

#contextMenu {
	display: flex;
	flex-direction: column;
	padding: 4px;
	transition: transform .05s, opacity .05s
}

#contextMenu>button {
	background-color: var(--color-background);
	border-radius: 0%
}

#contextMenu>button:hover {
	background-color: var(--color-header)
}

#contextMenu>button:active {
	background-color: var(--color-button-active)
}

#assetPanel {
	align-items: center;
	padding-top: 16px
}

#assetGrid {
	display: grid;
	grid-template-columns: repeat(8, max-content);
	overflow-x: hidden;
	overflow-y: scroll;
	max-height: 316px;
	background-color: var(--color-background);
	border: 4px solid var(--color-background);
	padding-right: 4px;
	gap: 4px
}

#assetGrid>div {
	cursor: pointer;
	width: 96px;
	height: 96px;
	background-color: var(--color-not-intense);
	background-size: cover
}

#assetGrid>div:hover {
	background-color: var(--color-button-hover)
}

#assetGrid>div:active {
	background-color: var(--color-button-active)
}

@media screen and (max-width: 800px) {
	#assetGrid {
		grid-template-columns: repeat(5, max-content)
	}
}

.fill-board {
	position: absolute;
	width: 100%;
	height: 100%
}

#polymaskWrapper {
	top: -80px;
	left: -80px;
	width: calc(100% + 160px) !important;
	height: calc(100% + 160px) !important
}

#polymask {
	width: 100%;
	height: 100%
}

#polymask rect {
	width: 100%;
	height: 100%
}

#polymask .polypattern,
#polymask #polynegdisplay {
	stroke: #fb8;
	stroke-width: .15em
}

#polymask #polynegdisplay {
	fill: none
}

#polymask #polyprev {
	fill: none;
	stroke: #fff;
	stroke-width: .15em;
	stroke-dasharray: .3em;
	stroke-linejoin: round;
	stroke-linecap: round
}

#polymask #polyprev.poly-invalid {
	stroke: #f66
}

#polyprevpos,
#polyprevneg {
	stroke: #fff !important;
	stroke-width: .15em
}

#polyprevpos {
	opacity: .9
}

#polyprevneg {
	opacity: .75
}

mask>rect {
	--darkreader-inline-fill: white !important
}

.polypattern,
#polyMaskWrapper.opaque .positive-pole {
	fill: url(#barrier) !important
}

#polymaskWrapper.opaque {
	z-index: 2;
	opacity: 1 !important
}

#polymaskWrapper.opaque .polypattern {
	fill: var(--color-background) !important;
	opacity: 1 !important
}

#map {
	justify-content: center;
	position: absolute;
	z-index: 10;
	background-color: rgba(0, 0, 0, .8666666667);
	transition-duration: .2s;
	font-size: 23px;
	padding-top: 20px;
	gap: 12px
}

#map.edit #mapSelect {
	transform: scale(1.1)
}

#map .hidden {
	display: none !important
}

#map>button[type=reset] {
	left: 16px;
	top: 16px
}

#map>button {
	position: absolute;
	font-size: inherit;
	align-items: center;
	gap: 8px;
	z-index: 2;
	background-color: rgba(17, 17, 17, .3333333333) !important
}

#map #mapTools button {
	border-radius: 0;
	font-size: 17px
}

#map #mapTools button:nth-child(odd)>span {
	left: -8px
}

#map #mapTools button[mode=text] {
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px
}

#map #changeMap {
	padding: 100px
}

#map #mapShared {
	bottom: calc(100% + 16px)
}

#map #mapDelete {
	top: 16px;
	right: 16px;
	font-size: 18px
}

#map .with-tooltip>span {
	bottom: auto;
	top: 100%;
	z-index: 10;
	font-size: 16px
}

#map #mapDelete>span {
	top: auto;
	right: 100%
}

#map>span {
	position: relative;
	z-index: 1
}

#map>span>input {
	text-align: center;
	opacity: 1 !important
}

#map>span>.navigate:not(.add-map)>span {
	display: none
}

#map>span.focus>.navigate {
	opacity: 0;
	pointer-events: none
}

#map>span:not(.focus)>.dm {
	opacity: 0;
	cursor: default;
	pointer-events: none
}

#map>span>button.dm {
	position: absolute
}

#map .single-item {
	position: absolute !important;
	border-radius: 4px !important;
	outline: 1px solid #aaa;
	min-width: 38px;
	min-height: 38px
}

#map:not(.show) {
	pointer-events: none;
	opacity: 0;
	transition-duration: .25s
}

#map:not(.show)>#maps {
	transform: translateY(150%);
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

#mapSelect,
.on-edit {
	transition-property: opacity;
	transition-duration: .2s
}

.no-bg {
	background-color: rgba(0, 0, 0, 0) !important
}

.no-bg>i {
	transition: transform .05s
}

.no-bg:enabled:hover>.fa-chevron-left {
	transform: translateX(-4px)
}

.no-bg:enabled:hover>.fa-chevron-right {
	transform: translateX(4px)
}

.no-bg:enabled:hover>.fa-plus {
	transform: scale(1.1)
}

#mapSelect {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	overflow-y: auto;
	align-items: center;
	place-content: start center;
	gap: 32px 8px;
	padding: 66px 48px;
	transition-property: opacity, transform;
	z-index: 1
}

.minimap {
	background-size: cover;
	background-origin: border-box;
	background-position: center;
	background-clip: content-box;
	position: relative;
	width: 240px;
	min-height: 180px;
	background-color: var(--color-not-intense);
	border: 2px solid var(--color-note);
	cursor: pointer;
	display: flex;
	justify-content: center
}

.minimap>span {
	position: absolute;
	top: 100%;
	padding-top: 4px;
	font-size: initial
}

#addMap {
	padding: 12px 20px 16px 20px;
	width: 200px;
	margin: 0 20px;
	height: auto;
	gap: 8px
}

#maps {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1)
}

#maps.animate {
	transition-property: opacity, left;
	transition-duration: .4s
}

#session:not(.is-dm) #mapName {
	user-select: none
}

#mapTools {
	position: absolute;
	left: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px
}

#mapTools>#activeColor {
	width: 36px;
	height: 36px;
	position: absolute;
	left: calc(100% + 16px);
	transition-duration: .3s;
	transition-property: opacity, transform
}

#mapTools>#activeColor:disabled {
	opacity: 0;
	pointer-events: none;
	transform: translateX(-16px)
}

#mapTools>div {
	grid-template-columns: auto auto
}

#mapTools.collapsed>#toolInfo,
#mapTools:not(.collapsed)>#infoShow {
	transform: translateX(-8px)
}

.map {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 100%;
	height: 100%;
	max-height: calc(100% - 20px);
	box-sizing: border-box;
	padding: 0 20px;
	transition: scale .05s
}

.map>div {
	height: 100%
}

.map>div text {
	cursor: default;
	user-select: none;
	paint-order: stroke;
	stroke-linejoin: round;
	fill: #fff;
	stroke: #222;
	stroke-width: 5px
}

.map>div[mode=text] text {
	outline: 1px dashed rgba(255, 255, 255, .8666666667);
	cursor: move
}

.map>div[mode=text] text:hover {
	outline: 1px solid rgba(255, 255, 255, .6666666667)
}

.map image {
	background-repeat: no-repeat
}

#toolInfo,
#infoShow {
	top: calc(100% + 16px);
	background-color: rgba(17, 17, 17, .9333333333);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: opacity .2s, transform .4s;
	box-sizing: border-box
}

#toolInfo:hover,
#infoShow:hover {
	background-color: #1a1a1a
}

#toolInfo {
	padding: 8px;
	width: 200px;
	max-width: 260px;
	width: max-content
}

#toolInfo>i {
	font-style: normal;
	color: var(--color-primary)
}

#whiteboardPin {
	fill: rgba(255, 255, 255, .6666666667);
	stroke: #000;
	stroke-width: 2px;
	animation: pin-pulse 4s ease-in-out infinite;
	opacity: 0
}

#whiteboardPin.visible {
	opacity: 1
}

@keyframes pin-pulse {
	0% {
		r: 10px
	}

	50% {
		r: 15px
	}

	100% {
		r: 10px
	}
}

#whiteboardTextControls {
	position: absolute;
	display: flex;
	flex-direction: column;
	padding: 6px;
	gap: 2px;
	transform: translate(-50%, calc(-100% - 24px));
	background-color: var(--color-background);
	box-shadow: 0 0 4px rgba(0, 0, 0, .3333333333);
	transition-property: opacity, transform;
	transition-duration: .2s;
	font-size: 16px;
	z-index: 1
}

#whiteboardTextControls.display-below {
	transform: translate(-50%, 20px)
}

#whiteboardTextControls.hidden {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 8px))
}

#whiteboardTextControls span {
	display: flex;
	gap: 6px;
	align-items: center;
	margin: 0 4px
}

#whiteboardTextControls textarea {
	width: 400px;
	height: 60px;
	overflow: auto;
	white-space: nowrap
}

#whiteboardTextControls input {
	margin-right: auto;
	padding-top: 4px
}

#whiteboardTextControls button {
	padding: 6px 4px;
	background-color: rgba(0, 0, 0, 0)
}

#mapIndex {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	font-size: 14px;
	text-align: center;
	color: var(--color-note)
}

body.document {
	overflow: auto;
	padding: 0 10vw;
	text-align: justify
}

body.document>div {
	padding: 100px 0 160px 0;
	max-width: 1200px;
	width: 100%;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box
}

body.document h2 {
	margin-top: 24px
}

body.document h3 {
	margin-top: 24px
}

body.document header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%
}

body.document ul {
	margin: 0
}

body.document li {
	display: list-item;
	color: var(--color-note)
}

body.document a {
	text-decoration: none
}

@media only screen and (min-width: 800px) {
	.on-mobile {
		display: none !important
	}

	#messages>:hover {
		opacity: 1
	}
}

@media only screen and (max-width: 799px) {
	.no-mobile {
		display: none !important
	}

	footer {
		position: relative;
		flex-direction: column;
		align-items: center;
		gap: 16px
	}

	footer>div {
		justify-content: center !important;
		width: 100%
	}

	footer>div:nth-child(2) {
		flex-wrap: wrap;
		gap: 8px
	}

	#home h1 {
		font-size: 2em
	}

	#features>div {
		flex-direction: column !important;
		margin-bottom: 40px
	}

	#features>div>div {
		max-width: 100% !important
	}

	#features p {
		font-size: inherit
	}

	#features .media>* {
		width: 100%;
		height: auto
	}

	#session {
		flex-direction: column
	}

	#board {
		transition: none
	}

	#log {
		position: fixed;
		min-width: 100%;
		max-width: 100%;
		bottom: 0;
		min-height: 240px;
		max-height: 50vh;
		z-index: 6;
		transition: .15s;
		box-shadow: 0 0 24px 6px rgba(0, 0, 0, .6666666667);
		border-radius: 12px 12px 0 0;
		background-color: var(--color-background)
	}

	#log.hidden {
		box-shadow: 0 0 24px 0px rgba(0, 0, 0, 0);
		transform: translateY(100%)
	}

	#messages {
		padding: 0;
		border: 4px solid var(--color-background);
		border-radius: inherit;
		box-sizing: border-box;
		margin-bottom: auto
	}

	#chat>textarea {
		min-height: 38px;
		border: none;
		margin: 0;
		border-top: 1px solid var(--color-input-underline);
		padding: 4px 6px
	}

	#chat>div {
		flex-direction: row;
		padding-right: 2px
	}

	.panel.dialog {
		min-width: 50vw;
		max-width: 90vw
	}

	#initiativeBar {
		min-width: 0;
		max-width: calc(100vw - 84px);
		right: 16px;
		overflow-x: auto;
		padding: 8px 0 !important
	}

	.roster {
		flex-wrap: nowrap;
		justify-content: initial;
		padding-left: 10px
	}

	.char {
		min-width: 48px;
		pointer-events: none
	}

	.char .step-input {
		display: none
	}

	.char:last-of-type {
		padding-right: 10px
	}

	.tab {
		height: 36px !important
	}
}

@media only screen and (max-width: 799px)and (orientation: portrait) {
	#maps {
		transform: translateY(48px) !important
	}
}