@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root
{
	--primary-blue: #1E63E9;
	--primary-purple: #7C2DBB;
	--primary-gradient: linear-gradient(135deg, #1E63E9 0%, #7C2DBB 100%);
	--accent-cyan: #B3E5FC;
	--accent-yellow: #FFF9C4;
	--accent-green: #00E676;
	--accent-pink: #E91E63;
	--banner-cyan: linear-gradient(135deg, #DFF7FF 0%, #CFF1FF 100%);
	--banner-gray: linear-gradient(135deg, #F4F6F8 0%, #ECEFF4 100%);
	--banner-yellow: linear-gradient(135deg, #FFF7D4 0%, #FFEEC2 100%);
	--card-border-cyan: #62CFE2;
	--card-border-purple: #B88AF7;
	--card-border-pink: #F2A1D1;
	--text-primary: #212121;
	--text-secondary: #757575;
	--text-tertiary: #667085;
	--text-white: #FFFFFF;
	--button-gradient: linear-gradient(135deg, #1E63E9 0%, #1B4FB8 100%);
	--button-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
	--card-shadow: 0 6px 16px rgba(24, 36, 66, 0.12);
	--card-hover-shadow: 0 10px 24px rgba(24, 36, 66, 0.18);
	--glow-effect: 0 0 20px rgba(33, 150, 243, 0.4);
}

.lobby-new-body
{
	background: linear-gradient(180deg, #EDF2FF 0%, #F7F9FC 40%, #F6F7FB 100%);
	color: var(--text-primary);
	font-family: "Inter", "Segoe UI", sans-serif;
}

.lobby-new-main
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;
}

.main-header
{
	background: var(--primary-gradient);
	padding: 18px 20px;
	color: var(--text-white);
	position: sticky;
	top: 0;
	z-index: 1030;
}

.header-content
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.header-left
{
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	min-width: 0;
}

.logo
{
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.logo-icon
{
	width: 30px;
	height: 30px;
}

.logo-text
{
	font-size: 18px;
	font-weight: 700;
	color: var(--text-white);
}

.menu-toggle
{
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.menu-toggle span
{
	display: block;
	width: 24px;
	height: 3px;
	background: var(--text-white);
	margin: 5px 0;
	border-radius: 2px;
}

.balance-info
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	flex-wrap: wrap;
	gap: 12px;
}

.token-rate
{
	color: #FFE77A;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.balance
{
	color: #FFE77A;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.balance-icon
{
	width: 18px;
	height: 18px;
}

.nav-menu
{
	margin-top: 12px;
}

.nav-menu-inner
{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.main-header.nav-inline
{
	display: flex;
	align-items: center;
	gap: 16px;
}

.main-header.nav-inline .header-content
{
	flex: 1 1 auto;
	margin-bottom: 0;
	flex-wrap: nowrap;
}

.main-header.nav-inline .nav-menu
{
	margin-top: 0;
	flex: 0 0 auto;
}

.main-header.nav-inline .nav-menu-inner
{
	justify-content: flex-end;
	flex-wrap: nowrap;
}

.main-header[data-nav-layout="index-new"] .header-content
{
	align-items: center;
}

.main-header[data-nav-layout="index-new"] .header-left
{
	flex: 1 1 auto;
	flex-wrap: nowrap;
}

.main-header[data-nav-layout="index-new"] .balance-info
{
	flex: 0 0 auto;
	margin-left: auto;
	justify-content: flex-end;
}

.main-header[data-nav-layout="index-new"] .menu-toggle
{
	margin-left: auto;
}

.main-header[data-nav-layout="index-new"] .nav-menu-inner
{
	justify-content: center;
}

@media (max-width: 720px)
{
	.main-header[data-nav-layout="index-new"] .header-content
	{
		gap: 12px;
	}

	.main-header[data-nav-layout="index-new"] .header-left
	{
		order: 1;
	}

	.main-header[data-nav-layout="index-new"] .balance-info
	{
		order: 3;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.main-header[data-nav-layout="index-new"] .menu-toggle
	{
		order: 2;
	}

	.main-header[data-nav-layout="index-new"] .logo-icon
	{
		width: 24px;
		height: 24px;
	}

	.main-header[data-nav-layout="index-new"] .logo-text
	{
		font-size: 16px;
	}
}

.nav-menu.nav-menu-measure
{
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
}

.nav-menu-inner.nav-menu-measure-inline
{
	flex-wrap: nowrap;
}

.lobby-new-top-bars
{
	padding-top: 12px;
}

.notifications
{
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.notification-banner
{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 16px;
	box-shadow: 0 6px 16px rgba(24, 36, 66, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-banner:hover
{
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(24, 36, 66, 0.16);
}

.banner-cyan
{
	background: var(--banner-cyan);
	border: 1px solid #B6E7F8;
}

.banner-gray
{
	background: var(--banner-gray);
	border: 1px solid #D9DEE7;
}

.banner-yellow
{
	background: var(--banner-yellow);
	border: 1px solid #F6D28C;
}

.banner-icon
{
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}

.banner-text
{
	flex: 1;
	font-size: 13px;
	color: #2E2E2E;
	margin: 0;
}

#newSpinCountdownWrap
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 4px;
}

.new-btn-primary
{
	background: var(--button-gradient);
	color: var(--text-white);
	border: none;
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	box-shadow: var(--button-shadow);
	transition: all 0.3s ease;
	white-space: nowrap;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.new-btn-primary:hover
{
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
	color: var(--text-white);
}

.new-btn-primary:active
{
	transform: translateY(0);
}

.new-btn-outline
{
	background: var(--text-white);
	color: var(--primary-blue);
	border: 2px solid var(--primary-blue);
	padding: 6px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.new-btn-outline:hover
{
	background: var(--primary-blue);
	color: var(--text-white);
}

.game-cards
{
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.game-card
{
	background: var(--text-white);
	border-radius: 18px;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-shadow: var(--card-shadow);
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

.game-card-feature
{
	padding: 20px 16px;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	border: 1px solid #E4EAF6;
}

.game-card-feature .game-icon
{
	width: 48px;
	height: 48px;
}

.game-card-feature .game-title
{
	font-size: 13px;
	font-weight: 600;
}

.game-card-row
{
	display: grid;
	gap: 12px;
}

.game-card-row-three
{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-card-row-two
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-card-small
{
	min-height: 140px;
	justify-content: center;
}

.game-card::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--border-color, var(--primary-gradient));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.game-card:hover
{
	transform: translateY(-4px);
	box-shadow: var(--card-hover-shadow);
}

.game-card:hover::before
{
	opacity: 1;
}

.card-cyan
{
	--border-color: linear-gradient(90deg, #4DD0E1 0%, #00BCD4 100%);
	border: 1px solid var(--card-border-cyan);
}

.card-purple
{
	--border-color: linear-gradient(90deg, #BA68C8 0%, #9C27B0 100%);
	border: 1px solid var(--card-border-purple);
}

.card-pink
{
	--border-color: linear-gradient(90deg, #F06292 0%, #E91E63 100%);
	border: 1px solid var(--card-border-pink);
}

.game-icon
{
	width: 56px;
	height: 56px;
	transition: transform 0.3s ease;
}

.game-card:hover .game-icon
{
	transform: scale(1.1) rotate(5deg);
}

.game-title
{
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	text-align: center;
}

.giveaway-section
{
	padding: 16px 0;
}

.giveaway-banner
{
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(24, 36, 66, 0.16);
}

.giveaway-image
{
	width: 100%;
	height: auto;
	display: block;
}

.giveaway-section .rotating-banner-wrapper
{
	margin: 0;
}

.giveaway-section .rotating-banner-link
{
	display: block;
}

.giveaway-section .rotating-banner-link img
{
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(24, 36, 66, 0.16);
}

.daily-targets
{
	padding: 18px 18px 16px;
	background: var(--text-white);
	margin: 16px 0;
	border-radius: 18px;
	box-shadow: var(--card-shadow);
	border: 1px solid #E3EAF5;
}

.targets-header
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.target-icon
{
	width: 40px;
	height: 40px;
}

.targets-title h2
{
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 4px 0;
}

.targets-title p
{
	font-size: 12px;
	color: var(--text-tertiary);
	margin: 0;
}

.progress-bar-container
{
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.progress-track
{
	position: relative;
	padding: 0 8px 0 6px;
}

.progress-bar
{
	height: 6px;
	background: #D8E4F5;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.progress-fill
{
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #2196F3 0%, #1976D2 100%);
	border-radius: 999px;
	transition: width 0.5s ease;
}

.progress-badges
{
	display: flex;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: nowrap;
	padding: 0 4px;
}

.target-badge
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 60px;
}

@media (max-width: 420px)
{
	.progress-badges
	{
		flex-wrap: wrap;
		justify-content: center;
	}

	.target-badge
	{
		min-width: 48px;
	}
}

.target-badge-label
{
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: linear-gradient(180deg, #1F5EDC 0%, #1D4AB8 100%);
	color: var(--text-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.1;
	padding: 6px;
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: inset 0 -4px 10px rgba(0, 0, 0, 0.12);
	letter-spacing: 0.2px;
}

.target-badge-active .target-badge-label
{
	box-shadow: var(--button-shadow);
}

.target-badge-level
{
	font-size: 12px;
	font-weight: 700;
}

.target-badge-reward
{
	font-size: 10px;
	font-weight: 600;
}

.target-badge-value
{
	font-size: 11px;
	font-weight: 600;
	color: var(--text-primary);
}

.target-badge-progress
{
	font-size: 11px;
	font-weight: 600;
	color: #5B6B8C;
}

.targets-timer
{
	text-align: center;
	font-size: 12px;
	color: var(--text-tertiary);
	margin: 12px 0 0 0;
}

.targets-timer strong
{
	color: var(--text-primary);
	font-weight: 700;
}

.wager-table-section
{
	padding: 8px 0 32px;
	overflow-x: auto;
}

.wager-table
{
	width: 100%;
	background: var(--text-white);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
	border-collapse: collapse;
	border: 1px solid #E5ECF6;
}

.wager-table thead
{
	background: linear-gradient(135deg, #E6F2FF 0%, #EEF0FF 100%);
}

.wager-table th
{
	padding: 10px 8px;
	font-size: 12px;
	font-weight: 700;
	color: #2C3E5D;
	text-align: center;
	border-bottom: 1px solid #CCD5E3;
	white-space: nowrap;
}

.wager-table td
{
	padding: 10px 8px;
	font-size: 12px;
	color: #4C5D75;
	text-align: center;
	border-bottom: 1px solid #E9EEF5;
	white-space: nowrap;
}

.wager-table tbody tr:hover
{
	background: #F6F9FD;
}

.table-icon
{
	width: 26px;
	height: 26px;
}

.badge-blue
{
	background: linear-gradient(135deg, #1E6BE8 0%, #1A52C8 100%);
	color: var(--text-white);
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	display: inline-block;
}

.badge-cyan
{
	background: linear-gradient(135deg, #5AD5E5 0%, #1EAED1 100%);
	color: var(--text-white);
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	display: inline-block;
}

.daily-targets + .wager-table-section
{
	margin-top: -6px;
}

.wager-table thead th:first-child
{
	border-top-left-radius: 18px;
}

.wager-table thead th:last-child
{
	border-top-right-radius: 18px;
}

.wager-table td:first-child
{
	font-weight: 700;
	color: #2F3B57;
}

.wager-table td:not(:first-child)
{
	color: #51627A;
}

.wager-game-icons
{
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.wager-game-icons .table-icon
{
	margin: 0;
}

@media (max-width: 520px)
{
	.daily-targets
	{
		padding: 16px;
	}

	.progress-badges
	{
		gap: 6px;
	}

	.target-badge-label
	{
		width: 52px;
		height: 52px;
	}

	.table-icon
	{
		width: 22px;
		height: 22px;
	}

	.wager-table th,
	.wager-table td
	{
		font-size: 11px;
		padding: 8px 6px;
	}
}

@media (min-width: 768px)
{
	.daily-targets
	{
		padding: 20px 24px 18px;
	}

	.target-badge-label
	{
		width: 64px;
		height: 64px;
		font-size: 13px;
	}

	.target-badge-reward
	{
		font-size: 11px;
	}
}

.new-btn-primary:focus,
.new-btn-outline:focus,
.game-card:focus,
.menu-toggle:focus,
.notification-banner:focus-within,
.giveaway-banner:focus-within
{
	outline: 3px solid var(--primary-blue);
	outline-offset: 2px;
}

@media (min-width: 600px)
{
	.notification-banner
	{
		padding: 16px 20px;
	}

	.main-header
	{
		padding: 20px 32px;
	}

	.game-card-feature
	{
		padding: 24px;
	}
}

@media (min-width: 1024px)
{
	.notifications
	{
		padding: 24px 0;
	}

	.daily-targets
	{
		margin: 24px 0;
	}
}