/* CSS Extracted From boltobserv */
:root {
	--config-tombstone-opacity: .4;
	--config-bomb-dot-scale: .7;
}

#map-container {
    position: relative;
    background-color: #000;
    border: 2px solid #444;
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    container-type: inline-size;
}

#map-layer {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 1;
	transition: opacity .4s;
    background-size: cover;
}

#entities {
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 2;
}

div.dot {
	position: absolute;
	height: 2.6cqw; /* scaled down for our fixed 800x800 */
	width: 2.6cqw;
	left: 0;
	bottom: 0;
	display: block;
	background: #f00;
	transform-origin: 50% 50%;
	border-radius: 100% .2cqw 100% 100%;
	box-shadow: 0 0 .8cqw .4cqw rgba(0, 0, 0, .2);
	opacity: 1;
	z-index: 15;

	will-change: bottom, left, transform;
	outline: .1cqw solid transparent;
}

div.dot::before, div.dot::after {
	content: '';
	position: absolute;
	z-index: 14;
	opacity: 0;
	transition: opacity .02s;
}

div.dot::before {
	height: 2cqw;
	width: 2cqw;
	background: radial-gradient(circle at right top, #0000 0 45%, #BE2C2C 0 70%, #0000 0);
	left: -0.7cqw;
	bottom: -0.7cqw;
}

div.dot::after {
	height: 5cqw;
	width: 5cqw;
	background: linear-gradient(180deg, #888 1cqw, #0000 0), linear-gradient(270deg, #888 1cqw, #0000 0), linear-gradient(180deg, #bbb 2cqw, #0000 0), linear-gradient(270deg, #bbb 2cqw, #0000 0), linear-gradient(180deg, #fff 3cqw, #0000 0), linear-gradient(270deg, #fff 3cqw, #0000 0);
	left: 1cqw;
	bottom: 1cqw;
}

div.dot.CT {
	background: #5ab8f4;
}

div.dot.T {
	background: #f0c941;
}

div.dot.bomb {
	border-radius: 2cqw .4cqw 2cqw 2.4cqw;
	background: #FF8200;
}

div.dot.active {
	z-index: 7000 !important;
	box-shadow: 0 0 0 .2cqw rgba(0, 0, 0, .9), 0 0 0 .4cqw rgba(255, 255, 255, .9), 0 0 1cqw .5cqw rgba(255, 255, 255, .2);
}

div.dot.dead {
	color: transparent;
	text-shadow: none;
	border-radius: 0;
	clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	opacity: var(--config-tombstone-opacity);
	z-index: 13 !important;
	filter: none;
    background: #444; /* Tombstone color based on original or transparent? Original hides color via transparent but path clips bg. We'll use a tombstone color just in case */
}
div.dot.dead.CT { background: #377096; }
div.dot.dead.T { background: #85702b; }

div.dot > div.inner-id {
    position: absolute;
    bottom: -0.15cqw;
    left: -0.15cqw;
    width: 2.6cqw;
    height: 2.6cqw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5cqw;
    font-family: sans-serif;
    font-weight: 800;
    transform: rotate(45deg);
}

div.dot.dead > div.inner-id {
	display: none;
}








.bomb-objective {
    position: absolute;
    width: 3.5cqw;
    height: 3.5cqw;
    z-index: 100;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0;
}
.bomb-objective.dropped {
    background-image: url('/img/bomb-dropped.webp');
}
.bomb-objective.planted {
    background-image: url('/img/bomb-planted.webp');
    animation: bomb-blink 1s infinite alternate;
}
.bomb-objective.defusing {
    background-image: url('/img/adv-defuse.webp');
    animation: bomb-blink 0.5s infinite alternate;
}
.bomb-objective.defused {
    background-image: url('/img/bomb-defused.webp');
}
.bomb-objective.exploded {
    background-image: url('/img/bomb-planted.webp');
    filter: brightness(0.2) grayscale(100%);
}
.bomb-timer {
    position: absolute;
    top: -3cqw;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: .2cqw .5cqw;
    border-radius: .3cqw;
    font-size: 1.5cqw;
    font-weight: bold;
    white-space: nowrap;
}
@keyframes bomb-blink {
    from { opacity: 1; filter: drop-shadow(0 0 4px red); }
    to { opacity: 0.7; filter: drop-shadow(0 0 0px transparent); }
}