/* The overhead games on the main page: the overlay with a game's controls,
   its banner, and each game's HUD. Crypt and rift share a dark serif look;
   grove has its own, under body[data-game="grove"]. */
#overhead-hud,
#overhead-title,
#overhead-banner {
	color: #e9dcc0;
	font: 16px Georgia, "Times New Roman", serif;
	user-select: none;
}
body.overhead #game.hovering {
	cursor: crosshair;
}
#bars {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#overhead-banner {
	position: fixed;
	top: 36%;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 60px;
	font-variant: small-caps;
	letter-spacing: 0.06em;
	color: #d8b878;
	text-shadow: 0 4px 8px #000;
	pointer-events: none;
}
#overhead-title {
	position: fixed;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	background: #07050ae0;
	text-align: center;
}
#overhead-intro {
	display: grid;
	justify-items: center;
}
#overhead-title h1 {
	margin: 0;
	font: normal 76px Georgia, "Times New Roman", serif;
	font-variant: small-caps;
	letter-spacing: 0.08em;
	color: #d8b878;
}
#overhead-title dl {
	display: grid;
	grid-template-columns: auto auto;
	gap: 4px 18px;
	margin: 12px 0 20px;
	text-align: left;
}
#overhead-title dt {
	opacity: 0.65;
}
#overhead-title dd {
	margin: 0;
}
.overhead-buttons {
	display: flex;
	gap: 10px;
}
.overhead-buttons button {
	padding: 10px 40px;
	border: 1px solid #b08a4a;
	background: #2a1c10;
	color: inherit;
	font: 24px Georgia, serif;
	font-variant: small-caps;
	letter-spacing: 0.08em;
}
#overhead-leave {
	padding: 10px 24px;
	background: transparent;
}
#overhead-error {
	color: #ffb4a8;
	max-width: 40em;
}
#overhead-hint {
	opacity: 0.5;
	font-size: 13px;
}
#target {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	justify-items: center;
	gap: 4px;
	pointer-events: none;
}
#target-name {
	font-variant: small-caps;
	font-size: 22px;
	letter-spacing: 0.06em;
	text-shadow: 0 2px 2px #000;
}
#target-bar {
	--health: 1;
	width: 260px;
	height: 12px;
	border: 1px solid #6b5a3e;
	background: linear-gradient(90deg, #a3161a calc(var(--health) * 100%), #1a0a0a 0);
}

/* Ashen Crypt */
#slain {
	position: fixed;
	top: 22px;
	right: 26px;
	font-variant: small-caps;
	font-size: 20px;
	letter-spacing: 0.05em;
	text-shadow: 0 2px 2px #000;
	pointer-events: none;
}
#weapon {
	position: fixed;
	left: 160px;
	bottom: 30px;
	font-variant: small-caps;
	font-size: 20px;
	letter-spacing: 0.05em;
	text-shadow: 0 2px 2px #000;
	pointer-events: none;
}
#orb {
	--life: 1;
	position: fixed;
	left: 26px;
	bottom: 22px;
	display: grid;
	place-items: center;
	width: 118px;
	height: 118px;
	border: 3px solid #6b5a3e;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, #fff3 0 12%, transparent 30%),
		linear-gradient(0deg, #b0141a calc(var(--life) * 100%), #1a0808 0);
	box-shadow: 0 0 0 3px #1a140c, 0 6px 18px #000c;
	pointer-events: none;
}
#orb #life {
	font-size: 15px;
	text-shadow: 0 1px 2px #000;
}

/* Ember Rift */
body[data-game="rift"] :is(#overhead-hud, #overhead-title, #overhead-banner) {
	color: #e8dfc8;
	font-size: 15px;
}
body[data-game="rift"] #overhead-title {
	background: #07090ce0;
}
body[data-game="rift"] #overhead-banner {
	top: 34%;
	font-size: 64px;
}
body[data-game="rift"] #target {
	top: 88px;
}
body[data-game="rift"] #target-name {
	font-size: 18px;
	letter-spacing: normal;
}
body[data-game="rift"] #target-bar {
	width: 220px;
	height: 10px;
	background: linear-gradient(90deg, #c0392b calc(var(--health) * 100%), #1a0a0a 0);
}
.blue {
	color: #6aa8ff;
}
.red {
	color: #ff6b5e;
}
#scoreboard {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: 3em auto 3em;
	gap: 2px 16px;
	justify-items: center;
	padding: 6px 22px 8px;
	background: #0d1016e0;
	border: 1px solid #6b5a3e;
	border-top: 0;
	font-size: 22px;
	pointer-events: none;
}
#clock {
	font: 16px ui-monospace, monospace;
	align-self: center;
}
#towers {
	grid-column: 1 / -1;
	font-size: 12px;
	opacity: 0.75;
}
#feed {
	position: fixed;
	top: 24px;
	right: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
	justify-items: end;
	pointer-events: none;
}
#feed li {
	padding: 3px 10px;
	background: #0d1016d0;
	border-left: 3px solid #6b5a3e;
}
#panel {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 14px;
	align-items: stretch;
	padding: 10px 14px;
	background: #0d1016ee;
	border: 1px solid #6b5a3e;
	border-bottom: 0;
}
#portrait {
	position: relative;
	width: 72px;
	height: 72px;
	border: 2px solid #b08a4a;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #4a6fa8, #1b2a44);
}
#level {
	position: absolute;
	right: -6px;
	bottom: -6px;
	min-width: 22px;
	padding: 1px 4px;
	text-align: center;
	background: #0d1016;
	border: 1px solid #b08a4a;
	border-radius: 11px;
	font-size: 14px;
}
#vitals {
	display: grid;
	gap: 5px;
	width: 300px;
}
#abilities {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.ability {
	--cooldown: 0;
	position: relative;
	height: 50px;
	border: 1px solid #b08a4a;
	background:
		linear-gradient(0deg, #000a calc(var(--cooldown) * 100%), transparent 0),
		linear-gradient(135deg, #3b2a17, #1d2433);
	display: grid;
	place-items: center;
	font-size: 11px;
	text-align: center;
	line-height: 1.1;
}
.ability b {
	position: absolute;
	top: 1px;
	left: 4px;
	font-size: 12px;
	color: #d8b878;
}
.ability i {
	position: absolute;
	font: bold 20px ui-monospace, monospace;
	font-style: normal;
	text-shadow: 0 1px 3px #000;
}
.ability.locked {
	opacity: 0.35;
}
#vitals #life {
	--life: 1;
	position: relative;
	height: 16px;
	border: 1px solid #3d4a33;
	background: linear-gradient(90deg, #3fae4a calc(var(--life) * 100%), #13200f 0);
	display: grid;
	place-items: center;
	font-size: 12px;
	text-shadow: 0 1px 2px #000;
}
#xp {
	--xp: 0;
	height: 5px;
	background: linear-gradient(90deg, #9b6bd6 calc(var(--xp) * 100%), #1e1629 0);
}
#purse {
	display: grid;
	gap: 6px;
	align-content: start;
	min-width: 210px;
}
#gold {
	color: #f2c14e;
}
#kda {
	opacity: 0.8;
	font-size: 13px;
}
#shop {
	display: grid;
	gap: 3px;
}
#shop button {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 8px;
	border: 1px solid #6b5a3e;
	background: #22190f;
	color: inherit;
	font: 12px Georgia, serif;
	cursor: pointer;
}
#shop button:disabled {
	opacity: 0.4;
	cursor: default;
}
#minimap {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 240px;
	height: 240px;
	border: 2px solid #6b5a3e;
	background: #0d1016;
}

/* Mabe Grove */
body[data-game="grove"] :is(#overhead-hud, #overhead-title, #overhead-banner) {
	color: #fff;
	font: 600 16px "Barlow", system-ui, sans-serif;
}
body[data-game="grove"] #overhead-title {
	background: #1a2614d0;
}
body[data-game="grove"] #overhead-title h1 {
	font: 800 72px "Barlow Condensed", sans-serif;
	font-variant: normal;
	letter-spacing: 0.02em;
	color: inherit;
}
body[data-game="grove"] #overhead-title dt {
	opacity: 0.7;
}
body[data-game="grove"] .overhead-buttons button {
	border: 0;
	border-radius: 999px;
	background: #f4d35e;
	color: #2a1f05;
	font: 800 24px "Barlow Condensed", sans-serif;
	letter-spacing: normal;
}
body[data-game="grove"] #overhead-leave {
	background: #111c;
	color: #fff;
}
body[data-game="grove"] #overhead-banner {
	top: 38%;
	font: 800 64px "Barlow Condensed", sans-serif;
	letter-spacing: normal;
	color: inherit;
	text-shadow: 0 4px 0 #0008;
}
#hearts {
	position: fixed;
	top: 18px;
	left: 22px;
	display: flex;
	gap: 6px;
	font-size: 30px;
	line-height: 1;
	filter: drop-shadow(0 2px 0 #0006);
}
.heart {
	color: #e8262c;
}
.heart.half {
	background: linear-gradient(90deg, #e8262c 50%, #3a1a1a 50%);
	background-clip: text;
	color: transparent;
}
.heart.empty {
	color: #3a1a1a;
}
#foes {
	position: fixed;
	top: 22px;
	right: 24px;
	font: 800 22px "Barlow Condensed", sans-serif;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 0 #0008;
}
#actions {
	position: fixed;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 14px;
}
.action {
	padding: 6px 18px 6px 8px;
	border-radius: 999px;
	background: #111c;
	font-size: 22px;
	font-style: italic;
}
.action kbd {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-right: 8px;
	border-radius: 50%;
	background: #fff;
	color: #111;
	font: 800 16px "Barlow Condensed", sans-serif;
	font-style: normal;
}