:root{
	--brb-blue-900:#071a2b;
	--brb-blue-800:#0A3354;
	--brb-blue-700:#154F6E;
	--brb-blue-600:#27678F;
	--brb-green-700:#3fae2a;
	--brb-green-600:#65BC33;
	--brb-green-500:#8FD567;
	--brb-white:#ffffff;
	--brb-text:#eaf3f7;
	--brb-muted:rgba(234,243,247,.75);
	--brb-radius:22px;
	--brb-shadow:0 18px 40px rgba(0,0,0,.35);
	--brb-shadow-soft:0 12px 28px rgba(0,0,0,.25);
	--brb-glow:0 0 0 2px rgba(143,213,103,.22), 0 0 26px rgba(143,213,103,.25);
	--brb-glow-strong:0 0 0 2px rgba(143,213,103,.28), 0 0 38px rgba(143,213,103,.35);
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body.brb-page{
	font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background:
		radial-gradient(900px 500px at 10% 0%, rgba(39,103,143,.55), transparent 60%),
		radial-gradient(900px 500px at 90% 15%, rgba(143,213,103,.22), transparent 60%),
		linear-gradient(180deg, var(--brb-blue-900), var(--brb-blue-800) 45%, var(--brb-blue-900));
	min-height:100vh;
	color:var(--brb-text);
	padding-top:30px;
	padding-bottom:40px;
	overflow-x:hidden;
}

.brb-front-glow{
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:0;
	background:
		radial-gradient(circle at top left, rgba(143,213,103,.12), transparent 30%),
		radial-gradient(circle at top right, rgba(39,103,143,.22), transparent 35%);
}

.container{
	position:relative;
	z-index:2;
}

.screen{
	display:none;
}

.screen.active{
	display:block;
	animation:fadeIn .35s ease-out;
}

@keyframes fadeIn{
	from{
		opacity:0;
		transform:translateY(10px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

.brb-front-card{
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.10);
	border-radius:32px;
	padding:26px;
	box-shadow:var(--brb-shadow);
	backdrop-filter:blur(14px);
	position:relative;
	overflow:hidden;
	z-index:2;
}

.brb-front-card::before{
	content:"";
	position:absolute;
	inset:-2px;
	background:
		radial-gradient(500px 240px at top left, rgba(143,213,103,.10), transparent 50%),
		radial-gradient(500px 240px at top right, rgba(39,103,143,.18), transparent 55%);
	pointer-events:none;
}

.brb-front-card > *{
	position:relative;
	z-index:2;
}

.brb-front-logo-small{
	height:64px;
	width:auto;
	margin:auto;
	display:block;
	filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.brb-lottery-icon{
	width:74px;
	height:74px;
	margin:0 auto;
	border-radius:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:2rem;
	color:#08261C;
	background:linear-gradient(180deg, var(--brb-green-500), var(--brb-green-600));
	box-shadow:var(--brb-glow-strong), 0 14px 28px rgba(0,0,0,.32);
}

.brb-front-grid-title{
	font-size:clamp(1.6rem, 4vw, 2.3rem);
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:-.04em;
	margin-bottom:10px;
	color:#fff;
}

.brb-front-grid-subtitle{
	color:var(--brb-muted);
	font-weight:700;
	text-transform:uppercase;
	font-size:.9rem;
}

.brb-front-divider{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	margin-top:24px;
	margin-bottom:26px;
}

.brb-front-divider span{
	width:58px;
	height:2px;
	background:rgba(255,255,255,.14);
	border-radius:999px;
}

.brb-front-divider i{
	color:var(--brb-green-500);
	filter:drop-shadow(0 0 10px rgba(143,213,103,.65));
}

.brb-front-top-grid{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:42px 1fr 42px;
	align-items:center;
}

.brb-back-btn{
	width:42px;
	height:42px;
	border:none;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	color:#fff;
	transition:.2s ease;
}

.brb-back-btn:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.12);
}

.brb-top-spacer{
	width:42px;
	height:42px;
}

.grid-bichos{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:14px;
}

.card-bicho{
	min-height:118px;
	border:none;
	border-radius:26px;
	padding:14px 10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	background:linear-gradient(180deg, rgba(143,213,103,.16), rgba(101,188,51,.08));
	border:2px solid rgba(143,213,103,.42);
	color:#fff;
	box-shadow:0 10px 22px rgba(0,0,0,.22);
	transition:.22s ease;
	position:relative;
	overflow:hidden;
}

.card-bicho::before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 45%);
	pointer-events:none;
}

.card-bicho:hover{
	transform:translateY(-4px) scale(1.03);
	box-shadow:var(--brb-glow-strong), 0 18px 28px rgba(0,0,0,.35);
}

.card-bicho img{
	width:58px;
	height:58px;
	object-fit:contain;
	margin-bottom:8px;
	filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));
	position:relative;
	z-index:2;
}

.card-bicho .nome{
	font-size:.82rem;
	font-weight:900;
	text-transform:uppercase;
	line-height:1.15;
	position:relative;
	z-index:2;
	color:#fff;
}

.qtd-wrapper{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	flex-wrap:wrap;
}

.qtd-opcao{
	width:96px;
	height:96px;
	border:none;
	border-radius:26px;
	background:linear-gradient(180deg, var(--brb-green-500), var(--brb-green-600));
	color:#06261C;
	font-size:2rem;
	font-weight:900;
	box-shadow:var(--brb-glow-strong), 0 18px 28px rgba(0,0,0,.35);
	transition:.22s ease;
}

.qtd-opcao:hover{
	transform:translateY(-4px) scale(1.03);
	filter:brightness(1.03);
}

.palpites-wrapper{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:14px;
}

.card-palpite{
	min-width:118px;
	height:78px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:22px;

	background:linear-gradient(
		180deg,
		var(--brb-green-500),
		var(--brb-green-600)
	);

	color:#06261C;

	border:2px solid rgba(255,255,255,.08);

	box-shadow:
		var(--brb-glow-strong),
		0 16px 28px rgba(0,0,0,.35);

	position:relative;
	overflow:hidden;
}

.card-palpite::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(
			circle at top left,
			rgba(255,255,255,.20),
			transparent 45%
		);
	pointer-events:none;
}

.card-palpite span{
	position:relative;
	z-index:2;

	font-size:1.75rem;
	font-weight:900;
	letter-spacing:.08em;

	color:#06261C;
}

.card-palpite{
	animation:palpiteShow .28s ease;
}

@keyframes palpiteShow{

	0%{
		opacity:0;
		transform:scale(.8);
	}

	100%{
		opacity:1;
		transform:scale(1);
	}

}

.brb-btn{
	background:linear-gradient(180deg, var(--brb-green-500), var(--brb-green-600));
	color:#06261C !important;
	border:none;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:-.01em;
	border-radius:18px;
	padding:14px 18px;
	box-shadow:var(--brb-glow-strong), 0 10px 20px rgba(0,0,0,.35);
	transition:.2s ease;
}

.brb-btn:hover{
	transform:translateY(-2px);
	filter:brightness(1.03);
}

.brb-btn-outline{
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.12);
	color:var(--brb-text) !important;
	font-weight:900;
	text-transform:uppercase;
	border-radius:18px;
	padding:14px 18px;
	box-shadow:var(--brb-shadow-soft);
	transition:.2s ease;
}

.brb-btn-outline:hover{
	background:rgba(255,255,255,.10);
	transform:translateY(-2px);
}

.brb-front-confirm-btn{
	height:56px;
}

.alert-copy{
	border:none;
	border-radius:16px;
	font-weight:800;
	text-transform:uppercase;
	color:#06261C;
	background:linear-gradient(180deg, var(--brb-green-500), var(--brb-green-600));
}

@media(max-width:768px){
	body.brb-page{
		padding-top:18px;
	}

	.brb-front-card{
		padding:20px;
		border-radius:26px;
	}

	.brb-lottery-icon{
		width:62px;
		height:62px;
		font-size:1.6rem;
	}

	.grid-bichos{
		grid-template-columns:repeat(3, 1fr);
		gap:10px;
	}

	.card-bicho{
		min-height:98px;
		border-radius:22px;
	}

	.card-bicho img{
		width:48px;
		height:48px;
	}

	.card-bicho .nome{
		font-size:.70rem;
	}

	.qtd-opcao{
		width:82px;
		height:82px;
		border-radius:22px;
		font-size:1.7rem;
	}

	.brb-btn{
		animation:brbPulse 1.4s ease-in-out infinite;
	}
}

@media(max-width:520px){
	.grid-bichos{
		grid-template-columns:repeat(3, 1fr);
	}
}

@keyframes brbPulse{
	0%, 100%{
		transform:scale(1);
		box-shadow:var(--brb-glow-strong), 0 10px 20px rgba(0,0,0,.35);
	}

	50%{
		transform:scale(1.03);
		box-shadow:var(--brb-glow-strong), 0 18px 28px rgba(0,0,0,.45);
	}
}

#alertCopy{

	border:none;

	border-radius:18px;

	background:rgba(25,135,84,.15);

	border:1px solid rgba(25,135,84,.45);

	color:#8FD567;

	font-weight:800;

	box-shadow:0 10px 22px rgba(0,0,0,.25);

	animation:fadeAlert .25s ease;
}

@keyframes fadeAlert{

	from{
		opacity:0;
		transform:translateY(10px);
	}

	to{
		opacity:1;
		transform:translateY(0);
	}

}