/* Reset básico */
*, *::before, *::after { margin : 0; padding : 0; box-sizing : border-box; }

:root {
	--bg-dark       : #192A23;
	--bg-light      : #F4F4F4;
	--card-dark     : #1F2A23;
	--card-light    : #FFF;
	--primary       : rgb(255, 173, 0);
	--primary-light : #FF9700;
	--text-dark     : #ECECEC;
	--text-light    : #1A1A1A;
	--shadow        : 0 4px 24px rgba(0, 0, 0, .12);

	/* ui scale */
	--radius        : 12px;
	--radius-lg     : 30px;
	--input-h       : 44px;
	--btn-h         : 44px;
	--gap           : 12px;
	--footer-h      : 44px;
}

html, body { height : 100%; }
body {
	background     : radial-gradient(circle at center, #040, #001A00);
	color          : var(--text-dark);
	font           : 400 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	transition     : background .3s, color .3s;
	padding-bottom : var(--footer-h); /* evita que o footer cubra o conteúdo */
}
body.claro { background : var(--bg-light); color : var(--text-light); }

/* Card principal */
.molde {
	background    : radial-gradient(circle at center, #040, #001A00);
	color         : var(--text-dark);
	transition    : background .3s, color .3s, border-color .3s;
	width         : min(92vw, 420px);
	border        : 2px solid var(--primary);
	border-radius : var(--radius-lg);
	box-shadow    : var(--shadow);
}
body.claro .molde { background : var(--card-light); color : var(--text-light); }

/* Toggle tema */
#theme-toggle-container {
	position : fixed; top : 1rem; right : 1rem; z-index : 30; user-select : none;
}
.toggle--wrapper {
	width      : 60px; height : 28px; border-radius : 999px; display : flex; align-items : center;
	background : #2C4B98; transition : background .35s; cursor : pointer; position : relative;
	box-shadow : 0 2px 8px rgba(0, 0, 0, .09);
}
body.claro .toggle--wrapper { background : #F0B65C; }
.toggle--knob {
	position   : absolute; top : 3px; left : 3px; width : 22px; height : 22px; border-radius : 50%;
	background : #FFF; transition : left .40s cubic-bezier(.9, .15, .5, 1.18), background .25s;
	box-shadow : 0 1px 5px rgba(0, 0, 0, .10); z-index : 2;
}
body.claro .toggle--knob { left : 35px; background : #FFF6C1; }
/* Sol/Lua decorativos */
.toggle--knob .sol {
	position   : absolute; left : 5px; top : 5px; width : 12px; height : 12px; border-radius : 50%;
	background : #FFC107; box-shadow : 0 0 0 4px #FFC107; opacity : 0; transition : opacity .2s;
}
body.claro .toggle--knob .sol { opacity : 1; }
.toggle--knob .moon {
	position   : absolute; inset : 0; width : 22px; height : 22px; border-radius : 50%;
	background : #FFF; opacity : 1; transition : opacity .24s; z-index : 1;
}
.toggle--knob .moon::after {
	content    : ""; position : absolute; left : 10px; top : 0; width : 15px; height : 22px; border-radius : 50%;
	background : #2C4B98;
}
body.claro .toggle--knob .moon { opacity : 0; }

/* Avatar */
.molde-avatar {
	background    : linear-gradient(180deg, #F2F2F2 0%, #BDBDBD 100%);
	color         : var(--text-dark);
	width         : 100px; height : 100px; border : 1px solid var(--primary-light);
	border-radius : 50%; box-shadow : 0 0 10px rgba(0, 0, 0, .15);
	cursor        : pointer; transition : box-shadow .2s, transform .2s;
}
.molde-avatar:hover, .molde-avatar:active {
	box-shadow : 0 0 0 4px var(--primary-light); transform : scale(1.04);
}
.molde-avatar svg { pointer-events : none; }
.avatar-img {
	width : 100%; height : 100%; object-fit : contain; object-position : center; border-radius : 50%;
}

/* Input nome */
.input-nome {
	appearance    : none;
	height        : var(--input-h);
	background    : #2A3B31; color : #ECECEC;
	border        : 1px solid var(--primary-light);
	border-radius : var(--radius);
	padding       : .75rem 1rem; font-size : 1rem; outline : none;
	transition    : border-color .2s, box-shadow .2s, background .2s, color .2s;
	box-shadow    : inset 0 1px 3px rgba(0, 0, 0, .2);
}
.input-nome::placeholder { color : #CCC; opacity : .85; }
.input-nome:focus {
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(255, 152, 0, .2);
	background   : #33463A;
}
body.claro .input-nome {
	background : #FFF; color : #1A1A1A; border : 1px solid var(--primary-light);
	box-shadow : inset 0 1px 2px rgba(0, 0, 0, .05);
}
body.claro .input-nome::placeholder { color : #888; }
body.claro .input-nome:focus {
	background : #FFF9ED; border-color : var(--primary);
	box-shadow : 0 0 0 3px rgba(240, 160, 0, .25);
}

/* Botões */
.btn-jogar-agora {
	min-height : var(--btn-h);
	padding    : 0 .9rem;
	border     : none; border-radius : 10px;
	background : linear-gradient(105deg, #FFB347 10%, #FF7E00 90%);
	color      : #FFF; font-size : 1rem; font-weight : 700; text-transform : uppercase;
	box-shadow : 0 2px 8px rgba(255, 126, 0, .10);
	cursor     : pointer; outline : none; position : relative; overflow : hidden;
	transition : transform .14s, box-shadow .18s, background .18s;
}
.btn-jogar-agora::after {
	content    : ""; position : absolute; left : -40%; top : 0; width : 60%; height : 100%;
	background : linear-gradient(120deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%);
	filter     : blur(2px); pointer-events : none; transition : left .4s cubic-bezier(.7, .3, .2, .9);
}
.btn-jogar-agora:hover::after, .btn-jogar-agora:focus::after { left : 110%; }
.btn-jogar-agora:hover, .btn-jogar-agora:focus {
	background : linear-gradient(105deg, #FFD89B 0%, #FF7E00 100%);
	box-shadow : 0 5px 18px rgba(255, 126, 0, .16);
}

/* Divisor */
.divider { width : 100%; height : 1px; background : #CFBE99; margin : 1.2rem 0; opacity : .36; }

/* Botão Google — altura reduzida */
.btn-google {
	display    : flex; align-items : center; justify-content : center; gap : .55rem;
	width      : 100%; min-height : var(--btn-h);
	background : #FFF; color : #222;
	border     : 1px solid #E4E6EB; border-radius : 10px;
	box-shadow : 0 2px 8px rgba(66, 133, 244, .10);
	font-size  : 1rem; font-weight : 700;
	padding    : 0 .9rem; /* ↓ menos altura vertical */
	cursor     : pointer; outline : none;
	transition : box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.btn-google:hover, .btn-google:focus {
	background : #F7F7F7; color : #111; border-color : #DADCE0;
	box-shadow : 0 4px 14px rgba(66, 133, 244, .16);
}
.btn-google:active { background : #EFEFEF; color : #222; }
.google-icon svg { width : 18px; height : 18px; display : block; }
.google-text { font : inherit; letter-spacing : .02em; }

/* Footer fixo */
.footer {
	position   : fixed; left : 0; bottom : 0; width : 100vw;
	background : rgba(27, 26, 24, .85); color : #BBB; font-size : .93rem;
	padding    : 10px 0; text-align : center; z-index : 10; backdrop-filter : blur(2px);
	box-shadow : 0 -2px 14px rgba(0, 0, 0, .11); height : var(--footer-h);
	display    : flex; align-items : center; justify-content : center; gap : .5rem;
}
.footer a {
	color      : var(--primary); text-decoration : none; font-weight : 600; position : relative;
	transition : color .25s ease;
}
.footer a::after {
	content          : ""; position : absolute; left : 0; bottom : -3px; width : 0%; height : 2px;
	background-color : var(--primary-light); transition : width .3s ease;
}
.footer a:hover { color : var(--primary-light); }
.footer a:hover::after { width : 100%; }
body.claro .footer { background : rgba(0, 0, 0, 0.9); color : #A07700; }
body.claro .footer a::after { background-color : var(--primary); }
body.claro .footer a:hover { color : var(--primary); }

/* Modal temas */
#avatarFrame { display : block; border : none; }
body:not(.claro) .modal-content { background : #2C3E50; color : var(--text-dark); }
body.claro .modal-content { background : #FFF; color : var(--text-light); }
body:not(.claro) .modal-header, body:not(.claro) .modal-footer { border-color : rgba(255, 255, 255, .15); }
body:not(.claro) .modal .close { color : #FFF; opacity : 1; text-shadow : none; }
body.claro .modal .close { color : #212529; opacity : 1; text-shadow : none; }
body:not(.claro) .modal .btn-secondary {
	background : #3B4D5D; border-color : #3B4D5D; color : #FFF;
}
body:not(.claro) .modal .btn-secondary:hover {
	background : #465D70; border-color : #465D70;
}
#btnConfirmAvatar, #btnSalvar { background : #FFA92C; color : #FFF !important; }
#btnConfirmAvatar:hover { background : #FB8C00 !important; outline : none !important; box-shadow : none !important; }
#btnSalvar:hover { background : #FB8C00 !important; outline : none !important; box-shadow : none !important; }

/* Mobile: modal full screen */
@media (max-width : 768px) {
	#avatarModal .modal-dialog { margin : 0; max-width : 100vw; height : 100vh; }
	#avatarModal .modal-content { height : 100vh; border-radius : 0; }
	#avatarModal .modal-body { flex : 1 1 auto; padding : 0; overflow-y : auto; }
	/* ajuste de densidade */
	.molde { width : min(94vw, 440px); }
}

/* Utilidades Bootstrap override leves */
.form-control:focus { box-shadow : none; }

/* Layout dos dois botões */
.btn-row {
	display               : grid;
	grid-template-columns :1fr 1fr;
	gap                   : var(--gap);
	width                 : 100%;
}

.btn-row .to-btn {
	min-height  : var(--btn-h);
	display     : inline-flex; align-items : center; justify-content : center; gap : .55rem;
	padding     : 0 .9rem;
	font-size   : .95rem; line-height : 1; font-weight : 800; text-transform : uppercase;
	white-space : nowrap; min-width : 0;
	border      : none; border-radius : 14px;
	position    : relative; overflow : hidden; color : #FFF;
	transition  : transform .14s, box-shadow .2s, filter .2s;
	box-shadow  : 0 6px 18px rgba(0, 0, 0, .12);
}

/* brilho passando */
.btn-row .to-btn::after {
	content    : ""; position : absolute; left : -40%; top : 0; width : 60%; height : 100%;
	background : linear-gradient(120deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 60%);
	transform  : skewX(-20deg); opacity : 0; filter : blur(2px);
	transition : left .45s cubic-bezier(.7, .3, .2, .9), opacity .3s;
}
.btn-row .to-btn:hover::after { left : 110%; opacity : .9; }

.btn-row .to-btn:active { transform : translateY(1px); }

/* Ícones */
.btn-ico { width : 1.1em; height : 1.1em; display : inline-flex; align-items : center; justify-content : center; flex : 0 0 auto; }
.btn-ico svg { width : 1em; height : 1em; display : block; }

/* Temas dos botões */
.to-btn--account {
	background : linear-gradient(135deg, #4ADE80 0%, #059669 100%);
	border     : 1px solid rgba(5, 150, 105, .36);
	box-shadow : 0 6px 18px rgba(5, 150, 105, .28);
}
.to-btn--account:hover { filter : saturate(1.07) brightness(1.03); box-shadow : 0 10px 26px rgba(5, 150, 105, .34); }
.to-btn--account:focus-visible { outline : 0; box-shadow : 0 0 0 3px rgba(16, 185, 129, .35), 0 8px 22px rgba(5, 150, 105, .30); }

.to-btn--logout {
	background : linear-gradient(135deg, #F87171 0%, #DC2626 100%);
	border     : 1px solid rgba(220, 38, 38, .40);
	box-shadow : 0 6px 18px rgba(220, 38, 38, .26);
}
.to-btn--logout:hover { filter : saturate(1.08) brightness(1.02); box-shadow : 0 10px 26px rgba(220, 38, 38, .34); }
.to-btn--logout:focus-visible { outline : 0; box-shadow : 0 0 0 3px rgba(244, 63, 94, .35), 0 8px 22px rgba(220, 38, 38, .30); }

/* Mobile empilha */
@media (max-width : 280px) {
	.btn-row { grid-template-columns :1fr; }
}

body:not(.claro) .modal-content .card {
	background : #253544;
	color      : var(--text-dark);
	border     : 1px solid rgba(255, 255, 255, .08);
}

/* Gutters consistentes só dentro da accountModal */
#accountModal .row {
	margin-left  : -8px; /* gutter = 16px */
	margin-right : -8px;
}
#accountModal .row > [class*="col-"] {
	padding-left  : 8px;
	padding-right : 8px;
}

/* Alturas iguais e visual alinhado */
#accountModal .card { height : 100%; border-radius : 12px; }
#accountModal .modal-body { overflow-x : hidden; }

/* ==== Ajustes específicos para o modo escuro do input nome ==== */
body:not(.claro) .input-nome {
	background   : #212E27; /* mais escuro e limpo */
	color        : #F2F2F2;
	border-color : #375A49; /* borda discreta em repouso */
	box-shadow   : none; /* remove sombra interna "suja" */
	caret-color  : var(--primary); /* cursor visível */
}

body:not(.claro) .input-nome::placeholder {
	color   : #9FB0A7; /* placeholder claro, mas não estoura */
	opacity : .95;
}

body:not(.claro) .input-nome:focus {
	background   : #1B2722; /* foco um pouco mais escuro */
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20); /* halo consistente */
}

/* Respeita UI dark nativa (seleção, popups, etc.) */
.input-nome { color-scheme : dark; }

/* Corrige o amarelo do autofill no Chrome/Safari */
.input-nome:-webkit-autofill,
.input-nome:-webkit-autofill:focus {
	-webkit-text-fill-color : #F2F2F2;
	-webkit-box-shadow      : 0 0 0 1000px #1B2722 inset; /* pinta o fundo */
	transition              : background-color 5000s ease-in-out 0s; /* mata o flash */
}

/* Se também usa .form-control do Bootstrap, garanta a especificidade */
body:not(.claro) .form-control.input-nome:focus {
	background   : #1B2722;
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20);
}

/* ==== Inputs dark mode: .input-nome + #accountNome + .account-nome ==== */
body:not(.claro) :is(.input-nome, #accountNome, .account-nome) {
	background   : #212E27;
	color        : #F2F2F2;
	border-color : #375A49;
	box-shadow   : none;
	caret-color  : var(--primary);
	color-scheme : dark; /* integra com UI nativa */
}

body:not(.claro) :is(.input-nome, #accountNome, .account-nome)::placeholder {
	color : #9FB0A7; opacity : .95;
}

body:not(.claro) :is(.input-nome, #accountNome, .account-nome):focus {
	background   : #1B2722;
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20);
}

/* Corrige amarelo do autofill (Chrome/Safari) */
:is(.input-nome, #accountNome, .account-nome):-webkit-autofill,
:is(.input-nome, #accountNome, .account-nome):-webkit-autofill:focus {
	-webkit-text-fill-color : #F2F2F2;
	-webkit-box-shadow      : 0 0 0 1000px #1B2722 inset;
	transition              : background-color 5000s ease-in-out 0s;
}

/* Se for .form-control do Bootstrap, garante especificidade no foco */
body:not(.claro) .form-control:is(.input-nome, #accountNome, .account-nome):focus {
	background   : #1B2722;
	border-color : var(--primary);
	box-shadow   : 0 0 0 3px rgba(240, 160, 0, .20);
}

/* Tema do modal Sobre (usa suas CSS vars) */
.sobre-modal {
	background    : var(--card-dark, #1F2A23);
	color         : var(--text-dark, #ECECEC);
	border-radius : var(--radius, 12px);
	box-shadow    : var(--shadow, 0 4px 24px rgba(0, 0, 0, .12));
}
body.claro .sobre-modal {
	background : var(--card-light, #FFF);
	color      : var(--text-light, #1A1A1A);
}
.sobre-modal .modal-header,
.sobre-modal .modal-footer {
	border : 0;
}
.sobre-modal .btn-primary {
	background   : var(--primary, #F0A000);
	border-color : var(--primary, #F0A000);
	color        : #111;
}
.sobre-modal .btn-primary:hover {
	filter : brightness(.95);
}

/* Lista do modal Sobre — corrige bullets e recuo */
.sobre-modal .modal-body ul {
	margin              : .5rem 0 0;
	padding-left        : 1.25rem; /* recuo */
	list-style-position : outside;
}
.sobre-modal .modal-body ul li {
	list-style-type : disc; /* bolinha padrão */
	margin          : .25rem 0;
}

/* Se em algum lugar seu reset remove bullets (list-style:none),
   isso aqui garante que o Sobre continue mostrando */
.sobre-modal .modal-body ul,
.sobre-modal .modal-body li {
	list-style : revert; /* fallback moderno */
}

/* Justificar apenas os parágrafos do modal "Sobre" */
.sobre-modal .modal-body p {
	text-align      : justify;
	text-justify    : inter-word; /* suporte parcial, não faz mal ter */
	-webkit-hyphens : auto;
	hyphens         : auto; /* usa hifenização do pt-BR */
}

/* Se quiser justificar também os itens de lista, ative: */
.sobre-modal .modal-body li {
	text-align      : justify;
	-webkit-hyphens : auto;
	hyphens         : auto;
}

/* Não justificar a linha de crédito em small */
.sobre-modal .modal-body p.small {
	text-align : left;
}

/* (Opcional) melhorar legibilidade: limitar largura e altura de linha */
.sobre-modal .modal-dialog { max-width : 560px; }
/* ~ideal para blocos justificados */
.sobre-modal .modal-body { line-height : 1.55; }