/* For accessibility -- they might have their own styles applied in browser? */
/* Functionality only; remove any actual styling from the page! */



body {
	overscroll-behavior: none;
}




 .body-container{
	 margin:20px;
 }









#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.lil-gui {
	z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
	.lil-gui.root {
		right: auto;
		top: auto;
		max-height: 50%;
		max-width: 80%;
		bottom: 0;
		left: 0;
	}
}

#overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

	#overlay button {
		background: transparent;
		border: 0;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}



.flex-container, .user-page-clip-container {
    display: flex; /* Use Flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 10px; /* Space between items */
}

.flex-item, .user-page-clip-cell {
    flex: 1; /* Flex items will grow and shrink as needed */
    min-width: 360px; /* Minimum width of a cell before wrapping */
    max-width: 360px; /* Maximum width of a cell before wrapping */
    padding: 10px; /* Padding inside each cell */
}

.first-discord-discuss-cell {
    text-align:center;
    width:200px;
	cursor: pointer;
}


.achievement-icon {
	max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
}

.score-sig-img {
	max-height:40px;
	max-width:400px;
	width:auto;
	height:auto;
	display:block;
	float:right;
}

.score-sig {
	line-height:15px;
}

.username-cell {
	display: inline;
	text-align:right;
	line-height:15px;
}


.sig-cell {
	display: inline;
	padding: 0;
	line-height:15px;
}

/* convenient email obfuscation */
.email b {
	display: none;
}



#bg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
	z-index:-1000;
}


img {
	image-rendering: pixelated;  /* disable antialiasing on images across the board */
}



/* Badge board, these should get overridden on scorechart to be smaller */
.score-badges-container {
	width: 160px;
	height: 160px;
	flex: 0 0 160px;
	line-height:52px;
	display: grid;
	grid-template-columns: 52px 52px 52px;
	grid-gap: 0px;
	align-items: start; /* Stack grid items at the top of their cell */
	justify-items: start;
	border:8px solid #ffffff22;
	align-content: start;
	grid-auto-rows: 52px;
}


.score-badge, .score-badge-link {
	width:52px;
	height:52px;
	line-height:52px;
	display:inline;
	padding:0;
	margin:0;
	cursor:pointer;
}

.score-badge-container {
	width:52px;
	height:52px;
	display:inline-block;
	position: relative;
	padding:0;
	margin:0;
}



.badge-overlay-text{
	position:absolute;
	left:0;
	top:0;
	color:white;
	font-size:1.6em;
	pointer-events:none;
	white-space:pre;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.highlighted-badge{
    position: absolute;
    left: -8px;
    top: -8px;
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 215, 0, 0.7);
    border-radius: 6px;
    pointer-events: none;
    box-sizing: content-box;
    z-index: 3;
}



.badge-tooltip {
	position: fixed;
	border:2px solid black;
	background: white;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	z-index: 1000;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.badge-tooltip.show {
	opacity: 1;
}

/* hide tooltips on mobile */
@media (hover: none) and (pointer: coarse) {
	.badge-tooltip {
		display:none;
	}
}

.remove-badge-btn {
	visibility: hidden;
}

.score-badge-container:hover .remove-badge-btn {
	visibility: visible;
}

/* On mobile devices, always show the remove button */
@media (hover: none) and (pointer: coarse) {
	.remove-badge-btn {
		visibility: visible;
	}
}


.remove-badge-btn {
    position:absolute;
	width:26px;
	height:26px;
	top:0;
	left:26px;
    cursor: pointer;
	z-index:100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    overflow: hidden;
    text-align: center;
}

.btn {
	cursor:pointer;
}

.bgbox1 {
	border-radius: 16px; background: white; padding: 2.5rem 2.5rem 2rem 2.5rem;
}