/*
@font-face {
	font-family: "GNU Unifont";
	src: url("../assets/fonts/unifont-17.0.04.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
	unicode-range: U+0000-FFFF;
}

@font-face {
	font-family: "GNU Unifont";
	src: url("../assets/fonts/unifont_upper-17.0.04.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
	unicode-range: U+10000-10FFFF;
}

@font-face {
	font-family: "Cascadia Mono";
	src: url("../assets/fonts/CascadiaMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}
*/
@font-face {
	font-family: "GNU Unifont";
	src: url("../assets/fonts/UnifontExMono.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "Cascadia Mono";
	src: url("../assets/fonts/CascadiaMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

:root {
	--bg: #090205;
	--panel: #19060c;
	--panel2: #260912;
	--edge: #6b1020;
	--ink: #f4d6d8;
	--muted: #b8868c;
	--player: #ff2f41;
	--player2: #b20e20;
	--human: #f8f8f8;
	--gold: #ffd761;
	--good: #7cff9e;
	--warn: #ffd166;
	--bad: #ff6868;
	--cell: 16px;
	--ui-font-stack: "Cascadia Mono", "GNU Unifont", "Consolas", "Menlo", "DejaVu Sans Mono", monospace;
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%;
	margin: 0;
	background: radial-gradient(circle at 50% 20%, #220812 0, #090205 55%, #030102 100%);
	color: var(--ink);
	font-family: var(--ui-font-stack);
	overflow: hidden
}

button,
select {
	font: inherit
}

#app {
	height: 100vh;
	height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0
}

#topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	padding: .38rem .55rem;
	border-bottom: 1px solid var(--edge);
	background: linear-gradient(180deg, #2a0712, #120309);
	box-shadow: 0 2px 20px #000a;
	user-select: none
}

.stat {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .18rem .42rem;
	border: 1px solid #4b0d18;
	border-radius: .35rem;
	background: #090205bb;
	color: #ffdfe2;
	white-space: nowrap;
	font-size: .86rem
}

.stat b {
	color: #fff
}

#main {
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
	gap: .45rem;
	padding: .45rem
}

#viewportWrap {
	min-width: 0;
	min-height: 0;
	display: grid;
	place-items: center;
	position: relative;
	border: 1px solid var(--edge);
	border-radius: .45rem;
	background: #030102;
	box-shadow: inset 0 0 40px #000, 0 0 30px #0009;
	overflow: hidden
}

#board {
	position: relative;
	overflow: hidden;
	background: #030102;
	border: 1px solid #3c0a13;
	border-radius: .25rem;
	box-shadow: 0 0 0 2px #0008, inset 0 0 24px #000;
	touch-action: none;
	user-select: none;
	cursor: crosshair
}

#tiles {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	pointer-events: none
}

.cell {
	width: var(--cell);
	height: var(--cell);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	text-shadow: 0 0 4px #000;
	line-height: 1
}

.fog {
	color: #070305;
	background: #030102;
	text-shadow: none
}

.fogKnown {
	filter: brightness(.55);
	opacity: .76
}

.earth {
	color: #8f5331;
	background: #160905
}

.rock {
	color: #6b6768;
	background: #0b090a
}

.gold {
	color: var(--gold);
	background: #1d1604;
	text-shadow: 0 0 8px #a36600
}

.diamond {
	color: #95f5ff;
	background: #07191c;
	text-shadow: 0 0 8px #5ff
}

.water {
	color: #56a9ff;
	background: #04111f;
	text-shadow: 0 0 8px #1b73ff
}

.lava {
	color: #ff9d3d;
	background: #240705;
	text-shadow: 0 0 9px #f40
}

.claimed {
	color: var(--player);
	background: #160307;
	text-shadow: 0 0 7px var(--player)
}

.humanfloor {
	color: #ddd;
	background: #0b0b0c
}

.portal {
	color: #ff8bd0;
	background: #1b0616;
	text-shadow: 0 0 9px #f0a
}

.heart {
	color: #ff2f41;
	background: #1f0308;
	text-shadow: 0 0 12px #ff3148
}

.fort {
	color: #ff7180;
	background: #1d0509;
	text-shadow: 0 0 8px #f33
}

.tagged {
	background: #201a04;
	color: #ffe066;
	text-shadow: 0 0 8px #ffe066
}

.wantFort {
	background: #221014;
	color: #ff9fab
}

.room {
	background: #130309
}

.room.treasury {
	color: #ffd45c;
	background: #241701
}

.room.lair {
	color: #d69b76;
	background: #1a0d07
}

.room.hatchery {
	color: #f0cb80;
	background: #221203
}

.room.library {
	color: #cba6ff;
	background: #160924
}

.room.training {
	color: #ff9a58;
	background: #240b03
}

.room.bridge {
	color: #e0c27a;
	background: #181005
}

.room.guard {
	color: #ff8791;
	background: #21070d
}

.room.workshop {
	color: #d0d0d0;
	background: #151515
}

.room.barracks {
	color: #ffb07b;
	background: #201009
}

.room.prison {
	color: #b7c1cf;
	background: #0d1014
}

.room.torture {
	color: #ff5a70;
	background: #26040b
}

.room.temple {
	color: #c3ff9c;
	background: #0b1c0c
}

.room.graveyard {
	color: #c7c7c7;
	background: #111114
}

.trap {
	color: #ff4646;
	background: #190508;
	text-shadow: 0 0 9px #f33
}

.door {
	color: #ffb1b7;
	background: #22070c;
	text-shadow: 0 0 7px #f55
}

.door.locked {
	color: #ffd166;
	background: #271406;
	text-shadow: 0 0 8px #ffd166
}

#sprites,
#effects {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-size: var(--cell);
	line-height: 1;
	font-variant-ligatures: none
}

.sprite,
.fx {
	position: absolute;
	width: var(--cell);
	height: var(--cell);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	will-change: left, top, transform;
	text-shadow: 0 0 4px #000, 0 0 8px currentColor;
	transform: translate(-50%, -50%)
}

.sprite.player {
	color: var(--player)
}

.sprite.human {
	color: var(--human)
}

.sprite.prisoner {
	color: #b7c1cf
}

.sprite.corpse {
	color: #c7c7c7
}

.sprite.imp {
	color: #ff8a40
}

.sprite.hurt {
	filter: brightness(1.45)
}

.sprite.selected {
	text-shadow: 0 0 5px #fff, 0 0 12px #ffd166, 0 0 18px currentColor;
	outline: 1px solid #ffd166
}

.hpBar {
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -2px;
	height: 1px;
	background: #1d0507;
	box-shadow: 0 0 2px #000
}

.hpBar>i {
	display: block;
	height: 1px;
	background: #ff3148;
	box-shadow: 0 0 3px #ff3148
}

.sprite.held {
	opacity: .2
}

.sprite.chicken {
	color: #fff7b0
}

.sprite.possessed {
	animation: possessedGlow 1.1s ease-in-out infinite;
	color: var(--player)
}

.fx {
	color: #fff;
	text-shadow: 0 0 5px #fff, 0 0 11px currentColor;
	animation: pulse .35s alternate infinite
}

.fx.float {
	width: auto;
	min-width: var(--cell);
	white-space: nowrap;
	font-size: calc(var(--cell) * .72);
	font-weight: 700
}

.fx.circle {
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: #ff4050;
	text-shadow: none;
	animation: none
}

.fx.red {
	color: #ff4050
}

.fx.gold {
	color: #ffd166
}

.fx.green {
	color: #7cff9e
}

.fx.purple {
	color: #be8cff
}

.fx.blue {
	color: #7dd3ff
}

.fx.white {
	color: #fff
}

.fx.pink {
	color: #ff79d9
}

#deathOverlay {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(3, 1, 2, .82)
}

#deathOverlay[hidden] {
	display: none
}

.deathPanel {
	width: min(720px, 94vw);
	max-height: 92vh;
	overflow: auto;
	border: 1px solid #7b1e2b;
	background: #100407;
	box-shadow: 0 0 24px rgba(255, 49, 72, .35);
	padding: 1rem
}

.deathPanel h1 {
	margin: 0 0 .75rem;
	font-size: 1.35rem;
	color: #ff4050;
	letter-spacing: 0
}

.deathStats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .4rem;
	margin: .75rem 0
}

.deathStats .row {
	background: #1a070b;
	border: 1px solid #321018;
	padding: .38rem .45rem
}

.deathActions {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-top: .75rem
}

@keyframes pulse {
	from {
		opacity: .55;
		transform: translate(-50%, -50%) scale(.92)
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.15)
	}
}

@keyframes possessedGlow {

	0%,
	100% {
		color: var(--player);
		text-shadow: 0 0 4px #000, 0 0 9px var(--player)
	}

	50% {
		color: #ff79d9;
		text-shadow: 0 0 4px #000, 0 0 14px #ff79d9
	}
}

#cursorInfo {
	position: absolute;
	left: .4rem;
	bottom: .35rem;
	padding: .18rem .35rem;
	border: 1px solid #4b0d18;
	border-radius: .3rem;
	background: #090205d8;
	color: #ffdfe2;
	font-size: .78rem;
	pointer-events: none;
	max-width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

#panel {
	min-width: 0;
	min-height: 0;
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	gap: .45rem;
	border: 1px solid var(--edge);
	border-radius: .45rem;
	background: linear-gradient(180deg, var(--panel), #090205);
	box-shadow: inset 0 0 30px #000, 0 0 24px #0009;
	padding: .5rem;
	overflow: hidden
}

#minimapWrap {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: .45rem;
	align-items: stretch;
	min-height: 94px
}

#minimap {
	width: 112px;
	height: 94px;
	border: 1px solid #54101c;
	background: #030102;
	image-rendering: pixelated;
	touch-action: none;
	border-radius: .25rem
}

#mentor {
	border: 1px solid #4b0d18;
	border-radius: .3rem;
	background: #090205bf;
	padding: .35rem;
	overflow: auto;
	min-height: 94px;
	font-size: .78rem;
	color: #ffdfe2
}

#mentor div {
	margin-bottom: .18rem
}

.msgGood {
	color: var(--good)
}

.msgWarn {
	color: var(--warn)
}

.msgBad {
	color: var(--bad)
}

#tabs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .25rem
}

#tabs button,
#panelContent button,
#controlButtons button {
	border: 1px solid #5e1220;
	background: #210712;
	color: #ffdfe2;
	border-radius: .35rem;
	padding: .38rem .34rem;
	min-height: 2.2rem;
	cursor: pointer;
	text-align: left
}

#tabs button {
	text-align: center;
	font-size: .78rem;
	min-height: 2rem;
	padding: .25rem .15rem
}

button:hover {
	filter: brightness(1.18)
}

button.active {
	border-color: #ff4050;
	box-shadow: 0 0 0 1px #ff405088 inset;
	background: #3a0a16;
	color: #fff
}

#panelContent button.release {
	border-color: #ff9d3d;
	background: #3b1705;
	color: #ffe3be;
	box-shadow: 0 0 0 1px #ff9d3d66 inset, 0 0 10px #ff9d3d33
}

button.locked,
button:disabled {
	opacity: .45;
	filter: grayscale(.55);
	cursor: not-allowed
}

#panelContent {
	overflow: auto;
	padding-right: .2rem;
	display: block;
	min-height: 0
}

.gridBtns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .3rem
}

.gridBtns.wide {
	grid-template-columns: 1fr
}

.small {
	font-size: .75rem;
	color: var(--muted)
}

.kbd {
	color: #ffd166
}

.cost {
	color: var(--gold)
}

.ok {
	color: var(--good)
}

.bad {
	color: var(--bad)
}

#controlButtons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .3rem
}

#controlButtons button {
	text-align: center;
	min-height: 2rem;
	padding: .25rem
}

.bar {
	height: .45rem;
	border: 1px solid #4b0d18;
	background: #090205;
	border-radius: .3rem;
	overflow: hidden;
	margin: .25rem 0 .45rem
}

.fill {
	height: 100%;
	background: linear-gradient(90deg, #ff3148, #ffd166);
	width: 0%
}

.twoCols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .35rem
}

.row {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	border-bottom: 1px solid #3a0a13;
	padding: .12rem 0
}

@media (max-width:850px) {
	#main {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) minmax(230px, 42vh);
		padding: .25rem;
		gap: .25rem
	}

	#panel {
		padding: .35rem;
		grid-template-rows: auto auto minmax(0, 1fr) auto
	}

	#minimapWrap {
		grid-template-columns: 86px 1fr;
		min-height: 78px
	}

	#minimap {
		width: 86px;
		height: 78px
	}

	#tabs button {
		font-size: .68rem
	}

	.stat {
		font-size: .74rem;
		padding: .14rem .28rem
	}

	#topbar {
		gap: .22rem;
		padding: .25rem
	}
}