/*
 * TronLux redesign shell — Ledger Night
 * Loaded after the legacy stylesheets. Keeps existing class hooks
 * (.slide_menu_container, .user_balance, .burger_menu_bar, game ids).
 * html { font-size: 62.5% } remains in the legacy sheet, so 1rem = 10px.
 */

:root {
	--lux-bg: var(--ui-p-0b1220,#0b1220);
	--lux-bg-raise: var(--ui-p-121a2c,#121a2c);
	--lux-surface: var(--ui-p-172033,#172033);
	--lux-surface-2: var(--ui-p-1e2940,#1e2940);
	--lux-line: var(--ui-p-b0c4de29,rgba(176, 196, 222, 0.16));
	--lux-line-strong: var(--ui-p-b0c4de47,rgba(176, 196, 222, 0.28));
	--lux-text: var(--ui-p-e8eef8,#e8eef8);
	--lux-text-dim: var(--ui-p-9aabc4,#9aabc4);
	--lux-text-mute: var(--ui-p-6d7d96,#6d7d96);
	--lux-accent: var(--ui-p-1fd6b8,#1fd6b8);
	--lux-accent-ink: var(--ui-p-06241f,#06241f);
	--lux-accent-deep: var(--ui-p-149e8a,#149e8a);
	--lux-violet: var(--ui-p-8b7cff,#8b7cff);
	--lux-success: var(--ui-p-3dd68c,#3dd68c);
	--lux-danger: var(--ui-p-f07178,#f07178);
	--lux-warning: var(--ui-p-f0b429,#f0b429);
	--lux-info: var(--ui-p-7eb6ff,#7eb6ff);
	--lux-shadow: 0 16px 40px var(--ui-p-04081273,rgba(4, 8, 18, 0.45));
	--lux-radius: 12px;
	--lux-font: "Manrope", "Segoe UI", sans-serif;
	--lux-display: "Syne", "Manrope", sans-serif;
	--lux-mono: "IBM Plex Mono", ui-monospace, monospace;
	--lux-sidebar: 64px;
	--lux-header: 54px;
}

html body {
	background:
		radial-gradient(1200px 480px at 100% -10%, var(--ui-p-8b7cff29,rgba(139, 124, 255, 0.16)), transparent 55%),
		radial-gradient(900px 420px at -10% 0%, var(--ui-p-1fd6b81f,rgba(31, 214, 184, 0.12)), transparent 50%),
		var(--lux-bg);
	color: var(--lux-text);
	font-family: var(--lux-font);
	-webkit-font-smoothing: antialiased;
}

html body input,
html body textarea,
html body select,
html body [contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
}

html body a:focus-visible,
html body button:focus-visible,
html body button:focus-visible {
	outline: 2px solid var(--lux-accent);
	outline-offset: 2px;
}

/* Header */
html body .nav_top {
	height: var(--lux-header);
	background: var(--ui-p-0b1220e0,rgba(11, 18, 32, 0.88));
	border-bottom: 1px solid var(--lux-line);
	box-shadow: none;
	backdrop-filter: blur(16px);
}

html body .nav_container {
	box-shadow: none;
	padding: 0 14px;
}

html body .nav_container_wrapper_left_logo img {
	width: 148px !important;
	height: auto;
	filter: saturate(0.85) brightness(1.15);
}

html body .burger_menu_bar {
	width: 36px;
	height: 36px;
	border-radius: calc(10px * var(--ui-radius-scale,1));
	border: 1px solid var(--lux-line);
	background: var(--lux-surface);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
}

html body .burger_menu_bar_line {
	display: block;
	width: 16px;
	height: 2px;
	border-radius: calc(2px * var(--ui-radius-scale,1));
	background: var(--lux-text);
}

html body .drop_down_header {
	height: 38px;
	min-width: 168px;
	background: var(--lux-surface);
	border: 1px solid var(--lux-line-strong);
	border-radius: 999px;
	box-shadow: inset 0 -2px 0 var(--lux-accent);
}

html body .drop_down_header_text,
html body .user_balance {
	font-family: var(--lux-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--lux-text);
}

html body .nav_top #nav_wallet {
	height: 38px;
	min-width: 96px;
	width: auto;
	padding: 0 16px;
	margin-left: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--lux-accent);
	color: var(--lux-accent-ink);
	font-family: var(--lux-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

html body .nav_top #nav_wallet:hover {
	background: var(--ui-p-7ff3e4,#7ff3e4);
}

html body .nav_top #nav_mobile_wallet {
	width: 38px;
	height: 38px;
	margin-left: 8px;
	border-radius: 999px;
	border: 0;
	background: var(--lux-accent);
}

html body .btn-login,
html body .btn-signup {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: var(--lux-font);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

html body .btn-login {
	color: var(--lux-text);
	background: transparent;
	border: 1px solid var(--lux-line-strong);
}

html body .btn-signup {
	color: var(--lux-accent-ink);
	background: var(--lux-accent);
	border: 0;
	margin-left: 8px;
}

/* Sidebar — collapsed width stays 6rem so scripts.js animation still fits */
html body .slide_menu_open,
html body .slide_menu_container {
	top: var(--lux-header);
	margin-top: 0;
	height: calc(100% - var(--lux-header));
	background: var(--ui-p-121a2cf5,rgba(18, 26, 44, 0.96));
	border-right: 1px solid var(--lux-line);
	padding: 12px 8px;
	backdrop-filter: blur(18px);
}

html body #main_nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

html body #main_nav a,
html body #mobile_nav a {
	text-decoration: none;
	color: inherit;
}

html body .slide_menu_wrapper,
html body .slide_menu_active {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 4px 0;
	border-radius: calc(12px * var(--ui-radius-scale,1));
	color: var(--lux-text-dim);
	list-style: none;
}

html body .slide_menu_wrapper:hover {
	background: var(--ui-p-e8eef80d,rgba(232, 238, 248, 0.05));
	color: var(--lux-text);
}

html body .slide_menu_active {
	background: var(--ui-p-1fd6b81f,rgba(31, 214, 184, 0.12));
	color: var(--lux-text);
	box-shadow: inset 3px 0 0 var(--lux-accent);
}

html body .slide_menu_active p,
html body .slide_menu_wrapper p {
	font-family: var(--lux-font);
	font-size: 13px;
	font-weight: 600;
	margin: 0 8px 0 4px;
	color: inherit;
}

html body .slide_menu_item img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	filter: grayscale(0.2) brightness(1.3);
}

html body .slide_menu_modal_wrapper {
	background: var(--ui-p-060a12b8,rgba(6, 10, 18, 0.72));
}

html body .slide_menu_modal_box {
	background: var(--ui-p-121a2c,#121a2c);
	border-right: 1px solid var(--lux-line);
	width: min(300px, 86vw);
}

/* Page canvas */
html body .page_container {
	color: var(--lux-text);
}

html body .page_container h2,
html body .page_container .page_title,
html body .landing-hero h1 {
	font-family: var(--lux-display);
	letter-spacing: -0.03em;
	color: var(--lux-text);
}

html body .highlighted_text {
	color: var(--lux-accent);
}

html body .page_content,
html body .page_description,
html body p {
	color: var(--lux-text);
}

html body .card_holder,
html body .profile_progress,
html body .bet_history,
html body .gameBar_wrap,
html body .section_box,
html body .box_content {
	background: var(--lux-surface);
	border: 1px solid var(--lux-line);
	border-radius: var(--lux-radius);
}

html body .profile_progress {
	padding: 14px 16px;
}

html body .progress_wrapper {
	background: var(--ui-p-0d1422,#0d1422);
	border-radius: 999px;
	overflow: hidden;
}

html body .progress_green,
html body #wager_progress_fill {
	background: linear-gradient(90deg, var(--lux-accent-deep), var(--lux-accent)) !important;
}

/* Lobby tiles */
html body .game_list .select_game {
	background: var(--lux-surface-2);
	border: 1px solid var(--lux-line);
	border-radius: calc(16px * var(--ui-radius-scale,1));
	box-shadow: var(--lux-shadow);
}

html body .game_list .select_game:hover {
	border-color: var(--ui-p-1fd6b88c,rgba(31, 214, 184, 0.55));
	transform: translateY(-2px);
}

html body .game_list .select_game .game_name {
	font-family: var(--lux-display);
}

/* Tables — legacy sheet sets row colors with !important */
html body .bet_history {
	background: var(--lux-surface) !important;
	border: 1px solid var(--lux-line) !important;
}

html body .bet_history_table,
html body table.table,
html body .history_tbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
	color: var(--lux-text);
	font-size: 13px;
}

html body .bet_history_table tr {
	background: var(--ui-p-121a2c,#121a2c) !important;
	border-bottom: 0 !important;
}

html body .bet_history_table tr th {
	background: transparent !important;
	color: var(--lux-text-mute) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

html body .bet_history_table tr td,
html body .bet_history_table tr th {
	border-bottom: 1px solid var(--lux-line);
	padding: 10px 8px;
	color: var(--lux-text);
}

html body .bet_history_table tr:hover,
html body .bet_history_table tr.hovered {
	background: var(--ui-p-1a2740,#1a2740) !important;
}

html body .bet_history_table td {
	font-variant-numeric: tabular-nums;
	font-family: var(--lux-mono);
	font-size: 12px !important;
}

/* Controls shared by games and forms */
html body .game_button {
	background: var(--lux-surface-2);
	color: var(--lux-text);
	border: 1px solid var(--lux-line);
	border-radius: calc(10px * var(--ui-radius-scale,1));
	font-family: var(--lux-font);
}

html body .game_button.tab_active {
	background: var(--ui-p-1fd6b829,rgba(31, 214, 184, 0.16));
	border-color: var(--ui-p-1fd6b873,rgba(31, 214, 184, 0.45));
	color: var(--lux-accent);
}

html body .game_action_bar .bet_button,
html body #bet_btn.bet_button {
	background: var(--lux-accent) !important;
	color: var(--lux-accent-ink) !important;
	border-radius: calc(12px * var(--ui-radius-scale,1)) !important;
	font-family: var(--lux-font) !important;
	letter-spacing: 0.06em;
}

html body .game_action_bar .bet_button:hover,
html body #bet_btn.bet_button:hover {
	background: var(--ui-p-7ff3e4,#7ff3e4) !important;
}

html body .input_group,
html body .form-control,
html body input[type="text"],
html body input[type="password"],
html body input[type="email"],
html body input[type="number"],
html body select,
html body textarea {
	background-color: var(--ui-p-0d1422,#0d1422);
	border: 1px solid var(--lux-line-strong);
	color: var(--lux-text);
	border-radius: calc(10px * var(--ui-radius-scale,1));
}

html body input::placeholder,
html body textarea::placeholder {
	color: var(--lux-text-mute);
}

/* Feedback */
html body .alert {
	border-radius: calc(12px * var(--ui-radius-scale,1));
	border: 1px solid var(--lux-line);
	font-family: var(--lux-font);
}

html body .alert-success {
	background: var(--ui-p-3dd68c24,rgba(61, 214, 140, 0.14));
	border-color: var(--ui-p-3dd68c66,rgba(61, 214, 140, 0.4));
	color: var(--ui-p-d8ffe9,#d8ffe9);
}

html body .alert-warning {
	background: var(--ui-p-f0b42924,rgba(240, 180, 41, 0.14));
	border-color: var(--ui-p-f0b42973,rgba(240, 180, 41, 0.45));
	color: var(--ui-p-ffe7ad,#ffe7ad);
}

html body .alert-info {
	background: var(--ui-p-7eb6ff1f,rgba(126, 182, 255, 0.12));
	border-color: var(--ui-p-7eb6ff66,rgba(126, 182, 255, 0.4));
	color: var(--ui-p-e5f0ff,#e5f0ff);
}

html body .alert-danger {
	background: var(--ui-p-f0717829,rgba(240, 113, 120, 0.16));
	border-color: var(--ui-p-f0717873,rgba(240, 113, 120, 0.45));
	color: var(--ui-p-ffe4e6,#ffe4e6);
}

html body .pagination a {
	background: var(--lux-surface);
	border-color: var(--lux-line);
	color: var(--lux-text);
}

html body .pagination a.active {
	background: var(--lux-accent);
	border-color: var(--lux-accent);
	color: var(--lux-accent-ink);
}

/* Footer */
html body .Footer_footer__Dhw_9 {
	background: var(--ui-p-0e1524,#0e1524);
	border-top: 1px solid var(--lux-line);
	color: var(--lux-text-dim);
	font-family: var(--lux-font);
}

html body .footer_title {
	font-family: var(--lux-display);
	color: var(--lux-text);
	font-size: 15px;
}

html body .Footer_footer__Dhw_9 a:hover {
	color: var(--lux-accent);
}

/* Landing keeps its hero image; retint the wash so it sits on navy */
html body.landing-index .landing-hero.landing-hero-split {
	background-color: var(--lux-bg);
	border-bottom-color: var(--lux-line);
}

html body.landing-index .landing-hero-split::before {
	background: linear-gradient(90deg,
		var(--ui-p-0b1220f0,rgba(11, 18, 32, 0.94)) 0%,
		var(--ui-p-0b1220b8,rgba(11, 18, 32, 0.72)) 28%,
		var(--ui-p-0b122033,rgba(11, 18, 32, 0.2)) 52%,
		transparent 68%);
}

@media (max-width: 639px) {
	html body .page_container {
		width: 100%;
		margin-left: 0;
	}
}

@media (min-width: 1440px) {
	html body .page_container .page_content {
		max-width: 1200px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .game_list .select_game,
	html body .nav_top #nav_wallet,
	html body .slide_menu_wrapper {
		transition: none;
	}
}