/* Ensure all elements respect box-sizing */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background-color: #333;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
}

body {
	font-family: 'Ubuntu', sans-serif;
	color: #FFFFFF;
	background-color: #333;
	display: flex;
	flex-direction: column;
/*	align-items: center; */
	justify-content: flex-start;
	min-height: 100vh;
	width: 100%;
	margin: 0;
}

.container {
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
	padding: 20px;
	background-color: #333;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.container-text {
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
	padding: 20px;
	background-color: #333;
	display: flex;
	flex-direction: column;
	align-items: left;
	box-sizing: border-box;
}

a {
	color: inherit;
}





/* TITLE */

.title {
    font-size: 2.5rem;
    padding-bottom: 20px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
 /*   gap: 0.5em; /* Use gap for consistent spacing */
}

.title > * {
    display: inline-flex;
    align-items: baseline;
}

.select-wrapper {
    border-bottom: 3px dotted;
    font-size: inherit;
    padding: 0;
    line-height: 1;
}

.select-wrapper select {
    color: #FFFFFF;
    background-color: #333;
    border: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0;
    margin: 0;
	flex-grow: 0; /* Ensures it doesn't take up extra space */
	    width: auto; /* Ensures width is determined by content/options */
	    vertical-align: baseline;
	}

.select-wrapper select option {
	    font-size: 0.9rem !important; /* smaller dropdown menu text */
	}

select::-ms-expand {
    display: none;
}

optgroup { font-size: 1rem; }


/* CSS-only spacing solution */
.title > * + * { /* Select all siblings except the first */
    margin-left: 0.3em;
}

/* Remove extra spacing before punctuation */
.title > .select-wrapper + span,
.title > span + .select-wrapper,
.title > span + span{
    margin-left: 0.3em;
}
/* The only required adjustment: Use   in HTML */




/* CANVAS */

.canvas-container {
	width: 100%; /* Adjust width as needed */
}

#tooltip {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 5px;
	border-radius: 3px;
	display: none;
	font-size: 14px;
	white-space: nowrap;
	z-index: 10; /* Ensure it's above the canvas */
}








/* FIX: Ensure dynamic text spans size to content and display the dotted line */
#percentage-display,
#killer-display {
   border-bottom: none;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    min-width: 0; 
}








/* --- 1. Initial State (Hidden) for the .onisr-statement container --- */
.onisr-statement {
    /* Critical for slide-in animation: start at 0 height */
    max-height: 0; 
    overflow: hidden; 
    
    /* Set the transition for the smooth slide effect */
    transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out; 
    
    /* Other styling for the box */
    background-color: #222; /* Dark background */
    color: #bbb; /* Light text */
    padding: 0 15px; /* No vertical padding when hidden, but horizontal is okay */
    margin-top: 10px;
    border-radius: 4px;
    width: 100%;
    max-width: 900px; /* Adjust max-width as needed */
    text-align: center;
    box-sizing: border-box;
    font-size: 0.9rem;
}

/* Ensure links in the statement match the dark theme */
.onisr-statement a {
    color: #8c8c8c; /* Lighter link color */
    text-decoration: underline;
}

/* --- 2. Final State (Visible) when the 'show-credits' class is present --- */
.onisr-statement.show-credits {
    /* Value must be larger than the actual content height */
    max-height: 500px; 
    /* Apply full vertical padding when visible */
    padding: 15px; 
}

/* --- 3. Style the button --- */
#credits-toggle-btn {
    background-color: #555;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1rem;
    margin-top: 20px;
    /* Optional: add a small transition for hover effects */
    transition: background-color 0.3s; 
}

#credits-toggle-btn:hover {
    background-color: #666;
}