/* fixes */

button *, a * {
	pointer-events: none;
}

.btn.h-auto {
	min-height: var(--button-line-height);
}

.container {
	max-width: 960px;
}
.content {
	width: 100%;
}

.modal, .modal-dialog {
	display: none;
}
.modal.show, .modal.show .modal-dialog {
	display: flex;
}
.modal, .modal-content .close {
	transition: none;
}
.modal-content {
	border: 1px solid var(--dark-color);
	left: 0;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	position: static;
	right: 0;
}
.dark-mode .modal-content {
	border-color: var(--gray-color-very-dark);
}
.modal-content .close {
	left: 100%;
	margin-left: -5rem;
}

.progress-bar {
	transition-duration: 0.25s;
}

/* loader (from https://codepen.io/aurer/pen/jEGbA) */
.loader {
	background-color: #000;
	display: inline-block;
	height: 12.5vh;
	top: 50%;
	margin-top: -12.5vh;
	mask-image: url(/static/assets/ui/loader.svg);
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url(/static/assets/ui/loader.svg);
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	position: absolute;
	vertical-align: top;
	width: 12.5vw;
	left: 50%;
	margin-left: -6.25vw;
}
.dark-mode .loader {
	background-color: #fff;
}

/* tables */

table:not(.table-noprocess) tr {
	display: block;
	padding: var(--table-padding);
}
table:not(.table-noprocess) td {
	display: block;
	padding: 0;
}
table:not(.table-noprocess) thead {
	display: none;
}
table.table-noprocess td .btn {
	white-space: normal;
	line-height: var(--base-line-height);
}
.table-processed td label {
	font-weight: bold;
}

/* scrolling */

.h-scroll,
.v-scroll {
	overflow: hidden;
}
.h-scroll::after,
.h-scroll::before {
	bottom: 0;
	content: '';
	position: absolute;
	top: 0;
	visibility: hidden;
	width: 16px;
	z-index: 99;
}
.h-scroll {
	overflow-x: auto !important;
	white-space: nowrap;
}
.h-scroll:not(.at-right-edge)::after {
	background: linear-gradient(to left, var(--lm-base-body-bg-color), transparent);
	right: 0;
	visibility: visible;
}
.h-scroll:not(.at-left-edge)::before {
	background: linear-gradient(to right, var(--lm-base-body-bg-color), transparent);
	left: 0;
	visibility: visible;
}
.dark-mode .h-scroll:not(.at-right-edge)::after {
	background: linear-gradient(to left, var(--dm-base-body-bg-color), transparent);
}
.dark-mode .h-scroll:not(.at-left-edge)::before {
	background: linear-gradient(to right, var(--dm-base-body-bg-color), transparent);
}
.v-scroll {
	overflow-y: auto !important;
}

/* effects */

#effects-bar {
	min-height: var(--yk-effects-bar-height);
}

.yk-badge-effect {
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	height: var(--yk-button-and-border);
	line-height: var(--yk-button-and-border);
	overflow: visible;
	position: relative;
	vertical-align: top;
	width: var(--yk-button-and-border);
}

.yk-badge-effect .badge {
	font-size: .6em;
	bottom: -0.4em;
	display: inline-block;
	font-weight: bold;
	right: -0.4em;
	line-height: .5em;
	padding: .3em;
	position: absolute;
}

/* map */

#game-map canvas {
	image-rendering: pixelated;
	user-select: none;
}

/* skip nav */

#skip-nav {
	left: -100%;
}
#skip-nav:focus {
	left: 0;
}

/* log */

#game-tab-log li::before {
	content: '\00bb';
	position: absolute;
	left: -0.8em;
}
#game-tab-log li {
	position: relative;
	margin-left: 1em;
}

#game-tab-log small {
	display: inline-block;
}

#game-tab-log code {
	vertical-align: top;
	display: inline-block;
}

.log-jump {
	opacity: 0.6;
}

.at-bottom-edge + .log-jump {
	display: none;
}

/* misc */

#game-tab-map[data-dead="1"] {
	background-color: #000;
}

#game-tab-map[data-dead="1"] canvas {
	visibility: hidden !important;
}

.fa.online-status{
	color: #0f0;
	font-size: 50%;
	text-shadow: 0 0 5px #fff;
	vertical-align: middle;
}

#toaster {
	left: auto;
}
@media (max-height: 900px) {
	#toaster {
		left: calc(100% / 2 - 480px);
	}
}
@media (max-width: 960px) {
	#toaster {
		left: 0;
	}
}

/* utils */

.btn-wrap {
	min-height: var(--button-height);
	height: auto;
	line-height: 1.2;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	white-space: normal !important;
}

.list-unstyled {
	list-style-type: none;
}

.o-auto {
	overflow: auto;
}
.ox-auto {
	overflow-x: auto;
}
.oy-auto {
	overflow-y: auto;
}
.o-hidden {
	overflow: hidden;
}
.ox-hidden {
	overflow-x: hidden;
}
.oy-hidden {
	overflow-y: hidden;
}
.o-scroll {
	overflow: scroll;
}
.ox-scroll {
	overflow-x: scroll;
}
.oy-scroll {
	overflow-y: auto;
}
.o-visible {
	overflow: visible;
}
.ox-visible {
	overflow-x: visible;
}
.oy-visible {
	overflow-y: visible;
}

/* short */

@media screen and (max-height: 900px) and (min-width: 577px) {
	.tabs-nav a[href="#game-tab-map"],
	.tabs-nav a[href="#game-tab-log"] {
		display: block !important;
	}
}

/* desktop */

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

	/* fixes */

	.tabs-nav .fa {
		width: 1.75rem;
		text-align: center;
	}

	table:not(.table-noprocess) td {
		display: table-cell;
		padding: var(--table-padding);
		width: auto;
	}
	table:not(.table-noprocess) tr {
		display: table-row;
	}
	table:not(.table-noprocess) thead {
		display: table-header-group;
		padding: unset;
	}
	table.noprocess td .btn {
		line-height: var(--button-line-height);
		white-space: nowrap;
	}

	/* modals */

	.modal.show, .modal.show .modal-dialog {
		display: block;
	}
	.modal-content {
		max-height: min(calc(100vh - 12.5em), 900px);
		top: 12.5em;
		position: absolute;
	}

	/* scrolling */

	.h-scroll,
	.v-scroll {
		overflow: auto;
		white-space: normal;
	}
	.h-scroll::after,
	.h-scroll::before {
		display: none !important;
	}
}