body {
	background-color: #1a2c38;
	color: #b8bfc3;
	font-family: 'proxima-nova', sans-serif;
	margin-top: 2%;
	margin-bottom: 2%;
}

a {
	color: aqua;
}

button {
	border: 0;
	color: #013e01;
	background-color: #17d117;
	font-weight: 600;
	font-size: 20px;
	border-radius: 6px;
	padding: 5px;
	cursor: pointer;
}

button:hover {
	background-color: #1bd61b;
}

button:active {
	background-color: #18aa18;
}

/* Odds Preset Buttons */
.odds-preset-buttons {
	position: fixed;
	top: 10px;
	display: flex;
	gap: 8px;
	z-index: 1000;
}

.odds-preset-buttons.left-corner {
	left: 10px;
}

.odds-preset-buttons.right-corner {
	right: 10px;
}

.odds-preset-buttons button {
	background-color: #3498db;
	color: white;
	padding: 8px 14px;
	font-size: 16px;
	min-width: 50px;
	border-radius: 5px;
}

.odds-preset-buttons button:hover {
	background-color: #2980b9;
}

.odds-preset-buttons button:active {
	background-color: #21618c;
}

/* Individual button colors */
.odds-btn-cyan {
	background-color: #2d5a5f !important; /* Dark Teal */
	color: #b8e6e8 !important;
	font-weight: 700 !important;
	box-shadow: 0 0 6px rgba(45, 90, 95, 0.3);
}

.odds-btn-cyan:hover {
	background-color: #3a7075 !important;
	box-shadow: 0 0 10px rgba(45, 90, 95, 0.5);
}

.odds-btn-cyan:active {
	background-color: #24484c !important;
}

.odds-btn-blue {
	background-color: #34495e !important; /* Dark Slate Blue */
	color: #a8b9d1 !important;
	font-weight: 700 !important;
	box-shadow: 0 0 6px rgba(52, 73, 94, 0.4);
}

.odds-btn-blue:hover {
	background-color: #4a5f7a !important;
	box-shadow: 0 0 10px rgba(52, 73, 94, 0.6);
}

.odds-btn-blue:active {
	background-color: #2c3e50 !important;
}

.odds-btn-orange {
	background-color: #ff8c00 !important;
	color: #2c3e50 !important;
}

.odds-btn-orange:hover {
	background-color: #e67e00 !important;
}

.odds-btn-orange:active {
	background-color: #cc7000 !important;
}

.odds-btn-green {
	background-color: #00ff41 !important;
	color: #2c3e50 !important;
}

.odds-btn-green:hover {
	background-color: #00e63a !important;
}

.odds-btn-green:active {
	background-color: #00cc33 !important;
}

.odds-btn-red {
	background-color: #ff0040 !important;
	color: white !important;
}

.odds-btn-red:hover {
	background-color: #e6003a !important;
}

.odds-btn-red:active {
	background-color: #cc0033 !important;
}

.odds-btn-purple {
	background-color: #bf00ff !important;
	color: white !important;
}

.odds-btn-purple:hover {
	background-color: #a800e6 !important;
}

.odds-btn-purple:active {
	background-color: #9100cc !important;
}

/* .up-right {
	display: flex;
	flex-direction: column;
	gap: 5px;
	position: fixed;
	top: 10px;
	right: 10px;
} */

.up-right img {
	width: 32px;
	height: 32px;
}

/* .bottom-left {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 2vw;
	background-color: #0a151c;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 1%;
	margin-bottom: 1%;
	margin-left: 1%;
	border-radius: 10%;
} */

.hide {
	display: none;
}

.middle {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* .top-logo {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: 10px;
	text-decoration: none;
} */

/* .top-logo img {
	width: 168px;
} */

/* .top-logo div {
	text-align: center;
	font-weight: 600;
	color: #e6e7e8;
} */

input {
	height: 30px;
	font-size: 18px;
	background-color: #0a151c;
	border: 0;
	color: #e6e7e8;
	text-align: center;
	outline: 0;
	border-radius: 3px;
}

#seed_input {
	width: 635px;
	font-size: 16px;
}

.hash-status {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 5px;
	text-align: center;
}

.hash-status.connecting {
	background-color: #f39c12;
	color: #2c3e50;
}

.hash-status.connected {
	background-color: #27ae60;
	color: #2c3e50;
}

.hash-status.error {
	background-color: #e74c3c;
	color: #ffffff;
}

.amount-controls {
	margin: 15px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.amount-controls label {
	font-weight: 600;
	color: #e6e7e8;
}

.amount-controls input {
	width: 80px;
}

.amount-controls button {
	padding: 8px 16px;
}

.amount-preset-buttons {
	display: flex;
	gap: 4px;
}

.amount-btn {
	background-color: #3498db !important;
	color: white !important;
	padding: 4px 10px !important;
	font-size: 14px !important;
	min-width: 40px;
	border-radius: 4px;
	font-weight: 600;
}

.amount-btn:hover {
	background-color: #2980b9 !important;
}

.amount-btn:active {
	background-color: #21618c !important;
}

.odds-controls {
	margin: 15px 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.odds-section {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.odds-section label {
	font-weight: 600;
	color: #e6e7e8;
}

#odds_inputs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.odds-distance-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    max-width: 706px;
}

/* Betting calculator */
.bet-calculator {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px;
	align-items: center;
	justify-items: center;
	max-width: 706px;
}

.bet-calculator input {
	width: 160px;
}

.odds-distance-item {
    background-color: #2f4553;
    color: #d5dceb;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

/* Distinguish the first row (top thresholds) visually */
.odds-distance-item.top-row {
    background-color: #3a5f6f;
    box-shadow: 0 0 0 1px #7ec8e3 inset;
}

.odds-distance-item .label {
    color: #e6e7e8;
}

.odds-distance-item .value {
    color: #04d47c;
}

.odds-input-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.odds-input {
	width: 80px;
	height: 30px;
	font-size: 16px;
	background-color: #0a151c;
	border: 0;
	color: #e6e7e8;
	text-align: center;
	outline: 0;
	border-radius: 3px;
}

.odds-color-indicator {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #2f4553;
}

.odds-color-indicator.white {
	background-color: #95a5a6;
}

.odds-color-indicator.green {
	background-color: #00ff41;
}

.odds-color-indicator.blue {
	background-color: #00bfff;
}

.odds-color-indicator.purple {
	background-color: #bf00ff;
}

.odds-color-indicator.orange {
	background-color: #ff8c00;
}

.odds-color-indicator.red {
	background-color: #ff0040;
}

.odds-color-indicator.yellow {
	background-color: #ffff00;
}

.odds-color-indicator.peacock {
	background-color: #2d5a5f;
}

.odds-color-indicator.navy {
	background-color: #34495e;
}

.odds-color-indicator.chocolate {
	background-color: #d2691e;
}

.odds-color-indicator.black {
	background-color: #2c2c2c;
}

.remove-odds {
	background-color: #e74c3c;
	color: white;
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.remove-odds:hover {
	background-color: #c0392b;
}

#add_odds {
	background-color: #3498db;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 600;
}

#add_odds:hover {
	background-color: #2980b9;
}

label {
	font-weight: 600;
}

/* .checkbox-container label,
.checkbox-container input {
	vertical-align: middle;
} */

/* .options {
	margin-top: 10px;
} */
/* .options input {
	width: 100px;
} */

/* #update_button {
	width: 300px;
	margin-top: 10px;
	margin-bottom: 10px;
} */

/* #statistics {
	font-weight: 600;
	margin-top: 5px;
} */

span.good {
	color: #04d47c;
}

span.bad {
	color: #f57373;
}

#loading {
	margin-top: 10px;
}

#results {
	display: grid;
	margin-top: 10px;
	width: 706px;
	grid-template-columns: repeat(auto-fill, 66px);
	grid-gap: 5px;
}

.crash {
	margin: 5px;
	background-color: #2f4553;
	color: #d5dceb;
	text-align: center;
	font-weight: 600;
	border-radius: 25%;
	padding: 5px;
	min-width: 50px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Odds-based color system */
.crash.below-threshold {
	background-color: #95a5a6; /* Grey - below any threshold */
	color: #2c3e50;
}

.crash.threshold-green {
	background-color: #00ff41; /* Bright Green */
	color: #2c3e50;
}

.crash.threshold-blue {
	background-color: #00bfff; /* Bright Blue */
	color: #2c3e50;
}

.crash.threshold-purple {
	background-color: #bf00ff; /* Bright Purple */
	color: #ffffff;
}

.crash.threshold-orange {
	background-color: #ff8c00; /* Bright Orange */
	color: #2c3e50;
}

.crash.threshold-red {
	background-color: #ff0040; /* Bright Red */
	color: #ffffff;
}

.crash.threshold-yellow {
	background-color: #ffff00; /* Bright Yellow */
	color: #2c3e50;
}

.crash.threshold-peacock {
	background-color: #2d5a5f; /* Dark Teal */
	color: #b8e6e8;
}

.crash.threshold-navy {
	background-color: #34495e; /* Dark Slate Blue */
	color: #a8b9d1;
}

.crash.threshold-chocolate {
	background-color: #d2691e; /* Chocolate */
	color: #ffffff;
}

.crash.threshold-black {
	background-color: #2c2c2c; /* Black */
	color: #ffffff;
}

.crash.ui-selected,
.crash.ui-selecting {
	outline: solid 2px #0079ff;
}

/* Live crash iframe embed */
#live_crash_embed {
	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: 9999;
	width: 324px;
	height: 198px;
	background: #0a151c;
	border: 1px solid #2f4553;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

#live_crash_embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

#live_crash_embed .embed-fallback-link {
	position: absolute;
	left: 8px;
	bottom: 8px;
	background: rgba(26, 44, 56, 0.9);
	color: #b8bfc3;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	text-decoration: none;
	border: 1px solid #2f4553;
}

@media (max-width: 600px) {
	#live_crash_embed {
		width: 81vw;
		height: 36vh;
		bottom: 10px;
		right: 10px;
	}
}